/* Explicit widths keep repeated flex groups from overlapping in WebKit. */
body:is(.page-oto, .home-focus) .oe-bodywork-types-strip {
  --oe-vehicle-card-width: 164px;
  --oe-vehicle-gap: 12px;
  --oe-vehicle-group-width: calc((var(--oe-vehicle-card-width) + var(--oe-vehicle-gap)) * var(--oe-vehicle-count));
}

body:is(.page-oto, .home-focus) .oe-bodywork-marquee-track {
  width: calc(var(--oe-vehicle-group-width) * var(--oe-vehicle-repeat-count));
  flex-wrap: nowrap;
  gap: 0;
  direction: ltr;
}

body:is(.page-oto, .home-focus) .oe-bodywork-marquee-group {
  box-sizing: border-box;
  width: var(--oe-vehicle-group-width);
  min-width: var(--oe-vehicle-group-width);
  flex: 0 0 var(--oe-vehicle-group-width);
  flex-wrap: nowrap;
  gap: var(--oe-vehicle-gap);
  padding: 0 var(--oe-vehicle-gap) 0 0;
}

body:is(.page-oto, .home-focus) .oe-bodywork-type {
  box-sizing: border-box;
  width: var(--oe-vehicle-card-width);
  min-width: var(--oe-vehicle-card-width);
  max-width: var(--oe-vehicle-card-width);
  flex: 0 0 var(--oe-vehicle-card-width);
}

@media (max-width: 760px) {
  body:is(.page-oto, .home-focus) .oe-bodywork-types-strip {
    --oe-vehicle-card-width: 142px;
    --oe-vehicle-gap: 8px;
  }
}

@media (max-width: 600px) {
  body:is(.page-oto, .home-focus) .oe-bodywork-types-strip {
    --oe-vehicle-card-width: 104px;
  }
}

/* The homepage hides duplicate groups when reduced motion is requested. */
@media (prefers-reduced-motion: reduce) {
  body.home-focus .oe-bodywork-marquee-track {
    width: var(--oe-vehicle-group-width);
  }
}