.rrt-media-flex{margin:4rem 0}
.rrt-media{margin-bottom:1.5rem}

.rrt-media--slider,
.rrt-media--vimeo,
.rrt-media--local-video{
  display:flex;
  justify-content:center;
}

.rrt-media__canvas{
  width:100%;
  max-width:1920px;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:var(--radius-lg);
  background:#000;
}

/* Slider */
.rrt-slider{
  position:relative;
  width:100%;
  height:100%;
}

.rrt-slider__viewport{
  width:100%;
  height:100%;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.rrt-slider__viewport::-webkit-scrollbar{display:none}

.rrt-slider__track{
  display:flex;
  height:100%;
}

.rrt-slide{
  flex:0 0 100%;
  width:100%;
  height:100%;
  margin:0;
  scroll-snap-align:start;
}

.rrt-slide__img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.rrt-slider__btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:2;

  width:38px;
  height:38px;
  padding:0;

  display:grid;
  place-items:center;
  line-height:0;

  border-radius:999px;
  cursor:pointer;

  border:1px solid color-mix(in srgb,var(--rrt-text,#0F2F48) 18%,transparent);
  background:color-mix(in srgb,var(--rrt-bg) 92%,transparent);
  color:var(--rrt-text,#0F2F48);
}

.rrt-slider__icon{
  width:18px;
  height:18px;
  display:block;
}

.rrt-slider__btn--prev{left:10px}
.rrt-slider__btn--next{right:10px}

.rrt-slider__dots{
  position:absolute;
  bottom:14px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:8px;
  z-index:2;
}

.rrt-slider__dot{
  width:14px;
  height:14px;
  border-radius:999px;
  border:1px solid var(--rrt-border);
  background:color-mix(in srgb,var(--rrt-text) 25%,transparent);
  cursor:pointer;
  transition:transform .15s ease,background .15s ease;
}
.rrt-slider__dot:hover{transform:scale(1.25)}
.rrt-slider__dot[aria-current="true"]{
  background:var(--rrt-accent);
  border-color:var(--rrt-accent);
}

/* Vimeo */
.rrt-vimeo-cover{
  position:relative;
  width:100%;
  border:0;
  padding:0;
  background:none;
  cursor:pointer;
}

.rrt-vimeo-cover__img{
  width:100%;
  height:auto;
  display:block;
  border-radius:var(--radius-lg);
}

.rrt-media__play{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  pointer-events:none;
}

.rrt-media__play-icon{
  width:68px;
  height:68px;
  padding:9px;
  box-sizing:border-box;
  border-radius:999px;

  background:color-mix(in srgb,var(--rrt-bg) 92%,transparent);
  border:1px solid var(--rrt-border);
  fill:var(--rrt-text);

  transition:transform .15s ease,background .15s ease;
}

.rrt-vimeo-cover:hover .rrt-media__play-icon,
.rrt-video:hover .rrt-media__play-icon{
  transform:scale(1.2);
  background:var(--rrt-accent);
  fill:var(--rrt-text-inv);
}

.rrt-vimeo-frame iframe{
  width:100%;
  aspect-ratio:16/9;
  border:0;
  border-radius:var(--radius-lg);
}

/* Local video */
.rrt-video{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  border-radius:var(--radius-lg);
}