.various-cards {
    background: #D6D1BD;
    padding: 3.5rem 0 5rem;

    @media(min-width: $tabletP1) {
        padding: 5rem 0 7.3rem;
    }

    // .various-cards__container

    &__container {
    }

    // .various-cards__content

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

    // .various-cards__head

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

        @media(min-width: $mobileP1) {
            flex-direction: row;
            justify-content: space-between;
            align-items: flex-end;
        }
    }

    // .various-cards__logo

    &__logo {
        max-width: 11.5rem;
        width: 100%;

        @media(min-width: $mobileP1) {
            max-width: 17.5rem;
        }

        img {
            width: 100%;
            height: auto;
        }
    }

    // .various-cards__text

    &__text {
        max-width: 83.2rem;

        h2 {
            @extend .h3;
            letter-spacing: -.3px;

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

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

    // .various-cards__actions

    &__actions {
        @media(max-width: $mobile) {
            display: flex;
            justify-content: flex-end;
        }

        a {
            font-size: 1.6rem;
            line-height: 1.4rem;
            display: flex;
            align-items: center;
            gap: .5rem;
            padding-block: .6rem;
            position: relative;

            @media(min-width: $mobileP1) {
                font-size: 2rem;
            }

            &::after {
                content: '';
                width: 2.4rem;
                height: 2.4rem;
                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 0.75C21.3178 0.75 27.25 6.68223 27.25 14C27.25 21.3178 21.3178 27.25 14 27.25C6.68223 27.25 0.75 21.3178 0.75 14C0.75 6.68223 6.68223 0.75 14 0.75Z' stroke='%2339462F' stroke-width='1.5'/%3E%3Cpath d='M17.7288 12.857L13.6749 8.80328C13.5496 8.67777 13.4863 8.5304 13.485 8.36118C13.4835 8.19195 13.5453 8.04409 13.6705 7.9176C13.7957 7.79074 13.9435 7.72804 14.1139 7.72952C14.2842 7.73099 14.4325 7.7943 14.5587 7.91944L19.6798 13.0405C19.7468 13.1083 19.7956 13.1788 19.826 13.252C19.8566 13.3253 19.8719 13.403 19.8719 13.4852C19.8719 13.5673 19.8566 13.6449 19.826 13.7178C19.7956 13.7909 19.7468 13.8612 19.6798 13.9288L14.5543 19.0542C14.4247 19.1794 14.2763 19.2419 14.1091 19.2419C13.9419 19.2419 13.7957 19.1794 13.6705 19.0542C13.5453 18.926 13.4828 18.7781 13.4828 18.6105C13.4828 18.4427 13.5453 18.296 13.6705 18.1704L17.7288 14.1122L8.73731 14.1122C8.5574 14.1122 8.40708 14.0527 8.28636 13.9335C8.16564 13.8144 8.10529 13.6648 8.10529 13.4846C8.10529 13.3045 8.16564 13.1548 8.28636 13.0357C8.40708 12.9166 8.5574 12.857 8.73731 12.857L17.7288 12.857Z' fill='%2339462F'/%3E%3C/svg%3E%0A");
                background-size: 100%;
                background-repeat: no-repeat;
                background-position: center;
                transition: .2s all;

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

            span {
                position: relative;
                display: inline-block;
                line-height: 1;
                &::before {
                    content: '';
                    width: 100%;
                    height: .1rem;
                    background-color: $primary;
                    position: absolute;
                    bottom: -2px;
                    left: 0;
                    transition: .2s all;
                }
                &::after {
                    content: '';
                    width: 0;
                    height: .1rem;
                    background-color: $secondary;
                    position: absolute;
                    bottom: -2px;
                    right: 0;
                    transition: .2s all;
                }
            }

            &:hover {
                &::after {
                    transform: translateX(.2rem);
                    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 0.75C21.3178 0.75 27.25 6.68223 27.25 14C27.25 21.3178 21.3178 27.25 14 27.25C6.68223 27.25 0.75 21.3178 0.75 14C0.75 6.68223 6.68223 0.75 14 0.75Z' fill='%23E5A424' stroke='%2339462F' stroke-width='1.5'/%3E%3Cpath d='M17.7288 12.857L13.6749 8.80328C13.5496 8.67777 13.4863 8.5304 13.485 8.36118C13.4835 8.19195 13.5453 8.04409 13.6705 7.9176C13.7957 7.79074 13.9435 7.72804 14.1139 7.72952C14.2842 7.73099 14.4325 7.7943 14.5587 7.91944L19.6798 13.0405C19.7468 13.1083 19.7956 13.1788 19.826 13.252C19.8566 13.3253 19.8719 13.403 19.8719 13.4852C19.8719 13.5673 19.8566 13.6449 19.826 13.7178C19.7956 13.7909 19.7468 13.8612 19.6798 13.9288L14.5543 19.0542C14.4247 19.1794 14.2763 19.2419 14.1091 19.2419C13.9419 19.2419 13.7957 19.1794 13.6705 19.0542C13.5453 18.926 13.4828 18.7781 13.4828 18.6105C13.4828 18.4427 13.5453 18.296 13.6705 18.1704L17.7288 14.1122L8.73731 14.1122C8.5574 14.1122 8.40708 14.0527 8.28636 13.9335C8.16564 13.8144 8.10529 13.6648 8.10529 13.4846C8.10529 13.3045 8.16564 13.1548 8.28636 13.0357C8.40708 12.9166 8.5574 12.857 8.73731 12.857L17.7288 12.857Z' fill='%2339462F'/%3E%3C/svg%3E%0A");
                }

                span {
                    &::before {
                        background-color: $secondary;
                        width: 0;
                        right: 0;
                    }
                    &::after {
                        left: 0;
                        width: 100%;
                    }
                }
            }
        }
    }

    // .various-cards__view-all

    &__view-all {
    }

    // .various-cards__cards

    &__cards {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.5rem;

        @media(min-width: $mobileP1) {
            grid-template-columns: repeat(2, 1fr);
        }

        @media(min-width: $tabletP1) {
            grid-template-columns: repeat(4, 1fr);
        }
    }

    // .various-cards__various-card

    &__various-card {
        min-height: 40rem;

        &:first-child {
            @media(min-width: $mobileP1) {
                grid-column: span 2;
            }
        }
    }

    &:has(+ .grid-all-cards) {
        padding-bottom: 0;
        margin-bottom: 0;
    }

    // .various-cards--white-bg

    &--white-bg {
        background-color: $white;
        padding: 0;
        margin-bottom: 8rem;

        @media(min-width: $tabletP1) {
            margin-bottom: 10rem;
        }

        .various-cards__actions {
            @media(max-width: $mobile) {
                justify-content: flex-start;
            }
        }

        .card__action {
            button {
                &::after {
                    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");
                }
            }
        }
    }

    // .various-cards--blue-bg
    &--blue-bg {
        background-color: #B4D2D2;
        @media(min-width: $tabletP1) {
            padding: 10rem 0;
        }

        .various-cards__actions {
            a {
                &:hover {
                    text-decoration-color: $secondary;
                    &::after {
                        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 0.75C21.3178 0.75 27.25 6.68223 27.25 14C27.25 21.3178 21.3178 27.25 14 27.25C6.68223 27.25 0.75 21.3178 0.75 14C0.75 6.68223 6.68223 0.75 14 0.75Z' fill='%23E5A424' stroke='%2339462F' stroke-width='1.5'/%3E%3Cpath d='M17.7288 12.857L13.6749 8.80328C13.5496 8.67777 13.4863 8.5304 13.485 8.36118C13.4835 8.19195 13.5453 8.04409 13.6705 7.9176C13.7957 7.79074 13.9435 7.72804 14.1139 7.72952C14.2842 7.73099 14.4325 7.7943 14.5587 7.91944L19.6798 13.0405C19.7468 13.1083 19.7956 13.1788 19.826 13.252C19.8566 13.3253 19.8719 13.403 19.8719 13.4852C19.8719 13.5673 19.8566 13.6449 19.826 13.7178C19.7956 13.7909 19.7468 13.8612 19.6798 13.9288L14.5543 19.0542C14.4247 19.1794 14.2763 19.2419 14.1091 19.2419C13.9419 19.2419 13.7957 19.1794 13.6705 19.0542C13.5453 18.926 13.4828 18.7781 13.4828 18.6105C13.4828 18.4427 13.5453 18.296 13.6705 18.1704L17.7288 14.1122L8.73731 14.1122C8.5574 14.1122 8.40708 14.0527 8.28636 13.9335C8.16564 13.8144 8.10529 13.6648 8.10529 13.4846C8.10529 13.3045 8.16564 13.1548 8.28636 13.0357C8.40708 12.9166 8.5574 12.857 8.73731 12.857L17.7288 12.857Z' fill='%2339462F'/%3E%3C/svg%3E%0A");
                    }
                }
            }
        }

        .various-cards__head {
            .various-cards__actions {
                @media(max-width: $tabletSmall) {
                    display: none;
                }
            }
        }

        .various-cards__content {
            @media(max-width: $tabletSmall) {
                gap: 1.5rem;
            }
            
            > .various-cards__actions {
                justify-content: center;
                
                @media(min-width: $tabletSmallP1) {
                    display: none;
                }

            }
        }
        
    }

    // .various-cards--two-col

    &--two-col {

        .various-cards__cards {
            @media(min-width: $tabletP1) {
                grid-template-columns: repeat(2, 1fr);
            }

             &:has(.card-article) {
                grid-template-columns: 1fr;
                @media(min-width: $tabletLargeP1) {
                    grid-template-columns: repeat(2, 1fr);
                }
            }
        }

        .various-cards__various-card {
            &:first-child {
                grid-column: span 1;
            }
        }

        .card__action {
            button {
                &::after {
                    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");
                }
            }
        }

        .card__image {
            aspect-ratio: 333/263;

            @media(min-width: $tabletSmallP1) {
                aspect-ratio: 713/250;      
            }
        }

    }

    // .various-cards--three-col

    &--three-col {
        .various-cards__cards {
            @media(min-width: $tabletP1) {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        .various-cards__various-card {
            &:first-child {
                grid-column: span 1;
            }
        }
    }

     // .various-cards--four-col

    &--four-col {
        .various-cards__cards {
            @media(min-width: $tabletP1) {
                grid-template-columns: repeat(4, 1fr);
            }
        }

        .various-cards__various-card {
            &:first-child {
                grid-column: span 1;
            }
        }
    }

    // .various-cards--full-size

    &--full-size {
        .various-cards__cards {
            display: flex;
            > * {
                width: 100%;
            }

            .card--image-absolute {
                border: none;
                border-radius: 0;
                min-height: 50rem;
                margin-inline: -2rem;
                width: calc(100% + 4rem);

                @media(min-width: $tabletSmallP1) {
                    min-height: 60rem;
                    margin: 0;
                    width: 100%;
                }
            }

            .card__image {
                border-radius: 0;
            }

            .card__body {
                max-width: 74.3rem;
                @media(min-width: $tabletSmallP1) {
                    padding: 3.5rem;
                }
            }

            .card__action {
                @media(min-width: $tabletSmallP1) {
                    justify-content: flex-start;
                }
            }
        }
    }
}