.cards-diffrents {
    margin: 17rem 0 15rem;

    // .cards-diffrents__container

    &__container {
    }

    // .cards-diffrents__content

    &__content {
        display: flex;
        flex-direction: column;
        gap: 1rem;

        > .cards-diffrents__card {
            aspect-ratio: 1440/625;
        }
    }

    // .cards-diffrents__card

    &__card {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 40rem;
        position: relative;
        @media(min-width: $tabletLargeP1) {
            min-height: auto;
        }

        button {
            z-index: 2;
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 1.6rem;
            color: $secondary;
            gap: 1rem;

            @media(min-width: $tabletSmallP1) {
                flex-direction: row;
                font-size: 2rem;
            }

            &::after {
                content: '';
                width: 2.4rem;
                height: 2.4rem;
                border-radius: 50%;
                background-size: 100%;
                background-position: center;
                background-repeat: no-repeat;
                background-image: url("data:image/svg+xml,%3Csvg width='32' height='33' viewBox='0 0 32 33' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 0.75C20.0369 0.75 23.9135 2.40334 26.7754 5.35449C29.638 8.30656 31.25 12.3155 31.25 16.5C31.25 25.2204 24.4008 32.25 16 32.25C7.59925 32.25 0.750007 25.2204 0.75 16.5C0.75 7.77961 7.59924 0.750016 16 0.75ZM13.4443 8.80664C12.8425 8.41763 12.0796 8.39356 11.4551 8.74609H11.4541C10.8311 9.09817 10.4542 9.76314 10.4502 10.4736V22.5137C10.442 23.2411 10.8258 23.9263 11.4668 24.2822C12.1033 24.6357 12.8776 24.599 13.4785 24.1924L22.8057 18.1865L22.8135 18.1816C23.3781 17.8086 23.71 17.1727 23.71 16.5C23.71 15.8274 23.3782 15.1913 22.8135 14.8184L22.8047 14.8125L13.4443 8.80664Z' stroke='%23E5A424' stroke-width='1.5'/%3E%3C/svg%3E%0A");
                transition: .2s all;
                @media(min-width: $tabletSmallP1) {
                    width: 3.2rem;
                    height: 3.2rem;
                }
            }

            &::before {
                width: 100%;
                height: 100%;
                position: absolute;
                top: 50%;
                left: 0;
                transform: translateY(-50%);
                content: '';
                cursor: pointer;
            }

            &:hover {
                &::after {
                    transform: scale(1.1);
                }
            }

            span {
                position: relative;
                &::before {
                    content: '';
                    width: 100%;
                    height: 1px;
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    background-color: $secondary;
                }
            }
        }

        // .cards-diffrents__card--dark-shadow
        &--dark-shadow {
            
            .cards-diffrents__image {
                &::before {
                    content: '';
                    width: 100%;
                    height: 100%;
                    background: #000000A6;
                    border-radius: 2rem;
                    position: absolute;
                    top: 0;
                    left: 0;
                }
            }

        }

       // .cards-diffrents__card--green-shadow
        &--green-shadow {
            .cards-diffrents__image {
                &::before {
                    content: '';
                    width: 100%;
                    height: 100%;
                    background: rgb(23 33 15 / 73%);
                    border-radius: 2rem;
                    position: absolute;
                    top: 0;
                    left: 0;
                }
            }
        }
    }

    

    // .cards-diffrents__vector

    &__vector {
        max-width: 17.5rem;
        width: 100%;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, -57%);
        z-index: 2;
        
        
        img {
            width: 100%;
            height: auto;
        }
    }

    // .cards-diffrents__image

    &__image {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 2rem;
        }
    }

    // .cards-diffrents__text

    &__text {
        position: relative;
        z-index: 2;
        text-align: center;
        max-width: 57rem;
        margin: 0 auto;
        padding: 3rem 2rem 1rem;
        @media(min-width: $tabletLargeP1) {
            padding: 0;
        }

        h2 {
            color: $secondary;
            @include adaptiveProperty("font-size", 32, 26);
            letter-spacing: -.2px;
            @media(min-width: $tabletLargeP1) {
                letter-spacing: -.7px;
            }
        }

    }

    // .cards-diffrents__gallery-cards

    &__gallery-cards {
        display: flex;
        flex-direction: column-reverse;
        gap: 1rem;

        @media(min-width: $tabletLargeP1) {
            display: grid;
            grid-template-columns: repeat(3, 1fr);

        }

        .cards-diffrents__card {
            grid-column: span 2;
        }

        .cards-diffrents__article-card {

        }

        .cards-diffrents__card {
            aspect-ratio: unset;
            height: 100%;
        }
    }

    // .cards-diffrents__article-card

    &__article-card {
        background-color: $primary;
        border-radius: 2rem;
        overflow: hidden;
        padding: 2.5rem 2rem 2rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        @media(min-width: $tabletLargeP1) {
            padding: 7rem 4rem 5rem;
            gap: 2rem;
        }

        > * {
            position: relative;
            z-index: 2;
        }

        h3 {
            color: $secondary;
            @include adaptiveProperty("font-size", 24, 20);
            letter-spacing: -.2px;
            line-height: 1.3;

            & + p {
                margin-top: 1rem;
                @media(min-width: $tabletLargeP1) {
                    margin-top: 0;
                }
            }
        }

        p {
            margin: 0;
        }

        p, li {
            color: #D6D1BD;
            font-size: 1.4rem;
        }

        ul {
            list-style: none;
            margin: 0;
            padding: 0;
            

            li {
                padding-left: 2rem;
                position: relative;
                &::before {
                    content: '';
                    width: 3px;
                    height: 3px;
                    border-radius: 50%;
                    position: absolute;
                    top: .9rem;
                    left: 1rem;
                    background-color: #D6D1BD;
                }

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

    // .cards-diffrents__article-actions

    &__article-actions {
        display: flex;
        flex-direction: column;
        gap: 0;
        align-items: flex-end;
        margin-top: .3rem;

        @media(min-width: $tabletSmallP1) {
            flex-direction: row;
            justify-content: flex-end;
            align-items: center;
            margin-top: 0;
            gap: 2.5rem;
        }

        a {
            color: #D6D1BD;
            font-weight: 600;
            font-size: 1.6rem;
            display: flex;
            align-items: center;
            gap: .5rem;
            padding-block: .8rem;
            position: relative;

            &::before {

                @media(min-width: $tabletSmallP1) {
                    content: '';
                    width: 100%;
                    height: 4.4rem;
                    position: absolute;
                    top: 50%;
                    left: 0;
                    transform: translateY(-50%);
                }
            }

            &::after {
                content: '';
                background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' y='0.5' width='19' height='19' rx='9.5' stroke='%23E5A424'/%3E%3Cpath d='M10.1123 14.5C10.0861 14.5 10.0707 14.4952 10.0449 14.4717C10.0354 14.4623 10.0306 14.4556 10.0283 14.4521C10.0308 14.4489 10.035 14.4431 10.043 14.4355L13.8369 10.9102L14.7695 10.0439L5.09082 10.0439C5.0344 10.0439 5.01807 10.0308 5.00684 10.0205C5.00396 10.0179 5.00205 10.0159 5.00098 10.0146L5 9.99902C5 9.99146 5.00059 9.98675 5.00098 9.98437C5.00195 9.98319 5.00349 9.98062 5.00684 9.97754C5.01807 9.96724 5.0344 9.9541 5.09082 9.9541L14.7695 9.9541L13.8369 9.08789L10.0479 5.56641C10.0371 5.55639 10.0314 5.55005 10.0293 5.54687L10.0293 5.54492L10.0449 5.52832L10.0449 5.52734C10.0693 5.50441 10.0842 5.49977 10.1133 5.5C10.1472 5.5003 10.1669 5.50793 10.1943 5.5332L14.9805 9.97949C14.99 9.98865 14.9967 9.99484 15 9.99902C14.9965 10.0034 14.99 10.0107 14.9795 10.0205L10.1943 14.4668C10.1616 14.4958 10.1396 14.5 10.1123 14.5Z' stroke='%23E5A424'/%3E%3C/svg%3E%0A");
                width: 2rem;
                height: 2rem;
                background-size: 100%;
                background-repeat: no-repeat;
                background-position: center;
                border-radius: 50%;
                transition: .2s all;
            }

            &:hover {
                color: $secondary;
                &::after {
                    transform: translateX(.4rem);
                }
            }
        }
    }
}