/* Case material supplied by the portfolio owner, curated without altering UI content. */
.case-supplied-v52 {
  padding: clamp(72px, 9vw, 144px) var(--gutter);
  background: color-mix(in srgb, var(--surface) 78%, transparent);
}

.case-supplied-v52 + .case-supplied-v52 {
  padding-top: 0;
}

.case-supplied-v52 .case-source-heading {
  margin-bottom: clamp(28px, 4vw, 56px);
}

.case-supplied-v52 figure {
  min-width: 0;
  margin: 0;
}

.case-supplied-v52 figcaption {
  margin-top: 12px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.35;
}

.case-supplied-v52 .case-shot-media {
  overflow: hidden;
  border-radius: 24px;
  background: var(--paper);
}

.case-supplied-v52 .case-shot-media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.v52-desktop-grid,
.v52-product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  align-items: start;
}

.v52-desktop-grid > figure:first-child {
  grid-column: 1 / -1;
}

.v52-phone-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 24px);
  align-items: start;
  margin-top: clamp(36px, 5vw, 72px);
}

.v52-phone-grid figure {
  width: 100%;
  max-width: 270px;
  margin-inline: auto;
}

.v52-phone-grid .case-shot-media {
  border-radius: 22px;
}

.v52-pass-desktop-grid > figure:first-child,
.v52-sonic-app-grid > figure:first-child {
  grid-column: 1 / -1;
}

.v52-sonic-site-grid .case-shot-media,
.v52-sonic-app-grid .case-shot-media {
  background: #00140c;
}

.v52-fourmeta-grid .case-shot-media {
  background: #11141a;
}

.v52-fourmeta-mobile-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.v52-fourmeta-mobile-grid figure {
  max-width: 230px;
}

.v52-puiton-mobile-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.v52-puiton-mobile-grid figure {
  max-width: 250px;
}

@media (max-width: 900px) {
  .v52-fourmeta-mobile-grid,
  .v52-puiton-mobile-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .case-supplied-v52 {
    padding-block: 72px;
  }

  .case-supplied-v52 + .case-supplied-v52 {
    padding-top: 0;
  }

  .v52-desktop-grid,
  .v52-product-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .v52-desktop-grid > figure:first-child,
  .v52-pass-desktop-grid > figure:first-child,
  .v52-sonic-app-grid > figure:first-child {
    grid-column: auto;
  }

  .case-supplied-v52 .case-shot-media {
    border-radius: 18px;
  }
}

/* Phone text remains readable instead of shrinking several columns. */
.v52-phone-grid,.v52-fourmeta-mobile-grid,.v52-puiton-mobile-grid{grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}