:root {
  --rvc-bg: transparent;
  --rvc-fg: #f6f6f7;
  --rvc-muted: rgba(246, 246, 247, 0.72);
  --rvc-accent: #8ef3ff;
}

.rvc {
  position: relative;
  background: var(--rvc-bg);
  border-radius: 18px;
  overflow: hidden;
  padding: 14px 44px 14px;
  --rvc-height: clamp(360px, 70vh, 820px);
  width: 100%;
  box-sizing: border-box;
  container-type: inline-size;
}

.rvc__viewport {
  height: var(--rvc-height);
  overflow: hidden;
  outline: none;
}

.rvc__track {
  display: flex;
  gap: 12px;
  height: 100%;
  align-items: center;
  padding: 6px 6px 22px;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  transition: transform 260ms ease;
}

.rvc__slide {
  flex: 0 0 88%;
  height: 100%;
  display: flex;
  align-items: stretch;
  justify-content: center;
  border-radius: 14px;
  overflow: hidden;
  background: transparent;
  outline: none;
  position: relative;
}

.rvc__slide.is-landscape {
  flex-basis: 92%;
}

.rvc__slide.is-portrait {
  flex-basis: 74%;
}

.rvc__video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
}

.rvc__slide.is-portrait .rvc__video {
  object-fit: cover;
}

.rvc__embed {
  width: 100%;
  height: 100%;
  background: transparent;
  position: relative;
}

.rvc__slide.is-portrait .rvc__embed {
  height: 100%;
  aspect-ratio: 9 / 16;
  width: min(100%, calc(var(--rvc-height) * (9 / 16)));
  margin: 0 auto;
}

.rvc__embed iframe,
.rvc__embed video {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
}

.rvc__title {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 14px;
  line-height: 1.2;
  backdrop-filter: blur(8px);
}

.rvc__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgb(0 0 0);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
  z-index: 3;
}

.rvc__nav:hover {
  background: rgb(0 0 0);
  border-color: rgba(142, 243, 255, 0.5);
}

.rvc__nav:active {
  transform: translateY(-50%) scale(0.98);
}

.rvc__nav--prev {
  left: 10px;
}
.rvc__nav--next {
  right: 10px;
}

.rvc__nav span {
  font-size: 22px;
  line-height: 1;
}

.rvc__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  z-index: 3;
}

.rvc__dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgb(0 0 0);
  border: 1px solid rgb(246 246 247);
  cursor: pointer;
}

.rvc__dot[aria-current="true"] {
  background: #a97206;
  border-color: rgb(177 122 14);
}

@media (min-width: 820px) {
  .rvc {
    padding: 18px 58px 16px;
  }
  .rvc__slide {
    flex-basis: 44%;
  }
  .rvc__slide.is-portrait {
    flex-basis: 28%;
  }
  .rvc__slide.is-landscape {
    flex-basis: 52%;
  }
}

@media (min-width: 1200px) {
  .rvc__slide {
    flex-basis: 32%;
  }
  .rvc__slide.is-portrait {
    flex-basis: 28%;
  }
  .rvc__slide.is-landscape {
    flex-basis: 40%;
  }
}

/* Container-based responsive rules (fixes 2-column squeeze) */
@container (max-width: 640px) {
  .rvc {
    padding: 12px 36px 12px;
  }
  .rvc__track {
    gap: 10px;
  }
  .rvc__slide {
    flex-basis: 92%;
  }
  .rvc__slide.is-portrait {
    flex-basis: 86%;
  }
}

@container (max-width: 520px) {
  .rvc {
    padding: 10px 34px 12px;
    --rvc-height: clamp(320px, 62vh, 720px);
  }
  .rvc__track {
    gap: 10px;
    padding-left: 0;
    padding-right: 0;
  }
  .rvc__slide,
  .rvc__slide.is-portrait,
  .rvc__slide.is-landscape {
    flex-basis: 100%;
  }
}