/* V32 QA: native compositions on tall computers, without changing accepted
   desktop landscape or phone framing. No new copy is layered over a car. */
@media (min-width: 1025px) and (orientation: portrait) {
  .feature-gt3 .feature-hero { aspect-ratio: 2000 / 2667 !important; }
  .feature-550 .feature-hero { aspect-ratio: 2200 / 1420 !important; }
  .feature-r34 .feature-hero { aspect-ratio: 3 / 2 !important; }
  .feature-gt3 .feature-hero,
  .feature-550 .feature-hero,
  .feature-r34 .feature-hero {
    block-size: auto !important;
    min-block-size: 0 !important;
  }
  .feature-gt3 .feature-hero-content,
  .feature-550 .feature-hero-content,
  .feature-r34 .feature-hero-content { min-block-size: 0 !important; block-size: 100% !important; }
  .feature-550 .feature-hero-content { padding-block-start: 120px !important; }
  .feature-gt3 .feature-hero-media img,
  .feature-550 .feature-hero-media img,
  .feature-r34 .feature-hero-media img { object-fit: contain !important; object-position: center !important; }

  .feature-22b .story-full.rear,
  .feature-22b #city-reframed { aspect-ratio: 2200 / 1467 !important; }
  .feature-gt3 .story-full { aspect-ratio: 3 / 4 !important; }
  .feature-550 #long-bonnet { aspect-ratio: 2164 / 1500 !important; }
  .feature-550 #movement { aspect-ratio: 2200 / 1467 !important; }
  .feature-r34 .story-full.rear { aspect-ratio: 3 / 2 !important; }
  .feature-22b .story-full,
  .feature-gt3 .story-full,
  .feature-550 .story-full,
  .feature-r34 .story-full.rear { block-size: auto !important; min-block-size: 0 !important; }
  .feature-22b .story-full > img,
  .feature-gt3 .story-full > img,
  .feature-550 .story-full > img,
  .feature-r34 .story-full.rear > img { object-fit: contain !important; object-position: center !important; }

  .feature-gt3 .story-duo figure:first-child,
  .feature-gt3 .story-duo figure:last-child {
    block-size: auto !important; min-block-size: 0 !important;
    aspect-ratio: 3 / 4 !important;
  }
  .feature-gt3 .story-duo img { block-size: 100% !important; min-block-size: 0 !important; object-fit: contain !important; }
  .feature-gt3 .gt3-detail-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto; align-items: start; }
  .feature-gt3 .gt3-detail-gallery figure { grid-row: auto; block-size: auto !important; min-block-size: 0 !important; aspect-ratio: 3 / 4 !important; }
  .feature-gt3 .gt3-detail-gallery img { block-size: 100% !important; min-block-size: 0 !important; object-fit: contain !important; }
}

/* A localised text shadow keeps the title legible over the Ferrari's pale sky
   without darkening the car or changing the exposure of the photograph. */
.feature-550 .feature-hero-content > .kicker,
.feature-550 .feature-hero h1,
.feature-550 .feature-hero-note { text-shadow: 0 1px 14px rgba(0, 0, 0, .65); }

/* Bridge the old phone/desktop breakpoint gap for GT3 portrait photo pairs. */
@media (min-width: 641px) and (max-width: 1024px) and (orientation: portrait) {
  .feature-gt3 .story-duo figure:first-child,
  .feature-gt3 .story-duo figure:last-child {
    block-size: auto !important; min-block-size: 0 !important;
    aspect-ratio: 3 / 4 !important;
  }
  .feature-gt3 .story-duo img {
    display: block; block-size: 100% !important; min-block-size: 0 !important;
    object-fit: contain !important; transform: none !important;
  }
}

/* Wide hero sources cannot fill a tall phone without losing a car end.
   Give the typography its own row, then show the uncut photograph. */
@media (max-width: 1024px) and (orientation: portrait) {
  .feature-550 .feature-hero,
  .feature-r34 .feature-hero {
    grid-template-rows: auto auto !important;
    block-size: auto !important; min-block-size: 0 !important;
    aspect-ratio: auto !important; background: var(--black);
  }
  .feature-550 .feature-hero-content,
  .feature-r34 .feature-hero-content {
    grid-row: 1 !important;
    block-size: auto !important; min-block-size: 0 !important;
    padding: 130px 0 38px !important;
    background: var(--black);
  }
  .feature-550 .feature-hero-content h1,
  .feature-r34 .feature-hero-content h1 { inline-size: 100% !important; max-inline-size: none; }
  .feature-550 .feature-hero h1 em,
  .feature-r34 .feature-hero h1 em { margin-top: 12px; line-height: 1.05; }
  .feature-550 .feature-hero-media,
  .feature-r34 .feature-hero-media {
    grid-row: 2 !important;
    block-size: auto !important; min-block-size: 0 !important;
  }
  .feature-550 .feature-hero-media img,
  .feature-r34 .feature-hero-media img {
    display: block; block-size: auto !important; min-block-size: 0 !important;
    object-fit: contain !important; aspect-ratio: auto !important;
  }
  .feature-550 .feature-hero-shade,
  .feature-r34 .feature-hero-shade { grid-row: 2 !important; }

  .feature-550 .story-full {
    grid-template-rows: auto auto !important;
    block-size: auto !important; min-block-size: 0 !important;
    aspect-ratio: auto !important; background: var(--black);
  }
  .feature-550 .story-full > img {
    grid-row: 1 !important; display: block;
    block-size: auto !important; min-block-size: 0 !important;
    object-fit: contain !important;
  }
  .feature-550 .story-full-shade { grid-row: 1 !important; }
  .feature-550 .story-full .story-full-copy {
    grid-row: 2 !important; inline-size: 100% !important;
    padding: 30px 5vw 34px !important;
    align-items: flex-start; justify-content: flex-start;
    text-align: left; background: var(--black);
  }
  .feature-550 .story-full .story-full-copy > * { inline-size: 100% !important; max-inline-size: none; }
  .feature-550 .story-full .story-full-copy h2 { font-size: clamp(34px, 7vw, 52px); }
}