.testimonials {
    &:not(.c_white) {
        .testimonials__item {
            &.active {
                border: 1px solid var(--white) !important;

                .testimonials__author {
                    img {
                        filter: invert(1) brightness(100) !important;
                    }

                    .testimonials__poste {
                        border-bottom: 1px solid rgba(255, 255, 255, 0.33) !important;
                    }
                }
            }
        }

        .pagination {
            button {
                border: 1.5px solid var(--white) !important;

                &:after {
                    filter: brightness(100);
                }
            }
        }
    }

    &[data-color="#080c18"] {
        position: relative;
        background: #080c18;
        overflow: hidden;

        &:before {
            content: '';
            width: 100%;
            height: 200%;
            position: absolute;
            top: -100%;
            background: var(--radial-gradient) no-repeat;
            z-index: 0;
            background-size: contain;
            left: 50%;
            transform: translate(-50%);
        }

        .container {
            position: relative;
            z-index: 1;
        }

        h1,
        h2,
        h3,
        h4,
        p,
        span:not(:has(strong)),
        li {
            color: var(--white);
        }
    }

    .container {
        display: flex;
        position: relative;
        gap: 32px;

        @media (max-width: 991px) {
            flex-direction: column;
            gap: 0px;
        }

        .section__title {
            max-width: 440px;
            text-align: left;
        }

        .testimonials__list {
            display: flex;
            flex-direction: row;
            justify-content: end;
            gap: 16px;
            width: 100%;
            align-items: stretch;

            @media (max-width: 991px) {
                flex-direction: column;
            }

            >a {
                color: unset !important;
            }

            .testimonials__item {
                transition: var(--transition);
                overflow: hidden;
                transform-origin: left center;
                height: 450px;

                &.one {
                    .testimonials__content {
                        height: 100%;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: start;
                        text-align: left;
                    }
                }

                .testimonials__content {
                    .testimonials__quote {
                        font-size: 18px;
                        font-family: var(--strong-font);
                        font-weight: var(--bold);
                        font-style: italic;
                        line-height: 21px;
                        transition: var(--transition);

                        @media (min-width: 1200px) {
                            font-size: 24px;
                            line-height: 27px;
                        }
                    }

                    .testimonials__temoin {
                        display: flex;
                        align-items: start;
                        gap: 15px;
                        margin-top: 25px;

                        .testimonials__portrait {
                            width: 48px;
                            height: 48px;
                            border-radius: 50px;
                            overflow: hidden;
                            visibility: visible;
                            transition: var(--transition);

                            img {
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                                border-radius: 100%;
                                scale: 1.5;
                            }
                        }
                    }

                    .testimonials__author {
                        display: flex;
                        flex-direction: column;
                        margin: 0px;
                        color: var(--dark-blue1);
                        margin-top: 7px;

                        img {
                            max-width: 120px;
                            max-height: 60px;
                            object-fit: cover;
                        }

                        .testimonials__nom {
                            font-weight: var(--bold);
                            font-size: 14px;
                            line-height: 20px;
                            visibility: visible;
                            transition: var(--transition);
                        }

                        .testimonials__poste {
                            font-weight: var(--light);
                            font-size: 14px;
                            line-height: 20px;
                            border-bottom: 1px solid rgba(8, 12, 24, 0.16);
                            padding-bottom: 15px;
                            margin-bottom: 10px;
                            visibility: visible;
                            transition: var(--transition);
                        }
                    }
                }

                &:not(.active) {
                    pointer-events: all;
                    cursor: pointer;
                    background-size: cover;
                    background-position: center;
                    z-index: 1;
                    position: relative;
                    border-radius: 16px;

                    @media (max-width: 991px) {
                        height: 80px;
                    }

                    @media (min-width: 992px) {
                        min-width: 95px;
                        flex: 1;
                        height: auto;
                    }

                    .testimonials__quote,
                    .testimonials__portrait,
                    .testimonials__nom,
                    .testimonials__poste {
                        opacity: 0;
                    }

                    @media (min-width: 992px) {
                        .testimonials__quote {
                            max-height: 0px;
                        }
                    }

                    .testimonials__author {
                        img {
                            z-index: 10;
                            position: absolute;
                            bottom: 0px;
                            filter: invert(1) brightness(100) saturate(0);
                            left: 50%;
                            transform: translate(-50%, -50%);

                            @media (max-width: 991px) {
                                transform: translate(-50%, -20%);
                            }
                        }
                    }
                }

                &.active {
                    background-size: 0px;
                    border: 1px solid var(--blue);
                    border-radius: 16px;
                    padding: 25px 20px 10px 25px;
                    flex: 4;
                    position: relative;

                    @media (min-width: 1200px) {
                        padding: 35px;
                    }

                    .testimonials__quote,
                    .testimonials__portrait,
                    .testimonials__nom,
                    .testimonials__poste {
                        opacity: 1;
                    }

                    .link_testimonial {
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        top: 0;
                        left: 0;
                    }
                }
            }
        }

        .pagination {
            display: flex;
            gap: 20px;
            position: absolute;
            left: 0;
            bottom: 0;

            @media (max-width: 991px) {
                display: none;
            }

            button {
                background: 0;
                border: 1.5px solid var(--red);
                width: 60px;
                height: 60px;
                border-radius: 100%;
                transition: var(--transition);

                &:hover {
                    opacity: 0.5;
                }

                @media (max-width: 991px) {
                    bottom: -80px;
                    top: unset !important;
                    width: 40px;
                    height: 40px;
                }

                &:after {
                    content: '';
                    background-image: url(../../img/red_arrow.svg);
                    width: 24px;
                    height: 15px;
                    background-size: contain;
                    background-repeat: no-repeat;
                    position: relative;
                    display: inline-block;
                }

                &.next {
                    &:after {
                        transform: rotate(180deg);
                        left: -2px;
                    }
                }
            }
        }
    }
}