.studio-credit {
  position: relative;
  isolation: isolate;
  max-width: 1240px;
  margin: -28px auto 34px;
  padding: 22px 26px;
  display: grid;
  grid-template-columns: minmax(210px, 320px) 1fr;
  align-items: center;
  gap: 30px;
  overflow: hidden;
  border: 1px solid #e7eef9;
  border-radius: 24px;
  background:
    radial-gradient(circle at 12% 0%, #eaf3ff 0, transparent 34%),
    linear-gradient(135deg, #ffffff 0%, #f8fbff 52%, #ffffff 100%);
  box-shadow: 0 22px 55px #1d4f9a0d;
  color: #738095;
}

.studio-credit::before {
  content: "";
  position: absolute;
  inset: -70% auto -70% -38%;
  width: 34%;
  z-index: -1;
  transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, #ffffffd8, #86b6ff38, transparent);
  animation: studioShine 5.8s ease-in-out infinite;
}

.studio-credit::after {
  content: "";
  position: absolute;
  inset: 12px;
  z-index: -2;
  border-radius: 20px;
  background: linear-gradient(135deg, #ffffff80, transparent 62%);
  pointer-events: none;
}

.studio-credit img {
  display: block;
  width: min(100%, 300px);
  height: auto;
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 12px 26px #3478f61c);
}

.studio-credit p {
  position: relative;
  margin: 0;
  padding-left: 24px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  border-left: 1px solid #dbe6f7;
}

.studio-credit p::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 4px;
  width: 7px;
  height: 32px;
  border-radius: 999px;
  background: linear-gradient(180deg, #3478f6, #85b6ff);
  box-shadow: 0 0 22px #3478f655;
}

.studio-credit strong {
  color: #253149;
  font: 900 18px/1.2 "Plus Jakarta Sans", sans-serif;
  letter-spacing: -0.45px;
}

.studio-credit small {
  max-width: 520px;
  color: #738095;
  font-size: 13px;
  line-height: 1.55;
}

@keyframes studioShine {
  0%, 42% { transform: translateX(0) rotate(18deg); opacity: 0; }
  52% { opacity: 1; }
  78%, 100% { transform: translateX(520%) rotate(18deg); opacity: 0; }
}

@media (max-width: 720px) {
  .studio-credit {
    margin: 0 18px 28px;
    padding: 22px;
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .studio-credit img {
    width: min(100%, 250px);
  }

  .studio-credit p {
    padding-left: 18px;
  }

  .studio-credit strong {
    font-size: 15px;
  }

  .studio-credit small {
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .studio-credit::before {
    animation: none;
    display: none;
  }
}