.section_list {
    display: grid;

    width: 100%;

    margin: 0;
    padding: 0;
    list-style: none;

    > li + li {
        margin-top: var(--spacing-small);
    }

    > li {
        width: inherit;

        > header {
            display: grid;
            grid-template-columns: 1fr min-content;
            grid-template-areas: "name status" "subtitle status";

            column-gap: calc(var(--spacing-small) * 2);

            background-color: var(--background-3);
            border-radius: var(--border-radius-leaf);

            padding: var(--spacing-small);

            width: inherit;

            > .name,
            > .subtitle,
            > .status {
                margin: inherit;

                font-family: var(--font-family-generic);
            }

            > .name {
                grid-area: name;

                font-size: 2vh;
            }

            > .subtitle {
                grid-area: subtitle;

                display: inline-block;

                font-size: 0.85rem;
                font-weight: normal;
                font-style: italic;
            }

            > .status {
                grid-area: status;

                align-self: center;
                white-space: nowrap;

                text-decoration: none;
                font-size: 1.17rem;
            }

            > .name,
            > .subtitle {
                text-align: left;
            }

            > .name,
            > .status {
                font-weight: bold;
            }
        }

        > header ~ * {
            padding: 0 calc(var(--spacing-small) * 2);

            ul {
                font-family: var(--font-family-generic);

                li + li {
                    margin-top: 0.5em;
                }
            }
        }
    }
}

.spacer_container {
    justify-content: start;

    .section_list > li > header {
        background-color: var(--background-1);

        white-space: nowrap;
    }
}

@media (max-width: 600px) {
    .section_list > li {
        > header {
            column-gap: var(--spacing-small);
        }

        > header ~ * {
            // Collapse the L/R padding to maximize usable space
            padding: 0;
        }
    }
}
