body {
    font-family:
        system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji";
    background-color: var(--bg-color);
    color: var(--font-color);
}

nav {
    border-bottom: 1px solid var(--font-color);
    border-top: 1px solid var(--font-color);
    padding: 8px 0;
    margin-bottom: var(--size-l);

    .nav-links {
        display: flex;
        gap: var(--size-l);
        padding: 0;
        list-style-type: none;
        margin: 0 var(--size-m);
    }
}

.layout--column-center {
    display: grid;
    grid-template-columns: 1fr minmax(auto, 768px) 1fr;

    > * {
        grid-column: 2;
    }
}

.layout--sidebar-main {
    display: grid;
    grid-template-columns: 12rem minmax(auto, 768px);

    > sidebar {
        grid-column: 1;
    }

    > main {
        grid-column: 2;
    }
}

@media (max-width: 768px) {
    .layout--sidebar-main {
        grid-template-columns: 1fr;
        gap: var(--size-m);

        > sidebar {
            grid-column: 1;
        }

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

.header-content {
    display: flex;
    gap: 16px;
    align-items: center;
    margin: var(--size-m);
}