/* Card variants introduced and updated for article detail content */
.detail__content .box_content:has(.cards-article) {
    --box-color: initial;
    padding: 0;
    border-radius: 0;
    background: none;
    border: 0;
}


.detail__content .box_content {
    font-size: 18px 
}


.cards-article {
    padding: 24px;
}
.cards-article.card--style-1 {
    border: 1px solid #34495C;
    background: rgba(255, 255, 255, 1);
}

.cards-article.card--style-2 {
    background: #fff;
    border: 1px solid #E5E5E5;
}

.cards-article.card--style-3 {
    background: #F8F8F8;
}

.cards-article.card--style-1 .cards-article_text,
.cards-article.card--style-2 .cards-article__title,
.cards-article.card--style-3 .cards-article__title,
.cards-article.card--style-3 .cards-article_text,
.cards-article.card--highlight .cards-article_text {
    color: #222;
}

.cards-article.card--style-4 {
    border: 1px solid #ED1D26;
    background: #fff;
    border-radius: 4px;
    position: relative;
    z-index: 1;
    margin-right: 8px;
    padding-right: 16px;
}

.cards-article.card--style-4::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 8px;
    width: calc(100% + 4px);
    height: calc(100% - 12px);
    border-radius: 4px;
    border: 1.5px solid rgba(207, 10, 19, 0.1);
    z-index: -1;
    pointer-events: none;
}

.cards-article.card--style-5 {
    border: 1px solid red;
    background: #fff;
    border-radius: 4px;
    position: relative;
    z-index: 1;
    margin-left: 8px;
    margin-right: 8px;
    padding-left: 16px;
    padding-right: 16px;
}

.cards-article.card--style-5::before {
    content: '';
    position: absolute;
    top: 8px;
    left: -8px;
    width: calc(100% + 18px);
    height: calc(100% - 16px);
    border-radius: 4px;
    border: 1px solid #FAC6C9;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)),
        linear-gradient(270deg, rgba(255, 247, 247, 0.25) 0%, #FFF7F7 100%);
}

.cards-article.card--style-6 {
    border: 1px solid rgba(179, 136, 46, 1);
    background: #fff;
    border-radius: 4px;
    position: relative;
    z-index: 1;
    margin-left: 8px;
    margin-right: 8px;
    padding-left: 16px;
    padding-right: 16px;
}

.cards-article.card--style-6::before {
    content: '';
    position: absolute;
    top: 8px;
    left: -8px;
    width: calc(100% + 18px);
    height: calc(100% - 16px);
    border-radius: 4px;
    border: 1px solid rgba(247, 240, 221, 1);
    z-index: -1;
    pointer-events: none;
    background: rgba(255, 251, 241, 1);
}

.cards-article.card--style-7 {
    border: 1px solid #ED1D26;
    background: #fff;
    position: relative;
    padding: 0;
    border-radius: 4px;
    margin-right: 8px;
    margin-bottom: 24px;
}

.cards-article.card--style-7::before {
    content: '';
    position: absolute;
    top: 16px;
    left: 16px;
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    background: repeating-linear-gradient(-45deg, #ED1D26, #ED1D26 1.5px, transparent 1.5px, transparent 6px);
}

.cards-article.card--style-7 .cards-article__body {
    background: #fff;
    padding: 24px 16px 24px 24px;
    border-radius: 4px;
    position: relative;
}

.cards-article.card--style-8 {
    position: relative;
    border-radius: 4px;
    padding: 0;
    margin-bottom: 24px;
}

.cards-article.card--style-8::before {
    content: '';
    position: absolute;
    top: 24px;
    left: 24px;
    width: calc(100% - 16px);
    height: calc(100% - 16px);
    background: rgba(190, 64, 48, 1);
    border-radius: 4px;
    z-index: 0;
}

.cards-article.card--style-8 .cards-article__body {
    background: #2c2c2a;
    border-radius: 4px;
    position: relative;
    padding: 24px;
}

.cards-article.card--style-8 .cards-article__title,
.cards-article.card--style-8 .cards-article__text,
.cards-article.card--style-8 .cards-article_text {
    color: #fff;
}

@media (max-width: 767.98px) {
    article.cards-article.card--style-4 {
        padding: 20px 12px 24px 20px;
    }

    .cards-article.card--style-4::before {
        height: calc(100% - 20px);
    }

    .cards-article.card--style-5 {
        padding: 20px 8px;
    }

    .cards-article.card--style-6 {
        padding: 20px 12px 20px 8px;
    }

    .cards-article.card--style-7 .cards-article__body,
    .cards-article.card--style-8 .cards-article__body {
        padding: 12px;
    }
}