/* Stack */
.stack {
    /* ↓ The flex context */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.stack > * {
    /* ↓ Any extant vertical margins are removed */
    margin-block: 0;
}
.stack > * + * {
    /* ↓ Top margin is only applied to successive elements */
    margin-block-start: var(--space, 1.5rem);
}

.center {
    /* ↓ Remove padding from the width calculation */
    box-sizing: content-box;
    /* ↓ The maximum width is the maximum measure */
    max-inline-size: 60ch;
    /* ↓ Only affect horizontal margins */
    margin-inline: auto;
    /* ↓ Apply the minimum horizontal space */
    padding-inline-start: var(--s1);
    padding-inline-end: var(--s1);
}

/* Cover needs to know what's inside of it. Here it's a <h1> - change it to whatever is needed */
.cover {
    --space: var(--s1);
    /* ↓ Establish a columnar flex context */
    display: flex;
    flex-direction: column;
    /* ↓ Set a minimum height to match the viewport height
    (any minimum would be fine) */
    min-block-size: 80vh;
    /* Set a padding value */
    padding-block: var(--space);
    justify-content: space-around;
}

.cover > * {
    /* ↓ Give each child a top and bottom margin */
    margin-block: var(--s1);
}

.cover > :first-child:not(h1) {
    /* ↓ Remove the top margin from the first-child
    if it _doesn't_ match the centered element */
    margin-block-start: 0;
}

.cover > :last-child:not(h1) {
    /* ↓ Remove the bottom margin from the last-child
    if it _doesn't_ match the centered element */
    margin-block-end: 0;
}

.cover > h1 {
    /* ↓ Center the centered element
    in the available vertical space */
    margin: auto;
}

/* Sidebar */
.with-sidebar {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.sidebar {
    /* ↓ The width when the sidebar _is_ a sidebar */
    flex-basis: 20rem;
    flex-grow: 1;
    align-self: center;
}

.not-sidebar {
    /* ↓ Grow from nothing */
    flex-basis: 0;
    flex-grow: 999;
    /* ↓ Wrap when the elements are of equal width */
    min-inline-size: 65%;
}