.card-article {
    display: flex;
    flex-direction: column;
    gap: 2rem;

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

    // .card-article__image

    &__image {
        height: auto;
        aspect-ratio: 342/200;
        overflow: hidden;

        @media(min-width: $tabletSmallP1) {
            width: 50%;
        }

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: .2s all;
        }
    }

    // .card-article__main

    &__main {
        padding: 2rem 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 1rem;
        border-block: 1px solid $primary;
        position: relative;

        @media(min-width: $tabletSmallP1) {
            width: 50%;
        }

        > * {
            margin-top: 0;
        }

        mark {
            font-weight: 500;
            font-size: 1.2rem;
            line-height: 1.5;
            letter-spacing: 0;
        }

        h3 {
            font-size: 2rem;
            line-height: 1.4;
            letter-spacing: -.1px;
            max-width: 29rem;
        }

        > p {
            font-size: 1.4rem;
        }
    }

    // .card-article__badges

    &__badges {
        display: flex;
        align-items: center;
        gap: .5rem .2rem;
        flex-wrap: wrap;

        span {
            background-color: $primary;
            color: $white;
            min-height: 2rem;
            padding: 0 1rem;
            font-size: 1.4rem;
            line-height: 1.4;
            min-width: 8rem;
            text-align: center;
            display: inline-block;
        }
    }

    // .card-article__more

    &__more {
        p {
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: .8rem;
            padding: .2rem 0;

            &::after {
                content: '';
                width: 2rem;
                height: 2rem;
                background-size: 100%;
                background-position: center;
                background-repeat: no-repeat;
                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='%2339462F'/%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='%2339462F'/%3E%3C/svg%3E%0A");
                transition: .2s all;
            }

            span {
                position: relative;
                &::before {
                    content: '';
                    width: 100%;
                    height: 1px;
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    opacity: 0;
                    visibility: hidden;
                    background-color: $secondary;
                    transition: .2s all;
                }
            }
        }
       
    }

    &:hover {
        .card-article__image {
            img {
                transform: scale(1.05);
            }
        }

        .card-article__more {
            p {
                &::after {
                    transform: translateX(.4rem);
                    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' fill='%23E5A424'/%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='%2339462F'/%3E%3C/svg%3E%0A");
                }

                span {
                    &::before {
                        opacity: 1;
                        visibility: visible;
                    }
                }
            }
        }
    }

    // .card-article--yellow-link

    &--yellow-link {

        .card-article__more {
            p {
                &::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");
                }
            }

            span {
                position: relative;
                &::before {
                    content: '';
                    width: 100%;
                    height: 1px;
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    background-color: #D6D1BD;
                    opacity: 1;
                    visibility: visible;
                }
            }
        }

        &:hover {
            .card-article__more {
                span {
                    &::before {
                        background-color: $secondary;
                    }
                }
            }
        }
    }

    // .card-article--vertical

    &--vertical {
        flex-direction: column;
        gap: 1.5rem;

        .card-article__image,
        .card-article__main {
            width: 100%;
        }

        .card-article__main {
            @media(min-width: $tabletSmallP1) {
                border-top: none;
                padding-top: 0;

            }

            h3 {
                max-width: 43rem;
            }
        }

        .card-article__image {
            aspect-ratio: 342/200;

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