/* i8 exterior crops: TAI 7 reference width (61%) and tyre line (78%). */
.vehicle-family[data-family="i8"] .vehicle-gallery-frame {
  background: var(--i8-background, #e5e6e5);
  background-size: cover;
  background-position: center;
}
.vehicle-family[data-family="i8"] .vehicle-gallery-frame img {
  inset: auto;
  left: var(--i8-left, -1.24%);
  top: var(--i8-top, -0.69%);
  width: var(--i8-width, 100.19%);
  height: auto;
  padding: 0;
  aspect-ratio: 1672 / 941;
}
.vehicle-family[data-family="i8"] .vehicle-gallery-frame:has(img[src$="paint-silver.webp"]) {
  --i8-width: 96.40%;
  --i8-left: 0.42%;
  --i8-top: -0.26%;
  --i8-background: #c8c9c7 url("assets/i8-refresh/paint-silver.webp");
}
.vehicle-family[data-family="i8"] .vehicle-gallery-frame img[src$="paint-silver.webp"] {
  mask-image: linear-gradient(to right, transparent, #000 2%, #000 98%, transparent),
              linear-gradient(to bottom, #000 95%, transparent);
  mask-composite: intersect;
}
.vehicle-family[data-family="i8"] .vehicle-gallery-frame:has(img[src$="paint-black.webp"]) {
  --i8-width: 105.80%;
  --i8-left: -3.85%;
  --i8-top: -8.02%;
  --i8-background: #c8c9c7;
}
.vehicle-family[data-family="i8"] .vehicle-cabin-details { margin-top: 44px; }
.vehicle-family[data-family="i8"] .vehicle-cabin-details h3 {
  font-size: clamp(27px, 3vw, 42px);
  font-weight: 500;
  letter-spacing: -.025em;
}
.vehicle-family[data-family="i8"] .vehicle-cabin-details > .vehicle-note {
  margin: 10px 0 24px;
  max-width: 65ch;
}
.vehicle-family[data-family="i8"] .vehicle-cabin-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px 22px;
}
.vehicle-family[data-family="i8"] .vehicle-cabin-detail-grid figure:first-child { grid-column: 1 / -1; }
.vehicle-family[data-family="i8"] .vehicle-cabin-detail-grid img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  background: #141414;
}
.vehicle-family[data-family="i8"] .vehicle-cabin-detail-grid figcaption {
  padding-top: 12px;
  color: #e5e5e5;
  font-size: 15px;
}
@media (max-width: 820px) {
  .vehicle-family[data-family="i8"] .vehicle-cabin-detail-grid { grid-template-columns: 1fr; gap: 24px; }
  .vehicle-family[data-family="i8"] .vehicle-cabin-details { margin-top: 32px; }
}

/* L8 cabin template: complete photographs in a fixed 3:2 window. */
.vehicle-family[data-family="i8"] .vehicle-cabin-photo img {
  aspect-ratio: 3 / 2;
  object-fit: contain;
}