.ruby-photo-marquee {
  width: 100%;
  padding-block: 24px;
  overflow: hidden;
  background: #fff;
  border-block-start: 1px solid var(--ruby-border, #efd7e2);
}

.ruby-photo-marquee__viewport {
  width: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
}
.ruby-photo-marquee__viewport::-webkit-scrollbar { display: none; }
.ruby-photo-marquee__viewport:focus-visible { outline: 3px solid #a71c5e; outline-offset: -3px; }

.ruby-photo-marquee__track {
  display: flex;
  width: max-content;
  max-width: none;
  animation: ruby-photo-marquee-fallback 24s linear infinite;
  will-change: transform;
}
.ruby-photo-marquee__set {
  display: flex;
  flex: none;
  gap: 24px;
  padding-inline-end: 24px;
}
.ruby-photo-marquee__card {
  flex: none;
  width: clamp(185px, 17.5vw, 235px);
  aspect-ratio: 235 / 317;
  margin: 0;
  overflow: hidden;
  border-radius: 12px;
  background: #f6eff2;
}
.ruby-photo-marquee__card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.ruby-photo-marquee--ready .ruby-photo-marquee__track {
  animation: ruby-photo-marquee-flow var(--ruby-photo-duration, 24s) linear infinite;
}
.ruby-photo-marquee[data-ruby-in-view="false"] .ruby-photo-marquee__track,
.ruby-photo-marquee__viewport:hover .ruby-photo-marquee__track,
.ruby-photo-marquee__viewport:focus-within .ruby-photo-marquee__track { animation-play-state: paused; }

@keyframes ruby-photo-marquee-fallback {
  to { transform: translate3d(-25%, 0, 0); }
}

@keyframes ruby-photo-marquee-flow {
  to { transform: translate3d(calc(-1 * var(--ruby-photo-cycle, 777px)), 0, 0); }
}

.ruby-photo-marquee__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 580px) {
  .ruby-photo-marquee { padding-block: 18px; }
  .ruby-photo-marquee__set { gap: 14px; padding-inline-end: 14px; }
  .ruby-photo-marquee__card { width: clamp(165px, 54vw, 230px); border-radius: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .ruby-photo-marquee__viewport { overflow-x: auto; }
  .ruby-photo-marquee__track { animation: none; will-change: auto; }
}