.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;
}

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

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

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

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

    .list__column-2 {
        margin-left: auto;
    }
}

.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)));
}