/* WRAPPER */

.cps-wrapper{
overflow:hidden;
padding:40px 0;
}


/* OUTER WRAPPER */

.cps-slider-wrapper{
overflow:hidden;
width:100%;
position:relative;
cursor:grab;
user-select:none;
}


/* SLIDER */

.cps-slider{
display:flex;
gap:20px;
transition:transform .6s ease;
will-change:transform;
}


/* CARD */

.cps-card{
width:350px;
flex:0 0 auto;
position:relative;
overflow:visible;
/* border-radius:12px; */
transition:filter .3s ease;
filter:grayscale(100%);
}

.cps-card:hover{
filter:none;
}


/* IMAGE */

.cps-image{
position:relative;
overflow:hidden;
/* border-radius:12px; */
}

.cps-card img{
width:100% !important;
height:400px;
object-fit:cover;
display:block;
/* border-radius:12px; */
}


/* NUMBER */

.cps-number{
position:absolute;
top:-25px;
left:10px;
font-size:90px;
font-weight:700;
color:#000;
opacity:.25;
z-index:3;
pointer-events:none;
}


/* OVERLAY */

.cps-overlay{
position:absolute;
bottom:20px;
left:0;
right:0;
padding:14px 18px;
display:flex;
justify-content:space-between;
align-items:center;
color:#fff;
background:#000;
transition:.35s ease;
}

.cps-card:hover .cps-overlay{
background:#eb232a;
bottom:0;
padding:25px 22px;
}


/* DESCRIPTION */

.cps-desc{
opacity:0;
height:0;
transition:.4s;
}

.cps-card:hover .cps-desc{
opacity:1;
height:auto;
}


/* ICON */

.cps-icon{
display:flex;
align-items:center;
justify-content:center;
min-width:40px;
min-height:40px;
font-size:20px;
color:#fff;
flex-shrink:0;
transition:.3s;
line-height:1;
}


/* SVG FIX */

.cps-icon svg{
width:18px;
height:18px;
display:block;
}


/* FONT ICON FIX */

.cps-icon i{
font-size:18px;
}


/* ICON HOVER MOVE */

.cps-card:hover .cps-icon{
transform:translateX(4px);
}

.cps-slider-wrapper {
    padding: 50px 0 0 0;
}

.cps-number {
    opacity: 1;
}

/* NAVIGATION ARROWS */

.cps-nav{
position:absolute;
top:50%;
transform:translateY(-50%);
width:45px;
height:45px;
border:none;
background:#000;
color:#fff;
font-size:20px;
cursor:pointer;
z-index:10;
display:flex;
align-items:center;
justify-content:center;
transition:.3s;
}

.cps-nav:hover{
background:#eb232a;
}

.cps-prev{
left:10px;
}

.cps-next{
right:10px;
}