:where(.c4d-carousel){
position:relative;
width:100%;
--snap-type:var(--carousel-snap-type, x mandatory);
--snap-align:var(--carousel-snap-align, start);
--snap-stop:var(--carousel-snap-stop, normal);
--scroller-ov:var(--carousel-scroller-ov, auto);
--item-ov:var(--carousel-item-ov, hidden);
--i-count:var(--carousel-icount, 3);
--i-gap:var(--carousel-igap, 0px);
--i-fbasis:var(--carousel-fbasis, calc( (100% - ((var(--i-count) - 1) * var(--i-gap))) / var(--i-count)) );
--btn-fs:var(--carousel-btn-fs, 32px);
--btn-w:var(--carousel-btn-w, 1.5em);
--btn-h:var(--carousel-btn-h, 1.5em);
--btn-off-x:var(--carousel-btn-off-x, 50%);
--btn-dis:var(--carousel-btn-dis, none);
--btn-icon-prev:var(--carousel-btn-icon-prev, '<');
--btn-icon-next:var(--carousel-btn-icon-next, '>');
--btn-bg:var(--carousel-btn-bg, white);
--btn-c:var(--carousel-btn-c, inherit);
--ovi-color:white;
--ovi-w:80px;
--ovi-dis:none;
--helper-l-vis:hidden;
--helper-r-vis:hidden;
--f-minh:30px;
--ib-w:var(--carousel-ib-w, 16px);
--ib-h:var(--ib-w);
--ib-c:var(--carousel-ib-c, hsl(0 0% 70%));
--ib-c-act:var(--carousel-ib-c-act, var(--cl0));
--ib-bg:var(--carousel-ib-bg, transparent);
--ib-bradius:var(--carousel-bradius, 100px);
--ib-bstyle:var(--carousel-bstyle, solid);
--ib-bsize:var(--carousel-bsize, 1px);
--ib-gap:var(--carousel-ib-gap, 8px);
--ib-top:var(--carousel-ib-top, 20px);
--spad-t:var(--carousel-spad-t, auto);
--spad-r:var(--carousel-spad-r, auto);
--spad-b:var(--carousel-spad-b, auto);
--spad-l:var(--carousel-spad-l, auto);
}
.c4d-carousel-body{
position:relative;
z-index:100;
width:100%;
display:flex;
align-items:center;
}
.c4d-carousel-scroller{
-ms-overflow-style:none;
overflow:var(--scroller-ov);
scroll-behavior:smooth;
-ms-scroll-snap-type:var(--snap-type);
scroll-snap-type:var(--snap-type);
scroll-snap-stop:var(--snap-stop);
scrollbar-color:transparent transparent;
scrollbar-width:none;
width:100%;
scroll-padding:var(--spad-t) var(--spad-r) var(--spad-b) var(--spad-l);
position:relative;
z-index:10;
}
.c4d-carousel-wrapper{
display:flex;
align-items:stretch;
gap:var(--i-gap);
position:relative;
}
:where(.c4d-carousel-item){
-webkit-box-flex:0;
flex:0 0 calc(40% - 9.6px);
overflow:var(--item-ov);
scroll-snap-align:var(--snap-align);
text-decoration:none;
color:inherit;
word-wrap:break-word;
position:relative;
flex-basis:var(--i-fbasis);
}
.c4d-carousel-wrapper, .c4d-carousel-wrapper *{
user-select:none;
-moz-user-select:none;
-webkit-user-drag:none;
-webkit-user-select:none;
-ms-user-select:none;
}
.c4d-carousel-ov .c4d-carousel-wrapper{
cursor:grab;
}
.c4d-carousel-ov.c4d-carousel-drag .c4d-carousel-wrapper{
cursor:grabbing;
}
.c4d-carousel-footer{
position:relative;
z-index:200;
pointer-events:none;
width:100%;
min-height:var(--f-minh);
display:var(--carousel-footer-dis, flex);
justify-content:center;
align-items:start;
}
.c4d-carousel-ibc{
position:relative;
padding-top:var(--ib-top);
display:flex;
flex-wrap:wrap;
justify-content:center;
align-items:center;
gap:var(--ib-gap);
}
.c4d-carousel-ibtn{
width:var(--ib-w);
height:var(--ib-h);
background:var(--ib-bg);
border-width:var(--ib-bsize);
border-style:var(--ib-bstyle);
border-color:var(--ib-c);
border-radius:var(--ib-bradius);
pointer-events:all;
cursor:pointer;
}
.c4d-carousel-ibtn.act{
background:var(--ib-c-act);
border-color:var(--ib-c-act);
}
.c4d-carousel-scroller::-webkit-scrollbar{
display:none;
}
.c4d-carousel-scroller{
scrollbar-width:none;
}
:where(.c4d-carousel-btn-pos){
position:absolute;
z-index:30;
display:var(--btn-dis);
transform:translateX(calc(var(--btn-off-x) * -1));
}
:where(.c4d-carousel-btn-pos-next){
right:0;
transform:translateX(var(--btn-off-x));
}
:where(.c4d-carousel-btn){
font-family:inherit;
font-size:inherit;
line-height:normal;
font-style:normal;
text-decoration:none;
margin:0;
padding:0;
color:inherit;
background:transparent;
border:none;
max-width:none;
min-width:0;
font-size:var(--btn-fs, inherit);
width:var(--btn-w);
height:var(--btn-h);
display:flex;
justify-content:center;
align-items:center;
color:var(--btn-c);
background:var(--btn-bg);
border-radius:10em;
box-shadow:1px 1px 4px hsl(0 0% 0% / 0.25);
cursor:pointer;
}
:where(.c4d-carousel-btn-prev){
visibility:var(--helper-l-vis);
}
:where(.c4d-carousel-btn-next){
visibility:var(--helper-r-vis);
}
.c4d-carousel-btn:before{
content:var(--btn-icon-next);
display:block;
position:absolute;
line-height:1em;
}
.c4d-carousel-btn-prev:before{
content:var(--btn-icon-prev);
}
.c4d-carousel-ovi{
position:absolute;
z-index:20;
top:0;
left:-1px;
width:var(--ovi-w);
height:100%;
background:linear-gradient(90deg, var(--ovi-color) 10%, transparent 100%);
pointer-events:none;
}
.c4d-carousel-ovi-l{
display:var(--ovi-dis);
visibility:var(--helper-l-vis);
}
.c4d-carousel-ovi-r{
display:var(--ovi-dis);
visibility:var(--helper-r-vis);
left:auto;
right:-1px;
background:linear-gradient(270deg, var(--ovi-color) 10%, transparent 100%);
}
.c4d-carousel-ov-l{
--helper-l-vis:visible;
}
.c4d-carousel-ov-r{
--helper-r-vis:visible;
}