.sai-teaser {
  overflow: hidden;
  padding-block: clamp(3rem, 5vw, 4.5rem);
}

.sai-teaser__head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1.5rem;
  align-items: start;
}

.sai-teaser__label { grid-column: span 4; }
.sai-teaser__copy { grid-column: span 8; }

.sai-teaser__copy .lead {
  max-width: 58ch;
  margin-top: 1.25rem;
}

.sai-teaser__carousel {
  position: relative;
  width: 100vw;
  height: clamp(10.5rem, 15vw, 13rem);
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.sai-teaser__track {
  display: flex;
  width: max-content;
  height: 100%;
  gap: .85rem;
  padding-inline: .85rem;
  will-change: transform;
}

.sai-teaser__track.is-ready { animation: sai-teaser-scroll 58s linear infinite; }

.sai-teaser__carousel:hover .sai-teaser__track,
.sai-teaser__carousel:focus-within .sai-teaser__track { animation-play-state: paused; }

.sai-teaser__visual {
  --sai-card-accent: var(--accent);
  position: relative;
  flex: 0 0 clamp(15rem, 24vw, 23rem);
  overflow: hidden;
  min-width: 0;
  height: 100%;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--sai-card-accent) 68%, transparent);
  border-radius: .9rem;
  background: #17132f;
  box-shadow: 0 1rem 2.5rem rgba(8,5,25,.25);
}

.sai-teaser__visual--mint,
.sai-teaser__visual--cyan,
.sai-teaser__visual--yellow { --sai-card-accent: var(--accent); }

.sai-teaser__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
}

.sai-teaser__visual--center img { object-position: center; }

.sai-teaser__caption {
  position: absolute;
  right: .6rem;
  bottom: .6rem;
  left: .6rem;
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .6rem .7rem;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: .65rem;
  background: rgba(15,11,42,.9);
  color: #fff;
  font: 500 .61rem/1.3 var(--font-mono);
  letter-spacing: .05em;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
}

.sai-teaser__caption::before {
  width: .48rem;
  height: .48rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--sai-card-accent);
  content: "";
}

.sai-teaser__action {
  display: flex;
  justify-content: flex-end;
  margin-top: 1.25rem;
}

@keyframes sai-teaser-scroll {
  to { transform: translate3d(calc(-50% - .425rem), 0, 0); }
}

@media (max-width: 900px) {
  .sai-teaser__label,
  .sai-teaser__copy { grid-column: 1 / -1; }
  .sai-teaser__carousel { height: 11rem; }
  .sai-teaser__visual { flex-basis: min(72vw, 20rem); }
}

@media (max-width: 640px) {
  .sai-teaser { padding-block: 3rem; }
  .sai-teaser__carousel {
    height: 10rem;
    mask-image: linear-gradient(90deg, transparent, #000 2%, #000 98%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 2%, #000 98%, transparent);
  }
  .sai-teaser__visual { flex-basis: 74vw; }
  .sai-teaser__action { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .sai-teaser__carousel { overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
  .sai-teaser__track.is-ready { animation: none; }
}