.slider-articles {
    margin: 10rem 0 5rem;

    @media (min-width: $tabletP1) {
        margin: 15rem 0;
    }

    // @media (min-width: $K2Large) {
    //     background-color: $secondary;
    // }


    // .slider-articles--with-bg 

    // .slider-articles__wrapper

    &__wrapper {
        position: relative;
        max-width: 192rem;
        margin: 0 auto;
        border-radius: 2rem;
        overflow: hidden;
        background-color: $secondary;
        padding: 4.5rem 0;
        @media (min-width: $tabletSmallP1) {
            padding: 9.5rem 0;
        }


        > img {
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-position: right;
            pointer-events: none;
            object-fit: cover;
            object-position: right;
        }

    }

    // .slider-articles__container

    &__container {
        
    }

    // .slider-articles__content

    &__content {
        display: flex;
        flex-direction: column;
        align-items: center;

        h2 {
            @extend .h3;
            line-height: 1.2;
            letter-spacing: -.2px;

            @media (min-width: $tabletSmallP1) {
                letter-spacing: -.7px;
            }
        }

        p {
            &:not(:first-child) {
                margin-top: 1rem;
                @media (min-width: $tabletSmallP1) {
                    margin-top: 2rem;
                }
            }
        }
    }

    // .slider-articles__slider

    &__slider {
        width: 100%;

        &:not(:first-child) {
            margin-top: 4.5rem;
            @media (min-width: $tabletSmallP1) {
                margin-top: 5rem;
            }
        }

        &:not(.slick-slider) {
            display: flex;
            align-items: center;
            gap: 1.4rem;

            .slider-articles__slide {
                width: calc(100% / 2 - 1.4rem /2);
            }
        }

        &.slick-slider {
            .slick-list {
                margin-right: -1.4rem;
                cursor: grab;
            }

            .slick-slide {
                margin-right: 1.4rem;
            }

            .slick-dots {
                display: flex;
                align-items: center;
                gap: .8rem;

                list-style: none;
                padding: 1rem 0;
                margin: 2rem 0 0 0;

                @media (min-width: $tabletSmallP1) {
                    padding: 1.1rem 0;
                }

                li {
                    padding: 0;
                    margin: 0;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    button {
                        font-size: 0;
                        color: transparent;
                        width: .6rem;
                        height: .6rem;
                        border-radius: 50%;
                        background-color: rgba($primary, 0.2);
                        position: relative;
                        transition: .2s all;
                        &::before {
                            content: '';
                            width: 1.2rem;
                            height: 4.4rem;
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                        }
                    }

                    &.slick-active {
                        button {
                            background-color: $primary;
                        }
                    }
                }
            }

            .slick-arrow {
                font-size: 0;
                color: transparent;
                width: 2.4rem;
                height: 2.4rem;
                background-size: 100%;
                background-position: center;
                background-repeat: no-repeat;
                position: absolute;
                bottom: 0;
                right: 0;
                background-image: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 27.5C6.54416 27.5 0.500001 21.4558 0.500001 14C0.500002 6.54416 6.54416 0.500001 14 0.500001C21.4558 0.500002 27.5 6.54416 27.5 14C27.5 21.4558 21.4558 27.5 14 27.5Z' stroke='%2339462F'/%3E%3Cpath d='M10.2712 15.143L14.3251 19.1967C14.4504 19.3222 14.5137 19.4696 14.515 19.6388C14.5165 19.8081 14.4547 19.9559 14.3295 20.0824C14.2043 20.2093 14.0565 20.272 13.8861 20.2705C13.7158 20.269 13.5675 20.2057 13.4413 20.0806L8.32021 14.9595C8.25316 14.8917 8.20441 14.8212 8.17395 14.748C8.14337 14.6747 8.12808 14.597 8.12808 14.5148C8.12808 14.4327 8.14337 14.3551 8.17395 14.2822C8.20441 14.2091 8.25316 14.1388 8.32021 14.0712L13.4457 8.94577C13.5753 8.82063 13.7237 8.75806 13.8909 8.75806C14.0581 8.75806 14.2043 8.82063 14.3295 8.94577C14.4547 9.07398 14.5172 9.2219 14.5172 9.38954C14.5172 9.55729 14.4547 9.70398 14.3295 9.82962L10.2712 13.8878L19.2627 13.8878C19.4426 13.8878 19.5929 13.9473 19.7136 14.0665C19.8344 14.1856 19.8947 14.3352 19.8947 14.5154C19.8947 14.6955 19.8344 14.8452 19.7136 14.9643C19.5929 15.0834 19.4426 15.143 19.2627 15.143L10.2712 15.143Z' fill='%2339462F'/%3E%3C/svg%3E%0A");
                transition: .2s all;

                @media (min-width: $tabletSmallP1) {
                    width: 2.8rem;
                    height: 2.8rem;
                }

                &::before {
                    content: '';
                    width: 100%;
                    height: 4.4rem;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }

                &:hover {
                    filter: brightness(0) invert(1);
                }


                &.slick-prev {
                    right: 3.3rem;
                }
                &.slick-next {
                    transform: rotate(180deg);
                }
            }

        }
    }

    // .slider-articles__slide

    &__slide {
        border: 1.5px solid $primary;
        border-radius: 2rem;
        padding: 3rem;
        text-align: center;

        @media (min-width: $tabletSmallP1) {
            text-align: left;
        }

        blockquote {
            @extend .p1;
        }

        
    }

    // .slider-articles__slide-info

    &__slide-info {

        &:not(:first-child) {
            margin-top: 2rem;
        }

        p {
            font-weight: 600;
            margin: 0;
            &:not(:first-child) {
                margin: 0;
            }
        }
    }

    &:has(+ .head-illustration) {
        margin-bottom: 0;
    }

    &:has(+ .gallery) {
        margin-bottom: 0;
    }
}