#site-header {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    background: #07111F;
    background: linear-gradient(to bottom, rgb(7, 17, 31) 90%, transparent);
    padding: 20px;
    border-bottom: 1px solid var(--border);

    .branding {
        font-family: Instrument Serif !important;
        font-size: 18px !important;
        text-transform: capitalize !important;
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 8px;
        align-items: center;
        color: var(--light);
        margin-right: auto;

        img {
            height: 30px;
        }
    }

    .navigation {
        display: flex;
        align-items: center;
        gap: 20px;

        a {
            text-transform: uppercase;
            font-family: var(--font-big);
            font-size: 16px;
            letter-spacing: 0.5px;

            &.active {
                color: var(--primary);
            }
        }
    }
}