:root {
    scroll-behavior: smooth;
    scroll-padding-block: var(--spacer);
    --padding: 1em;
}

body {
    max-inline-size: 60em;
}

.page-nav ul {
    list-style: none;
    text-align: end;
    padding: 0;
}

.example {
    border: 1px solid var(--color-border);
    padding: var(--padding);
    margin-block-end: 2em;
    border-radius: 0.5em;
}

.example--code {
    border-end-start-radius: 0;
    border-end-end-radius: 0;
    margin-block-end: 0;
}

pre.example-code {
    border: 1px solid var(--color-border);
    border-block-start: 0;
    margin-block: 0 2em;
}

@media (min-width: 40em) {
    body {
        display: grid;
        grid-template-columns: 66% 33%;
        gap: var(--padding);
    }

    main {
        grid-column: 1;
        grid-row: 1;
    }

    .page-nav {
        grid-column: 2;
        grid-row: 1;
    }

    .page-nav ul {
        position: sticky;
        inset-block: var(--spacer);
        margin-block: var(--spacer);
        max-block-size: calc(100dvb - 2 * var(--spacer));
        overflow: auto;
    }
}