.gevi-carousel {
  --gevi-ink: #263d34;
  --gevi-muted: #67756d;
  --gevi-accent: #265d46;
  --gevi-card-width: min(72vw, 288px);
  box-sizing: border-box;
  isolation: isolate;
  width: 100%;
  max-width: 480px;
  margin-inline: auto;
  padding-block: 38px 28px;
  background: #fff;
  color: var(--gevi-ink);
  font: 400 15px/1.6 system-ui, "Hiragino Sans", "Yu Gothic", sans-serif;
}

.gevi-carousel *, .gevi-carousel *::before, .gevi-carousel *::after { box-sizing: inherit; }
.gevi-carousel [hidden] { display: none !important; }
.gevi-carousel :focus-visible { outline: 3px solid var(--gevi-accent); outline-offset: 4px; }
.gevi-carousel__intro { padding-inline: 20px; text-align: center; }
.gevi-carousel__intro p { margin: 0; color: var(--gevi-muted); font-size: 13px; }
.gevi-carousel__intro .gevi-carousel__eyebrow { color: var(--gevi-accent); font-size: 10px; font-weight: 700; letter-spacing: .22em; }
.gevi-carousel__intro h2 { margin: 8px 0; font-size: clamp(23px, 6.4vw, 29px); line-height: 1.4; letter-spacing: .05em; }
.gevi-carousel__stage { position: relative; margin-top: 25px; }

.gevi-carousel__track {
  display: flex;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 4px max(0px, calc((100% - var(--gevi-card-width)) / 2)) 7px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.gevi-carousel__track::-webkit-scrollbar { display: none; }
.gevi-carousel__track:focus-visible { outline-offset: -3px; }
.gevi-carousel__card { flex: 0 0 var(--gevi-card-width); scroll-snap-align: center; }
.gevi-carousel__card figure { margin: 0; }
.gevi-carousel__media { position: relative; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 14px; background: #101512; box-shadow: 0 4px 14px rgb(28 48 38 / .09); }
.gevi-carousel__media video { display: block; width: 100%; height: 100%; object-fit: contain; background: #101512; }
.gevi-carousel__card figcaption { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; font-weight: 600; }
.gevi-carousel__number { color: var(--gevi-accent); font-size: 10px; font-variant-numeric: tabular-nums; }
.gevi-carousel__duration { margin-left: auto; color: var(--gevi-muted); font-size: 11px; font-weight: 400; font-variant-numeric: tabular-nums; }
.gevi-carousel__error { margin: 8px 0 0; color: #8e372f; font-size: 12px; }

.gevi-carousel__play, .gevi-carousel__arrow, .gevi-carousel__dot {
  display: grid;
  place-items: center;
  appearance: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.gevi-carousel__play { position: absolute; inset: 50% auto auto 50%; width: 58px; height: 58px; transform: translate(-50%, -50%); border: 1px solid rgb(255 255 255 / .65); border-radius: 50%; color: #fff; background: rgb(21 30 25 / .7); }
.gevi-carousel__play span { display: block; width: 0; height: 0; transform: translateX(2px); border: solid transparent; border-width: 8px 0 8px 13px; border-left-color: currentColor; }
.gevi-carousel__play:focus-visible { outline-color: #fff; }
.gevi-carousel__arrow { position: absolute; top: calc((var(--gevi-card-width) * 16 / 9) / 2 + 4px); width: 42px; height: 42px; transform: translateY(-50%); border: 1px solid #e1e8e2; border-radius: 50%; background: #fff; color: var(--gevi-ink); box-shadow: 0 2px 10px rgb(28 48 38 / .1); }
.gevi-carousel__arrow--prev { left: 8px; }
.gevi-carousel__arrow--next { right: 8px; }
.gevi-carousel__arrow::before { content: ""; width: 8px; height: 8px; border: solid currentColor; border-width: 2px 2px 0 0; transform: translateX(-2px) rotate(45deg); }
.gevi-carousel__arrow--prev::before { transform: translateX(2px) rotate(-135deg); }
.gevi-carousel__arrow:disabled { opacity: .35; cursor: default; }
.gevi-carousel__footer { display: grid; justify-items: center; margin-top: 7px; }
.gevi-carousel__dots { display: flex; }
.gevi-carousel__dot { width: 34px; height: 34px; border-radius: 8px; background: transparent; }
.gevi-carousel__dot::before { content: ""; width: 6px; height: 6px; border-radius: 6px; background: #bec8c0; }
.gevi-carousel__dot[aria-current="true"]::before { width: 18px; background: var(--gevi-accent); }
.gevi-carousel__count { margin: 0; color: var(--gevi-muted); font-size: 11px; font-variant-numeric: tabular-nums; letter-spacing: .1em; }
.gevi-carousel__hint { margin: 10px 0 0; color: var(--gevi-muted); font-size: 11px; }