body > header {
    display: grid;
    grid-template-columns: 10rem 1fr 10rem;
    text-align: center;
    height: 6rem;
    padding: 0;
    margin-bottom: 1rem;
}

.header-right-button svg,
.header-back-button svg {
    height: 100%;
    width: 2rem;
    margin: auto;
}

.header-back-button {
    text-align: left;
}

.header-right-button {
    text-align: right;
}

.header-right-button a {
    margin: 0;
    margin-right: 2rem;
}

.header-back-button a {
    margin: 0;
    margin-left: 2rem;
}

.sidebar-layout.double {
    grid-template-columns: 18rem 2fr 1fr;
    height: calc(100dvh - 7rem);
}

.sidebar-layout.single {
    grid-template-columns: 18rem 1fr;
    height: calc(100dvh - 7rem);
    padding-inline: 1rem;
}

h2 {
    margin: 0;
}

.hidden {
    display: none;
}

@media screen and (max-width: 50rem) {
    body > header {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 3rem 3rem;
    }

    .header-main {
        grid-column: span 2;
    }

    .header-main h1 {
        margin: 0;
    }

    .header-back-button {
        grid-row: 2;
    }

    .header-right-button {
        grid-row: 2;
    }

    .sidebar-layout.double {
        display: flex;
        flex-direction: column;
        max-height: calc(100dvh - 7rem);
    }

    div[role=tablist] {
        flex-direction: column;
        margin-bottom: 1rem;
    }

    div[role=tablist] > [aria-selected=true]:not(#specificity-hack) {
        border-bottom: 1px solid var(--graphical-fg);
    }
}

@media screen and (min-width: 1420px) {
    .sidebar-layout.double {
        grid-template-columns: 18rem 2fr 25rem;
    }
}