#cards {}

/*----------------------------------------------------------------------------------------------------*/

#cards > .swiper { filter: drop-shadow(0 0 1.5px rgba(0,0,0,.2)); }
@media (min-width: 900px) {
    #cards > .swiper {
        padding-left:  max(25px, ((100vw - 1200px) / 2));
        padding-right: max(25px, ((100vw - 1200px) / 2));
    }
}
@media (max-width: 899.99px) {
    #cards > .swiper {
        padding-left: 25px;
        padding-right: 25px;
    }
}

/*----------------------------------------------------------------------------------------------------*/

#cards > .swiper > .swiper-wrapper > .card {
    position: relative;
    display: flex; min-height: 250px; width: calc((1200px - 75px) / 4); overflow: hidden;
    flex-direction: column;
    justify-content: center;
    padding: 50px 30px;
    
    border-radius: 40px;
    
    text-align: left;
    font-size: 14px;
    
    isolation: isolate;
}
#cards > .swiper > .swiper-wrapper > .card.even { height: 350px; }
#cards > .swiper > .swiper-wrapper > .card.first { background-color: var(--main-color); }
#cards > .swiper > .swiper-wrapper > .card.secnd { background-color: #FFF; }
#cards > .swiper > .swiper-wrapper > .card.third { background-color: #1E1E1E; color: #FFF; }

/*----------------------------------------------------------------------------------------------------*/

#cards > .swiper > .swiper-wrapper > .card > .background {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    
    isolation: isolate;
}
#cards > .swiper > .swiper-wrapper > .card > .background > img,
#cards > .swiper > .swiper-wrapper > .card > .background > video {
    display: block; height: 100%; width: 100%;
    object-fit: cover;
    object-position: center;
    
    pointer-events: none;
}
#cards > .swiper > .swiper-wrapper > .card > .background ~ div { position: relative; z-index: 1; }

/*----------------------------------------------------------------------------------------*/

#cards > .swiper > .swiper-wrapper > .card > .content {}
#cards > .swiper > .swiper-wrapper > .card > .content > .value {
    margin-bottom: 20px;
    
    font-size: 35px;
    font-weight: 700;
}
#cards > .swiper > .swiper-wrapper > .card > .content > .description {
    line-height: 130%;
    font-size: 16px;
}

/*----------------------------------------------------------------------------------------*/

#cards > .swiper > .swiper-wrapper > .card > .quote {
    line-height: 130%;
    font-size: 24px;
    font-weight: 300;
}
#cards > .swiper > .swiper-wrapper > .card > .quote:before {
    content: '“';
    display: inline-block; height: 25px; overflow: hidden;
    margin-right: 10px;
    
    line-height: 50px;
    font-size: 45px;
    font-weight: 700;
    color: var(--main-color);
}
#cards > .swiper > .swiper-wrapper > .card.secnd > .quote:before { background-color: #000; }
#cards > .swiper > .swiper-wrapper > .card > .quote > span { font-weight: 700; }