html { overflow-x: clip; }
.service-grid {
  --scene-gutter: max(32px, calc((100vw - 1120px) / 2));
  gap: 40px;
  margin: -40px calc(-1 * var(--scene-gutter));
  padding: 40px var(--scene-gutter);
  overflow: clip;
}

.scroll-scenes-active .service[data-scroll-scene] {
  transform: translateX(var(--scene-x, 0px));
  opacity: var(--scene-alpha, 1);
}

.scroll-scenes-active .service.scene-in-range { will-change: transform, opacity; }
.scroll-scenes-active .service[data-scroll-scene]:focus-within { transform: none; opacity: 1; }

@media (max-width: 640px) {
  .service-grid { --scene-gutter: 16px; gap: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-scenes-active .service[data-scroll-scene] { transform: none; opacity: 1; will-change: auto; }
}

@supports not (overflow-x: clip) {
  html { overflow-x: hidden; }
}

@media print {
  .scroll-scenes-active .service[data-scroll-scene] { transform: none; opacity: 1; will-change: auto; }
}