/*
    Block: Testimonials
    Note: Selectors must start with .block-testimonials
*/

@layer blocks {
    .block-testimonials {
        width: 100vw;
        margin-left: calc(50% - 50vw);
        overflow: hidden;
    }

    .block-testimonials .text-content {
        max-width: 38.375rem;
        margin-inline: auto;
        margin-bottom: 2.5rem;
    }

    .block-testimonials .swiper-navigation {
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        margin-bottom: 3.75rem;
    }

    .block-testimonials .swiper {
        width: 100%;
        overflow: visible;
    }

    .block-testimonials .swiper-wrapper {
        position: relative;
        left: -20%;
    }

    .block-testimonials .swiper-slide {
        padding-inline: .625rem;
        height: auto;
    }

    .block-testimonials .testimonial-card {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        gap: 3.75rem;
        background-color: rgb(from var(--c-blue) r g b / .05);
        border: 1px solid rgb(from var(--c-blue) r g b / .15);
        padding: 2.5rem;
        height: 100%;
    }

    .block-testimonials .testimonial-card .quote {
        margin: 0;
        font-size: var(--fs-14-22);
        font-weight: 500;
        line-height: 1.3;
        letter-spacing: -.06em;
        color: var(--c-blue);
    }

    .block-testimonials .testimonial-card .person {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        gap: 1rem;
    }

    .block-testimonials .testimonial-card .person__name {
        margin: 0;
    }

    .block-testimonials .testimonial-card .person__role {
        margin: 0;
        line-height: 1.3;
        max-width: 19.3125rem;
        font-size: var(--fs-12-16);
    }

    @media screen and (width <= 1200px) {
        .block-testimonials .text-content {
            max-width: 33rem;
        }
    }

    @media screen and (width <= 920px) {
        .block-testimonials .text-content {
            max-width: 27rem;
        }

        .block-testimonials .swiper-wrapper {
            left: -55%;
        }

        .block-testimonials .swiper-slide {
            padding-inline: .5rem;
        }

        .block-testimonials .testimonial-card {
            gap: 2.5rem;
            padding: 1.5rem;
        }
    }

    @media screen and (width <= 620px) {
        .block-testimonials .text-content {
            max-width: 23rem;
        }
    }
}