.headline-cards .headline {
    grid-area: 1/4/1/span 3;
    z-index: 1;
    pointer-events: none;
}

.headline-cards.bg-brown .headline {
    color: var(--blue);
}

.headline-cards .cards-container {
    grid-area: 1/5/1/span 6;
    grid-template-columns: repeat(2, 1fr);
}

.headline-cards .cards-container .card .icon-container {
    aspect-ratio: 296/336;
    mask: var(--mask-img) no-repeat center bottom/contain;
    -webkit-mask: var(--mask-img) no-repeat center bottom/contain;
    background: currentColor;
    width: 60%;
}

.headline-cards .circle-btns-container {
    grid-area: 1/12/1/12;
}

.headline-cards .cards-container .card .card-title {
    margin-bottom: 1em;
}

.headline-cards .badge {
    grid-area: 2/3/2/span 2;
}

.headline-cards.bg-beige .badge {
	color: var(--brown);
}

@media (max-width: 1499.98px) {
    .headline-cards .headline {
        grid-area: 1/3/1/span 3;
    }

    .headline-cards .cards-container {
        grid-area: 1/4/1/span 8;
    }

    .headline-cards .circle-btns-container {
        grid-area: 1/13/1/13;
    }
}

@media (max-width: 991.98px) {
    .headline-cards .headline {
        grid-area: 1/3/1/span 5;
        margin-top: 0;
    }
    
    .headline-cards.bg-brown .headline {
        color: var(--beige);
    }

    .headline-cards .cards-container {
        grid-area: 2/3/2/span 10;
    }

    .headline-cards .circle-btns-container {
        grid-area: 1/8/1/span 5;
        justify-self: flex-end;
    }

    .headline-cards .badge {
        grid-area: 3/3/3/span 10;
        justify-self: center;
    }
}

@media (max-width: 767.98px) {
    .headline-cards .headline {
        grid-area: 1/2/1/span 8;
    }

    .headline-cards .circle-btns-container {
        grid-area: 1/10/1/span 4;
    }

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

    .headline-cards .badge {
        grid-area: 3/2/3/span 12;
    }
}

@media (max-width: 575.98px) {
    .headline-cards {
        text-align: center;
    }

    .headline-cards .headline {
        grid-area: 2/2/2/span 12;
        margin-top: var(--m-md);
    }

    .headline-cards .circle-btns-container {
        grid-area: 1/2/1/span 12;
        justify-self: center;
    }

    .headline-cards .cards-container {
        grid-area: 3/2/3/span 12;
        grid-template-columns: 1fr;
        width: fit-content;
        justify-self: center;
    }

    .headline-cards .badge {
        grid-area: 4/2/4/span 12;
    }
}