.card-vertical {
    display: flex;
    flex-direction: column;
    background-color: $primary;
    transition: .2s all;

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

    // .card-vertical__image

    &__image {
        
        height: auto;
        position: relative;
        @media (min-width: $tabletSmallP1) {
            width: 50%;
        }

        @media (max-width: $tabletSmall) {
            aspect-ratio: 375/350;
        }

        &::before {
            content: '';
            background: linear-gradient(0deg, rgba(57, 70, 47, 0.75), rgba(57, 70, 47, 0.75));
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            visibility: hidden;
            transition: .2s all;
        }

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    // .card-vertical__text-wrapper

    &__text-wrapper {
        
        display: flex;
        @media (min-width: $tabletSmallP1) {
            width: 50%;
        }
    }

    // .card-vertical__text

    &__text {
        padding: 2.5rem 2rem;
        margin: 0 auto;

        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 1.5rem;
        text-align: center;
        color: #D6D1BD;
        transition: .2s all;

        @media (min-width: $tabletSmallP1) {
            max-width: 48.1rem;
            gap: 2rem;
        }

        
        h3, p, ul {
            margin: 0;
        }

        h3 {
            font-size: 2.4rem;
            line-height: 1.3;
            letter-spacing: 0;
            margin-top: .5rem;

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

        mark {
            font-size: 1.2rem;
            font-weight: 500;
            line-height: 1.5;
            font-family: $secondary-font;

            @media (min-width: $tabletSmallP1) {
                font-size: 1.4rem;
            }
        }
    }

    // .card-vertical__brand

    &__brand {
        max-width: 12.4rem;
        width: 100%;

        @media (min-width: $tabletSmallP1) {
            max-width: 13.2rem;
        }

        img {
            width: 100%;
            height: auto;
            transition: .2s all;
        }
    }

    // .card-vertical__action

    &__action {
        padding-block: .8rem;
        display: flex;
        align-items: center;
        gap: 1rem;
        text-decoration: underline;
        

        &::after {
            content: '';
            width: 2.4rem;
            height: 2.4rem;
            background-size: 100%;
            background-position: center;
            background-repeat: no-repeat;
            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.5C21.4558 0.5 27.5 6.54416 27.5 14C27.5 21.4558 21.4558 27.5 14 27.5C6.54416 27.5 0.5 21.4558 0.5 14C0.5 6.54416 6.54416 0.5 14 0.5Z' stroke='%23D6D1BD'/%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='%23D6D1BD'/%3E%3C/svg%3E%0A");
            transition: .2s all;

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

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

    &:hover {
        background-color: $white;
        .card-vertical__image {
            &::before {
                opacity: 1;
                visibility: visible;
            }
        }

        .card-vertical__text {
            color: $primary;
        }

        .card-vertical__brand {
            img {
                filter: brightness(0) saturate(100%) invert(23%) sepia(12%) saturate(1174%) hue-rotate(53deg) brightness(93%) contrast(87%);
            }
        }

        .card-vertical__action {
            &::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.5C21.4558 0.5 27.5 6.54416 27.5 14C27.5 21.4558 21.4558 27.5 14 27.5C6.54416 27.5 0.5 21.4558 0.5 14C0.5 6.54416 6.54416 0.5 14 0.5Z' fill='%23E5A424' stroke='%2339462F'/%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");
            }
        }
    }

    // .card-vertical--reverse

    &--reverse {
        @media (min-width: $tabletSmallP1) {
            flex-direction: row-reverse;
        }
    }
}