/* Desktop: the introduction is shared; photos and size selection share a row.
   The gallery takes its height from that row, not from the portrait's width. */
@media (min-width: 821px) {
  .wear-hero {
    grid-template-columns: minmax(0, 1fr) minmax(350px, .88fr);
    grid-template-areas: "copy copy" "gallery builder";
    column-gap: clamp(24px, 3vw, 44px);
    row-gap: 24px;
    padding-top: 28px;
    padding-bottom: 64px;
  }
  .wear-hero .wear-hero-copy {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
    align-items: center;
    column-gap: 28px;
    row-gap: 10px;
    max-width: none;
    padding: 0;
  }
  .wear-hero-copy .eyebrow { grid-column: 1 / -1; margin: 0; }
  .wear-hero-copy h1 { max-width: none; font-size: clamp(52px, 5vw, 76px); line-height: 1; }
  .wear-hero-copy .wear-lead { max-width: none; margin: 0; gap: 4px; font-size: 16px; line-height: 1.4; }
  .wear-hero-copy .wear-facts { grid-column: 1 / -1; max-width: none; margin-top: 0; }
  .wear-hero .wear-gallery { display: flex; flex-direction: column; align-self: stretch; min-height: 0; }
  .wear-gallery .wear-gallery-stage { flex: 1 1 0; min-height: 360px; aspect-ratio: auto; }
  .wear-gallery-stage .wear-gallery-main { position: absolute; inset: 0; }
  .wear-gallery-stage .wear-gallery-main,
  .wear-gallery-stage .wear-pair-scene > img { object-fit: contain; object-position: center; }
  .wear-gallery-stage .wear-shirt-crop { height: 100%; aspect-ratio: auto; }
  .wear-gallery-stage .wear-shirt-crop img { object-fit: contain; object-position: center; }
  .wear-gallery .wear-gallery-thumbs { flex-shrink: 0; }
  .wear-gallery-thumbs button { flex-basis: calc((100% - 35px) / 6); height: 66px; }
  .wear-gallery .wear-gallery-tools { margin-top: 10px; }
  .wear-hero .wear-builder { position: static; align-self: start; }
}