:root {
    --cardgroup-gap: 1rem;
    --cardgroup-columns: 1;
}

.card-group-element {
    gap: var(--cardgroup-gap);
}

/* Zusätzliche Spalten-Layouts über 4 hinaus */
@media (min-width: 576px) {
    .card-group-element-columns-5,
    .card-group-element-columns-6,
    .card-group-element-columns-7,
    .card-group-element-columns-8,
    .card-group-element-columns-9 {
        --cardgroup-columns: 2;
    }
}

@media (min-width: 992px) {
    .card-group-element-columns-5,
    .card-group-element-columns-6,
    .card-group-element-columns-7,
    .card-group-element-columns-8,
    .card-group-element-columns-9 {
        --cardgroup-columns: 3;
    }
}

@media (min-width: 1200px) {
    .card-group-element-columns-5 {
        --cardgroup-columns: 5;
    }

    .card-group-element-columns-6 {
        --cardgroup-columns: 6;
    }

    .card-group-element-columns-7 {
        --cardgroup-columns: 7;
    }

    .card-group-element-columns-8 {
        --cardgroup-columns: 8;
    }

    .card-group-element-columns-9 {
        --cardgroup-columns: 9;
    }
}