@media screen and (min-width: 48rem) {
    #toolbar {
        position: sticky;
        top: 0;
        left: 0;
        right: 0;
    }

    #footnotes {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: end;
    }

    #footnotes > * {
        flex-basis: 30%;
    }

    .col-2, .col-3, .img-l, .img-r {
        display: flex;
        flex-direction: row;
        align-items: start;
        column-gap: 2rem;
    }

    .col-2 > *, .col-3 > * {
        flex: 1 1;
    }

    .img-l > *:first-child, .img-r > *:last-child {
        flex: 3 0;
    }

    .img-l > *:last-child, .img-r > *:first-child {
        flex: 5 1;
    }

    .img-l.small > *:first-child, .img-r.small > *:last-child {
        flex: 2 0;
    }

    .img-l.small > *:last-child, .img-r.small > *:first-child {
        flex: 5 1;
    }
}

@media screen and (max-width: 48rem) {
    #toolbar #logo {
        display: none;
    }
}

#toolbar {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;

    padding-left: 1rem;
    padding-right: 1rem;
}

#toolbar #logo {
    flex: 0 0;
}

#toolbar > menu > li {
    display: inline-block;
}

body > main > *:not(#footnotes), article > section {
    width: min(66rem, calc(100vw - 2rem));
    margin: 6rem auto;
}

#footnotes {
    padding: 3rem;
}

.img-l img, .img-r img {
    width: 100%;
}