/* @group Slider cards with background
------------------------------------ */

.slider-cards-with-background { padding-bottom: 10em; position: relative; }
.slider-cards-with-background.gradient-bg { background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 33rem, rgba(237, 248, 251, 1) calc(100% - 33rem)); }

.slider-cards-with-background .img-box .open-lightbox { color: rgba(254,254,254,1); font-size: 2.3em; position: absolute; top: 1.5rem; right: 1.5rem; filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, .4)); }

/* Header
------------------------------------ */
.slider-cards-with-background header { color: var(--navy-blue); margin-bottom: 5em; }
.slider-cards-with-background header h2 { font: unset; width: fit-content; margin: 0 auto; }
.slider-cards-with-background header h2 sup { text-transform: uppercase; font-weight: 700; font-size: 3em; line-height: 1em; letter-spacing: .06em; display: block; }
.slider-cards-with-background header h2 span { font-family: var(--celine-font); font-size: 6em; line-height: .5em; letter-spacing: .033em; display: block; text-align: right; padding-left: .8em; }

/* Splide
------------------------------------ */
.slider-cards-with-background .splide .splide__slide { background-color: var(--navy-blue); color: var(--white); position: relative; }
.slider-cards-with-background .splide .splide__slide .background { position: absolute; top: 0; left: 0; pointer-events: none; width: 100%; height: 15em; }
.slider-cards-with-background .splide .splide__slide .image { height: 25em; margin: 0 3em; box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.04); }
.slider-cards-with-background .splide .splide__slide .image::after { content: ''; pointer-events: none; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 64.58%, rgba(0, 0, 0, 0.45) 100%); }
.slider-cards-with-background .splide .splide__slide .txt-box { padding: 0 3em .5em; position: relative; top: -2.5em; }
.slider-cards-with-background .splide .splide__slide .txt-box h3 { font: unset; margin-bottom: 2.5em; }
.slider-cards-with-background .splide .splide__slide .txt-box h3 sup { text-transform: uppercase; text-align: center; display: block; font-size: 3em; font-weight: 700; line-height: 1em; letter-spacing: .066em; }
.slider-cards-with-background .splide .splide__slide .txt-box h3 span { font-family: var(--celine-font); text-align: right; display: block; font-size: 6em; line-height: .5em; letter-spacing: .033em; }
.slider-cards-with-background .splide .splide__slide .txt-box p { font-size: 1.6em; line-height: 1.5em; letter-spacing: .125em; margin: 0 0 1.875em; }
.slider-cards-with-background .splide .splide__slide .txt-box a { color: var(--yellow); text-decoration: underline; }
.slider-cards-with-background .splide .splide__slide .txt-box .bttn-outlined { color: var(--white); background-color: transparent; min-width: 13.375em; text-align: center; text-decoration: none; }
.slider-cards-with-background .splide .splide__slide .txt-box .bttn-outlined i { background-color: transparent; }

.slider-cards-with-background .splide__arrows { margin-top: 3.6em; }
.slider-cards-with-background .splide__arrows .splide__arrow { position: static; }
.slider-cards-with-background .splide__arrows .splide__arrow--prev { margin-right: 2em; }
.slider-cards-with-background .splide__pagination { bottom: .9em; justify-content: flex-end; }

@media only screen
and (min-width : 961px) {

    .slider-cards-with-background { padding-bottom: 15rem; }

    /* Header
    ----------------------------- */
    .slider-cards-with-background header { margin-bottom: 7.3rem; }
    .slider-cards-with-background header h2 sup { font-size: 8em; letter-spacing: .025em; }
    .slider-cards-with-background header h2 span { font-size: 10.5em; letter-spacing: .019em; }
    /* Splide
    ----------------------------- */
    .slider-cards-with-background .splide .splide__slide { transition: all .3s ease; }
    .slider-cards-with-background .splide .splide__slide.hover-state:hover { background-color: var(--red); }
    .slider-cards-with-background .splide .splide__slide.hover-state:hover a { color: var(--white); }
    .slider-cards-with-background .splide .splide__slide .background { height: 31.5rem; }
    .slider-cards-with-background .splide .splide__slide .image { height: 43rem; }
    .slider-cards-with-background .splide .splide__slide .txt-box { top: -4.5rem; padding: 0 3rem 0; }
    .slider-cards-with-background .splide .splide__slide .txt-box h3 { margin-bottom: 4.5rem; }
    .slider-cards-with-background .splide .splide__slide .txt-box h3 sup { font-size: 5.51em; letter-spacing: .036em; }
    .slider-cards-with-background .splide .splide__slide .txt-box h3 span { font-size: 10em; letter-spacing: .0166em; padding: 0 4rem; margin-top: -0.5rem; }
    .slider-cards-with-background .splide .splide__slide .txt-box p { font-size: 2em; line-height: 1.35em; letter-spacing: .1em; }

    
    .slider-cards-with-background .splide__arrows .splide__arrow--prev { margin-right: 3rem; }
    .slider-cards-with-background .splide__pagination { bottom: 1.3rem; }
    .slider-cards-with-background .splide__arrows .bttn-outlined { margin-left: 3rem; }

    .slider-cards-with-background .img-box .open-lightbox:hover { -webkit-transform: scale(1.1); transform: scale(1.1); }

    
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {

}
@media only screen
and (max-width : 960px) {
    /* Splide
    ----------------------------- */
    .slider-cards-with-background .splide { padding: 0 0 0 3em; }
    .slider-cards-with-background .splide .splide__track { padding-right: 10em!important; }

    .slider-cards-with-background .img-box .open-lightbox { display: none; }
    
    .slider-cards-with-background .splide__arrows .bttn-outlined { position: absolute; left: 5rem; bottom: -13rem; }
}
/* @end  */


.slider-cards-with-background.has-texture .texture { position: absolute; left: 50%; top: 2.4em; transform: translate(-50%, 0); pointer-events: none; z-index: -1; }
.slider-cards-with-background.has-texture .texture .img-box { height: 69.7em; padding: 0 5.5em; background: unset; }
@media only screen
and (min-width : 961px) {
    .slider-cards-with-background.has-texture .texture { top: 5rem; }
    .slider-cards-with-background.has-texture .texture .img-box { height: 100.5rem; padding: 0; }
}
@media only screen
and (max-width : 960px) {
    .slider-cards-with-background.has-texture .texture .img-box { opacity: .7; }
}