/* Match the visible vehicle bodies, not each file's transparent canvas.
   Widths and anchors come from the supplied artwork's opaque bounds. */
.fleet-cutout {
  --vehicle-width: 87.96%;
  --vehicle-center: 48.60%;
  --vehicle-ground: 86.30%;
  --ground-line: 62%;
  background: radial-gradient(125% 100% at 50% 22%, #fff 0%, #f4f2ed 58%, #e9e5dd 100%);
}
.fleet-cutout--range-rover { --vehicle-width: 91.80%; --vehicle-center: 51.56%; --vehicle-ground: 91.49%; }
.fleet-cutout--sprinter { --vehicle-width: 84.85%; --vehicle-center: 50.39%; --vehicle-ground: 88.87%; }
.fleet-cutout--v-class { --vehicle-width: 87.23%; --vehicle-center: 51.72%; --vehicle-ground: 83.91%; }
html body :is(.fleet-card-img, .fl-row-img).fleet-cutout > img {
  position: absolute;
  left: 50%;
  top: var(--ground-line);
  width: var(--vehicle-width);
  max-width: none;
  height: auto;
  aspect-ratio: auto;
  padding: 0;
  background: transparent;
  object-fit: contain;
  transform: translate(calc(-1 * var(--vehicle-center)), calc(-1 * var(--vehicle-ground)));
  transform-origin: var(--vehicle-center) var(--vehicle-ground);
}
.fl-row-img.fleet-cutout { aspect-ratio: 4 / 3; --ground-line: 75%; }
html body :is(.fleet-card, .fl-row):is(:hover, :focus-visible) .fleet-cutout > img {
  transform: translate(calc(-1 * var(--vehicle-center)), calc(-1 * var(--vehicle-ground))) scale(1.03);
}
@media (max-width: 900px) {
  .fl-row-img.fleet-cutout { aspect-ratio: 5 / 4; }
}

/* Reserve matching text rows for short names and two-line descriptions. */
html body #main .fleet-card { display: flex; flex-direction: column; transform: none; }
html body #main .fleet-card-img { flex-shrink: 0; }
html body #main .fleet-card-text { display: flex; flex: 1; flex-direction: column; }
html body #main .fleet-card-text h3 { min-height: 2lh; }
html body #main .fleet-card-text .ftc { min-height: 2lh; }
html body #main .fleet-card-meta { margin-top: auto; }