/**
 * hana+nils · Büro für Gestaltung
 * https://hananils.de · buero@hananils.de
 */

.columns {
    --grid-columns: 2fr 2fr 2fr 3fr;
    --grid-gap: 0 3.8rem;

    /* align-items: first baseline; */
    max-width: 100rem;
    padding-right: var(--dynamic-spacing-inline-end);
    padding-left: var(--dynamic-spacing-inline-start);
}

@media (min-width: 1000px) {
    @supports (display: grid) {
        .columns {
            display: grid;
            grid-gap: var(--grid-gap);
            grid-template-columns: var(--grid-columns);
            max-width: 160rem;
            gap: var(--grid-gap);
        }
    }
}

.content > .columns {
    margin-bottom: 7.45rem;
    align-content: start;
}

.content .columns.has-baseline {
    align-items: first baseline;
}

.columns > h2 {
    grid-column: 1 / -1;
}

.columns > div {
    grid-column: 1 / 4;
}

.columns > aside {
    grid-column: 4 / 5;
}

.columns .secondary {
    margin-top: 5.5rem;
}

@media (min-width: 1000px) {
    .columns .secondary {
        margin-top: 0;
    }
}

/**
 * @question: Why don't we have .primary/.secondary for all columns?
 * Above it's just div/aside which is not useful everywhere.
 */

@media (min-width: 1000px) {
    @supports (display: grid) {
        .primary {
            padding-right: 5.4rem;
        }
    }
}

/* baseline/margin-check to ensure correct whitespace between cover/title & columns  */

.columns.has-baseline .primary > :first-child,
.columns.has-baseline .secondary > :first-child {
    margin-top: 0;
}