/* One device system for every case. Artwork remains inside the original card. */
:is(.case-card, .project-detail-art) .case-art {
  --case-caption-space: 0px;
}
.case-card .case-art {
  --case-caption-space: 72px;
}
.case-card { container-type: inline-size; }
:is(.case-card, .project-detail-art) .case-art .art-stage {
  inset: 0 0 var(--case-caption-space);
}
:is(.case-card, .project-detail-art) .case-art .art-backdrop {
  height: calc(100% + var(--case-caption-space));
}
:is(.case-card, .project-detail-art) .case-art .art-logo {
  top: 8%;
}
:is(.case-card, .project-detail-art) .case-art .art-logo-fitness img {
  width: auto;
  height: 32px;
  max-width: 48%;
  max-height: 32px;
}
:is(.case-card, .project-detail-art) .case-art .art-browser {
  left: 10%;
  top: 28%;
  width: 56%;
  height: auto;
  transform: rotate(-4deg);
}
:is(.case-card, .project-detail-art) .case-art .art-browser > img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: contain;
  object-position: center top;
}
:is(.case-card, .project-detail-art) .case-art .art-phone {
  left: 72%;
  top: 25%;
  width: 18%;
  height: auto;
  aspect-ratio: 9 / 19.5;
  transform: rotate(5deg);
}
:is(.case-card, .project-detail-art) .case-art .art-phone > img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center top;
}
/* Product photography replaces the browser in Groeishot's composition. */
:is(.case-card, .project-detail-art) .case-art-groeishot .art-phone {
  left: 65%;
}
:is(.case-card, .project-detail-art) .case-art-groeishot .art-product {
  top: 25%;
  height: 60%;
}
@media (min-width: 1500px) {
  .case-card .case-art { --case-caption-space: 80px; }
}
/* Adapt to the card's width, including the tablet's two-column grid. */
@container (max-width: 400px) {
  .case-card .case-art { --case-caption-space: 72px; }
  .case-card .case-art .art-logo { top: 4%; font-size: 16px; }
  .case-card .case-art .art-logo img { width: 24px; height: 24px; }
  .case-card .case-art .art-logo-fitness img { width: auto; max-height: 24px; }
  .case-card .case-art .art-logo-bynd strong { font-size: 1em; }
  .case-card .case-art .art-browser { width: 50%; border-width: 3px; border-radius: 7px; }
  .case-card .case-art .art-browser-bar { height: 12px; font-size: 5px; }
  .case-card .case-art .art-phone { width: 17%; border-width: 3px; border-radius: 13px; }
}
@container (max-width: 300px) {
  .case-card .case-art .art-logo { top: 0; font-size: 14px; }
  .case-card .case-art .art-logo img { width: 20px; height: 20px; }
  .case-card .case-art .art-logo-fitness img { width: auto; max-height: 20px; }
  .case-card .case-art .art-logo-bynd { font-size: 12px; gap: 1px; }
  .case-card .case-art .art-browser { width: 48%; top: 24%; }
  .case-card .case-art .art-phone { width: 16%; top: 22%; }
  .case-card .case-copy { display: block; bottom: 14px; }
  .case-card .case-caption { max-width: none; }
  .case-card .case-copy h3 { font-size: 16px; }
  .case-card .case-type { max-width: none; padding-right: 62px; font-size: 10px; }
  .case-card .case-action { position: absolute; right: 0; bottom: 0; font-size: 9px; }
}