/* 
    Table of content
    0. NAV
    1. TILES
    2. NEWS
    3. TESTIMONIALS
    4. LOGOS
*/

/* 0. NAV */
.slider-tiles .nav-wrapper,
.slider-news .nav-wrapper {    
    display: flex;
    justify-content: center;
    gap: var(--grid-padding);  
}

.slider-tiles .nav-wrapper div,
.slider-news .nav-wrapper div {
    margin: 3rem 0 2rem;
    cursor: pointer;
}

/* 1. TILES */
.slider-tiles .item {
    display: block;
    position: relative;
    border-radius: var(--border-radius);
    background-color: var(--color-lightgrey);
    color: inherit;
    text-decoration: none;
}

.slider-tiles .item::before {
    content: '\f061';
    position: absolute;
    top: .7rem;
    right: .7rem;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Font Awesome 6 Pro";
    font-size: 1.8rem;
    line-height: 1;
    color: var(--color-darkblue);
    transform: rotate(-45deg);
    transition: .3s;
}

.slider-tiles .item:hover::before {
    transform: rotate(0)
}

.slider-tiles .content-wrapper {
    padding: var(--box-padding);
}

.slider-tiles .faux-h3 {
    padding-right: 4rem;
    font-size: 2.2rem;
    hyphens: auto;
}

.slider-tiles .text {
    font-size: 1.5rem;
    color: var(--color-grey);
}

.slider-tiles .image-wrapper {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 70%;
    border-radius: var(--border-radius);
    overflow: hidden;
}

.slider-tiles .image-wrapper img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: .3s;
}

.slider-tiles .item:hover .image-wrapper img {
    transform: scale(1.03);
}

/* 2. NEWS */

/* 3. TESTIMONIALS */
.slider-testimonials .container {
    position: relative;
}

.slider-testimonials .item {
    display: flex;
    gap: var(--grid-padding);
}

.slider-testimonials .image-wrapper {
    flex: 0 0 22.6rem;
    position: relative;
    border-radius: var(--border-radius);
    background-color: var(--color-lightgrey);
    overflow: hidden;
}

.slider-testimonials .image-wrapper img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.slider-testimonials .content-wrapper {
    flex: 1 1 auto;
    min-height: 25rem;
    padding: var(--box-padding) calc(var(--box-padding) * 2);
    border-radius: var(--border-radius);
    background-color: var(--color-lightblue);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
    font-size: 2.1rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--color-grey);
}

.slider-testimonials .info-wrapper {
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--color-blue);
}

.slider-testimonials .swiper-custom-button-prev,
.slider-testimonials .swiper-custom-button-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-blue);
    font-size: 2.2rem;
    line-height: 1;
    cursor: pointer;
}

.slider-testimonials .swiper-custom-button-prev {
    left: var(--grid-padding-inner);
}

.slider-testimonials .swiper-custom-button-next {
    right: var(--grid-padding-inner);
}

/* 4. LOGOS */
.slider-logos .image-wrapper {    
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.slider-logos .image-wrapper img {
    width: 14rem;
    height: 14rem;
    object-fit: contain;
    object-position: center;
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    transition: .3s;  
}

.slider-logos .image-wrapper img:hover {
    filter: grayscale(0%);
    -webkit-filter: grayscale(0%);    
}

/* RESIZE */
@media (max-width: 1444px) {
    /* 3. TESTIMONIALS */
    .slider-testimonials .nav-wrapper {
        display: flex;
        justify-content: center;
        gap: var(--grid-padding);
    }

    .slider-testimonials .swiper-custom-button-prev,
    .slider-testimonials .swiper-custom-button-next {
        position: relative;
        top: inherit;
        transform: inherit;
        right: inherit;
        left: inherit;        
        margin: 3rem 0 2rem;
    }
}

@media (max-width: 1244px) {
    /* 4. LOGOS */
    .slider-logos {
        overflow: hidden;
    }

    .slider-logos .swiper {
        overflow: visible;
    }
}

@media (max-width: 1024px) {
    /* 0. NAV */
    .slider-tiles .nav-wrapper,
    .slider-news .nav-wrapper {    
        display: none;  
    }

    /* 1. TILES */
    .slider-tiles {
        overflow: hidden;
    }

    .slider-tiles .swiper {
        overflow: visible;
    }

    /* 2. NEWS */
    .slider-news {
        overflow: hidden;
    }

    .slider-news .swiper {
        overflow: visible;
    }
}

@media (max-width: 899px) {
    /* 3. TESTIMONIALS */
    .slider-testimonials .content-wrapper {
        min-height: 22rem;
        padding: var(--box-padding);
        font-size: 1.8rem;
    }
}

@media (max-width: 767px) {
    /* 3. TESTIMONIALS */
    .slider-testimonials .image-wrapper {
        display: none;
    }

    .slider-testimonials .content-wrapper {
        min-height: inherit;
    }
}

@media (max-width: 599px) {
    /* 0. NAV */
    .slider-tiles .nav-wrapper div,
    .slider-news .nav-wrapper div {    
        margin: 2rem 0 1rem;    
    }

    /* 3. TESTIMONIALS */
    .slider-testimonials .swiper-custom-button-prev,
    .slider-testimonials .swiper-custom-button-next {     
        margin: 2rem 0 1rem;
    }
}