/* Reserve vehicle photo space before downloads, including dynamically added cards.
   Gallery layers and ranking thumbnails retain their existing frame proportions. */
img[data-vehicle-image] {
  background: #f1f2f4 url("../img/vehicle-placeholder.svg") center / 56px auto no-repeat;
}
img[data-vehicle-image=""] {
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
}
img[data-vehicle-image][data-vehicle-loaded] {
  background: none;
}

/* Start subdued before loading; never reset an already visible photo to zero.
   Keep the gallery's own opacity/slide transitions independent. */
@media (prefers-reduced-motion: no-preference) {
  html.has-js img[data-vehicle-image]:not(.main-layer) {
    opacity: .55;
    transition: opacity 320ms ease-out;
  }
  html.has-js img[data-vehicle-image][data-vehicle-loaded]:not(.main-layer) {
    opacity: 1;
  }
}