/* Six creatives: graduated scale and spacing from the supplied video. */
.os-gallery { --gallery-width: clamp(280px, 23.6vw, 365px); }
.os-gallery-window {
  padding: 28px 0 10px;
  max-height: none;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
}
.os-gallery-window:active { cursor: grabbing; }
.os-gallery-track {
  position: relative;
  display: block;
  height: calc(var(--gallery-width) * 1672 / 941);
  transform: none;
  transition: none;
  will-change: auto;
}
.os-gallery-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--gallery-width);
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  background: #eef0f2;
  transform-origin: center;
  transition: transform .7s cubic-bezier(.22,.61,.36,1), opacity .7s cubic-bezier(.22,.61,.36,1);
  will-change: transform, opacity;
}
.os-gallery-card img { width: 100%; height: auto; display: block; pointer-events: none; }
.os-gallery-track[data-jump=true] .os-gallery-card { transition: none; }
.os-gallery-controls { gap: 12px; margin: 42px 0 64px; }
.os-gallery-controls .os-round {
  width: 38px;
  height: 38px;
  color: #48494d;
  border: 1px solid #e3e3e5;
  background: transparent;
}
.os-gallery-controls .os-round:hover { color: #111; background: #f0f0f2; }
@media (max-width: 600px) {
  .os-gallery { --gallery-width: min(68vw, 280px); }
  .os-gallery-window { padding: 16px 0 8px; }
  .os-gallery-card { border-radius: 15px; }
  .os-gallery-controls { margin: 25px 0 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .os-gallery-card { transition: none; will-change: auto; }
}