.section_list {
    display: grid;

    width: 100%;

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

    > section {
        width: inherit;

        > header {
            display: grid;
            grid-auto-flow: row;
            grid-template-columns: 1fr min-content;

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

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

            padding: var(--spacing-small);

            text-align: start;

            width: inherit;

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

            .subtitle {
                display: inline-block;

                font-size: 0.85rem;
                font-weight: normal;
                font-style: italic;
                font-family: var(--font-family-generic);
            }

            .status {
                align-self: center;
                white-space: nowrap;

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

        > .body {
            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 > section > header {
        background-color: var(--background-1);

        white-space: nowrap;
    }
}

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

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