.cards-container {
    display: grid;
    gap: var(--spacing-elements-horizontal);
    grid-template-columns: repeat(3, 1fr);
}

.content-approach .cards-container {
    grid-template-columns: repeat(4, 1fr);
}

.card {
    padding: var(--padding-elements);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-elements-vertical);

    background-color: var(--card-color);
    border-radius: var(--default-radius);
    border: var(--btn-border-width) solid var(--border-color);
}

/* link styling inside cards */
.cards-container a.card {
    color: var(--text-color);
    text-decoration: none;
    transition: var(--transition-time);
}

.cards-container a.card:hover {
    box-shadow: 0 0 0 var(--btn-border-width) var(--accent-color);
}


/* Blog and other default card sections: 1 column when 3 cards no longer fit */
@media (max-width: 1100px) {
    .cards-container {
        grid-template-columns: 1fr;
    }
}