.headline-text-cards .headline {
    grid-area: 1/2/1/span 12;
}

.headline-text-cards .text-container {
    grid-area: 2/2/2/span 12;
    max-width: 96ch;
}

.headline-text-cards .cards-container {
    grid-area: 3/2/3/span 12;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--grid-gap);
}

.headline-text-cards .card-item {
    display: grid;
    cursor: pointer;
}

.headline-text-cards .card-item .card-content>* {
    flex: 0 0 auto;
}

.headline-text-cards .card-item .card-img {
    grid-area: 1/1/1/1;
    aspect-ratio: 752/994;
    position: relative;
}

.headline-text-cards .card-item .card-img .badge {
    position: absolute;
    bottom: var(--grid-gap);
    right: var(--grid-gap);
    z-index: 1;
    opacity: 1;
    transition: var(--def-trans);
    transform: rotate(-10deg);
}

.headline-text-cards .card-item.active .card-img .badge {
    opacity: 0;
    transition: var(--def-trans);
}

.headline-text-cards .card-item .card-content {
    grid-area: 1/1/1/1;
    opacity: 0;
    visibility: hidden;
    padding: max(16px, 2.5vw);
    aspect-ratio: 752/994;
    width: 100%;
    height: auto;
    overflow: auto;
    transition: var(--def-trans);
}

.headline-text-cards .card-item.active .card-content {
    opacity: 1;
    visibility: visible;
    cursor: default;
}

.headline-text-cards .card-item .card-content .close-btn {
    display: block;
    width: 24px;
    height: 24px;
    mask: url(../../img/icon-close.svg) no-repeat center/contain;
    -webkit-mask: url(../../img/icon-close.svg) no-repeat center/contain;
    background: var(--white);
    transition: var(--def-trans);
    position: absolute;
    top: max(24px, 1.875vw);
    right: max(24px, 1.875vw);
}

.headline-text-cards .card-item .card-content .close-btn:hover {
    transform: scale(1.1);
}

.headline-text-cards .card-item .card-content .card-thumb {
    width: 20%;
    aspect-ratio: 1/1;
    border-radius: 100%;
    overflow: hidden;
}

.headline-text-cards .card-item .card-content .text-container {
    margin-bottom: auto;
    overflow: auto;
    flex-grow: 0;
    flex-shrink: 1;
}

.headline-text-cards .card-item .card-content .text-container {
    margin-bottom: auto;
    overflow-x: auto;
    flex-shrink: 1;
    flex-grow: 0;
    position: relative;
}

.headline-text-cards .card-item .card-content .text-container::after {
    content: "";
    display: block;
    width: 100%;
    height: 2em;
    position: sticky;
    left: 0;
    bottom: 0;
    background: linear-gradient(0deg, var(--blue) 0%, transparent 100%);
}

.headline-text-cards .card-item .card-content .card-subtext {
    line-height: 1.875;
    letter-spacing: .4em;
    display: flex;
    flex-direction: column;
    gap: .5em;
    margin-top: var(--m-xs);
}

.headline-text-cards .card-item .card-content .card-subtext p {
    margin: 0;
}

.headline-text-cards .card-item>.card-title {
    display: flex;
    align-items: center;
    gap: 1em;
}

.headline-text-cards .card-item>.card-title::after {
    content: "";
    display: block;
    width: auto;
    height: 1.5em;
    aspect-ratio: 35/38;
    mask: url(../../img/arrow-right.svg) no-repeat center/contain;
    -webkit-mask: url(../../img/arrow-right.svg) no-repeat center/contain;
    background: currentColor;
}

@media (max-width: 1199.98px) {
    .headline-text-cards .card-item .card-content .card-subtext {
        line-height: 1.4;
        letter-spacing: .2em;
    }

    .headline-text-cards .cards-container {
        grid-template-columns: 1fr;
        max-width: 480px;
        justify-self: center;
        grid-row-gap: var(--m-md);
    }
}

@media (max-width: 575.98px) {
    .headline-text-cards .card-item .card-content .card-subtext {
        gap: .25em;
        line-height: 1.25;
        letter-spacing: .04em;
    }

    .headline-text-cards .card-item .card-content .text-container,
    .headline-text-cards .card-item .card-content .text-container p {
        line-height: 1.4;
    }

    .headline-text-cards .card-item .card-img,
    .headline-text-cards .card-item .card-content {
        aspect-ratio: 2/3;
    }
}