.main-column {
    --list--color-background: transparent;
}

.list {
    --column-gap: 4rem;
}

.list[data-maximum-columns="2"] .list__column-2,
.list[data-maximum-columns="2"] .list__column-2 + .list__column-1,
.list[data-maximum-columns="2"] .list__column-2 + .list__column-1 .cards {
    --column-gap: 1.5rem;
}

.main-column {
    container-name: OpenGemeentenSite-List;
}

@container OpenGemeentenSite-List not style(--list--color-background: transparent) {
    .list:not([data-maximum-columns="1"]) {
        padding-top: 3rem;
        padding-bottom: 3rem;
        margin-bottom: 0 !important;
    }
}

.list__container {
    display: flex;
    flex-direction: column;
}

.list__column-1 {
    margin-top: 1.5em;
}

@media (min-width: 62rem) {
    .list__container {
        flex-direction: row;
    }

    .list__column-1 {
        margin-top: 0;
        margin-left: auto;
    }

    .list--facetting-position-right .list__container {
        flex-direction: row-reverse;
    }

    .list--facetting-position-right .list__column-1 {
        margin-left: unset;
    }

    .list--facetting-position-right .list__column-2 {
        margin-left: auto;
    }
}

@container OpenGemeentenSite-List not style(--list--color-background: transparent) {
    .list:not([data-maximum-columns="1"]) {
        background-color: var(--list--color-background, transparent);
    }
}

.list__column-1 {
    flex-basis: 100%;
}

.list__column-2 {
    flex-basis: calc((100% / 3) - (1 * var(--column-gap, 2rem)));
}

.list__column-2 + .list__column-1 {
    flex-basis: calc(((100% / 3) * 2) - (1 * var(--column-gap, 2rem)));
}