/* The mode lives on the wrapper so no embedding component can forget it; only the columns and the
   gap stay theirs. `view.js` packs the columns by hand where the browser does not know grid-lanes. */
.grid-lanes {
    display: grid;

    @supports (display: grid-lanes) {
        display: grid-lanes;
    }
}

/* Every item at its own height: a grid row would stretch them all to the tallest, which is both
   the wrong picture and a wrong measurement to pack by. */
.grid-lanes > * {
    align-self: start;
}

/* Where the script packs the columns instead of the browser, it writes the place and the width of
   every item and the height of the box they leave behind. The items leave the flow, so whatever
   laid the columns out has nothing left to lay out and no `display` of ours has to beat it. */
.grid-lanes[data-packed] {
    position: relative;

    & > * {
        position: absolute;
        inset-block-start: 0;
        inset-inline-start: 0;
    }
}

.grid-lanes-story {
    margin: 0;
    padding: 0;
    list-style: none;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.grid-lanes-story__item {
    display: grid;
    place-items: center;
    min-block-size: 5rem;
    border-radius: var(--sav-radius);
    background-color: var(--sav-color-hellgrau);
    color: var(--sav-color-dunkelblau);
}

/* Three heights taking turns, since equal items pack like a plain grid. */
.grid-lanes-story__item:nth-child(3n + 2) {
    min-block-size: 9rem;
}

.grid-lanes-story__item:nth-child(3n) {
    min-block-size: 13rem;
}

.grid-lanes-story--even .grid-lanes-story__item {
    min-block-size: 7rem;
}