.rb-slider {
position: relative;
overflow: hidden;
width: 100%;
max-width: none;
container-type: inline-size;
aspect-ratio: var(--rb-gw) / var(--rb-gh);
max-height: calc(var(--rb-gh) * 1px);
min-height: 0;
margin-top: 0;
margin-bottom: 0;
--rb-u: min(1px, 100cqw / var(--rb-gw));
}
.rb-slider > .wp-block-html,
.rb-slider > style,
.rb-slider > script { display: none; }
.rb-slider > .rb-slide,
.rb-slider > .rb-static {
position: absolute;
inset: 0;
margin: 0 !important;
max-width: none !important;
}
.rb-slider > .rb-slide {
opacity: 0;
visibility: hidden;
transition: opacity var(--rb-fade, 1s) ease, visibility 0s linear var(--rb-fade, 1s);
}
.rb-slider > .rb-slide.is-on {
opacity: 1;
visibility: visible;
z-index: 1;
transition: opacity var(--rb-fade, 1s) ease;
}
.rb-slider > .rb-static { z-index: 2; pointer-events: none; }
.rb-slider > .rb-static .rb-l { pointer-events: auto; }
.rb-slider .rb-l {
position: absolute;
margin: 0 !important;
box-sizing: border-box;
max-width: none;
}
.rb-slider.rb-slider.rb-slider figure.rb-l img { display: block;
width: 100%;
height: 100%;
max-width: none;
border-radius: inherit;
}
.rb-slider .rb-pop { display: none; }
.rb-slider .rb-pop.is-shown { display: block; }
@keyframes rb-in {
from {
opacity: var(--rb-o0, 1);
transform: translate(calc(var(--rb-x0, 0) * var(--rb-u)), calc(var(--rb-y0, 0) * var(--rb-u))) scale(var(--rb-s0, 1));
}
}
.rb-slider > .rb-slide.is-on .rb-l,
.rb-slider.is-ready > .rb-static .rb-l {
animation: rb-in var(--rb-d, 0ms) var(--rb-e, ease) var(--rb-t, 0ms) both;
}
.rb-slider .rb-dots,
.rb-slider .rb-thumbs {
position: absolute;
z-index: 3;
display: flex;
gap: 5px;
margin: 0;
padding: 0;
}
.rb-slider .rb-dots button {
width: 16px;
height: 16px;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
box-shadow: inset 0 0 0 2px #fff;
cursor: pointer;
transition: background-color .3s;
}
.rb-slider .rb-thumbs button {
width: var(--rb-tw, 70px);
height: var(--rb-th, 70px);
padding: 0;
border: 0;
background: rgba(0, 0, 0, .25) center / cover no-repeat;
cursor: pointer;
opacity: .7;
transition: opacity .3s;
}
.rb-slider .rb-thumbs button.is-on,
.rb-slider .rb-thumbs button:hover { opacity: 1; }
.rb-slider button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
.rb-slider .rb-l { animation: none !important; }
.rb-slider > .rb-slide { transition: none; }
} .rb-slider.alignfull {
width: var(--rb-vw, 100vw);
max-width: var(--rb-vw, 100vw) !important;
margin-left: calc(50% - var(--rb-vw, 100vw) / 2) !important;
margin-right: calc(50% - var(--rb-vw, 100vw) / 2) !important;
}
body:has(.rb-slider.alignfull) { overflow-x: clip; } main:has(> .wp-block-post-content:first-child > .rb-slider:first-child),
main:has(> .wp-block-group:first-child > .wp-block-post-content:first-child > .rb-slider:first-child) { padding-top: 0 !important; }