.feat-wrap{
margin:0;
width:100%;
display: none;
}
.feat-car{
display:flex;
align-items:center;
justify-content:center;
gap:var(--gap);
position:relative;
width:100%;
}
.feat-splide{
flex:1;
min-width:0;
max-width:var(--pw2);
}
.splide__track{
overflow:hidden;
border-radius:var(--br1);
cursor:pointer;
}
.splide__track.is-grabbing{
cursor:grabbing;
}
.splide__list{
display:flex;
}
.splide__slide{
height:auto;
display:flex;
border-radius:var(--br1);
flex:0 0 100%;
}
.feat-card{
display:block;
position:relative;
background-color:var(--bc1);
border-radius:var(--br1);
overflow:hidden;
width:100%;
aspect-ratio:1/1;
pointer-events:none;
}
.feat-img{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
overflow:hidden;
}
.feat-img::after{
content:'';
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:var(--fg1);
pointer-events:none;
z-index:1;
}
.feat-cont{
position:absolute;
bottom:0;
left:0;
right:0;
padding:var(--gap);
display:flex;
flex-direction:column;
gap:12px;
z-index:2;
}
.feat-title{
font-family:'Nunito',sans-serif;
font-size:36px;
font-weight:800;
line-height:1.3;
color:var(--wht);
margin:0;
text-shadow:var(--fs1);
}
.feat-cat{
background-color:var(--ac3);
padding:6px 16px;
border-radius:6px;
font-weight:700;
text-transform:uppercase;
letter-spacing:.5px;
font-size:14px;
color:var(--wht);
align-self:flex-start;
text-shadow:var(--fs2);
}
.splide__pagination,
.splide__arrows{
display:none;
}
.feat-arrow{
width:var(--fpa);
height:var(--fpa);
background-color:var(--far);
border-radius:50px;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
backdrop-filter:blur(4px);
flex-shrink:0;
}
.feat-arrow:hover{
background-color:var(--kb6);
}
.feat-arrow.disabled{
opacity:0.3;
cursor:not-allowed;
}
.feat-arrow svg{
width:34px;
height:34px;
fill:var(--wht);
}
.feat-prog{
display:flex;
gap:10px;
background-color:var(--far);
border-radius:34px;
backdrop-filter:blur(4px);
align-items:center;
justify-content:center;
margin:var(--gap) auto;
padding:18px;
width:fit-content;
max-width:calc(100% - var(--gap)*2);
}
.feat-prog-dot{
width:16px;
height:16px;
background-color:var(--kw2);
border-radius:50%;
transition:200ms;
cursor:pointer;
flex-shrink:0;
}
.feat-prog-dot:hover{
background-color:var(--kw3);
transform:scale(1.1);
}
.feat-prog-dot.active{
background-color:var(--cl1);
width:40px;
border-radius:20px;
}