html {
    box-sizing: border-box;
    accent-color: var(--medium-blue);
    font-size: var(--font-size);
}

*, *:before, *:after {
    box-sizing: inherit;
}

body {
    font-family: var(--font-family);
}

.layout {
    display: grid;
    grid-template-columns: var(--side-padding) 1fr min(var(--layout-width), calc(100% - 2 * var(--side-padding))) 1fr var(--side-padding);
    grid-row-gap: 6rem;

    &.center {
        justify-items: center;
    }

    @media screen and (max-width: 800px) {
        grid-row-gap: 4rem;
    }
}

.layout > * {
    grid-column: 3;
}

.full-bleed {
    width: 100%;
    grid-column: 2 / 5;
}

header, section, footer {
    color: var(--font-color);
    background-color: var(--background-color);
}

header {
    --heading-color: white;

    padding: 15rem 0 15rem;
    align-content: flex-start;

    &.with-background {
        background: var(--background-image) color-mix(in srgb, var(--background-color), transparent 5%);
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
    }

    @media screen and (max-width: 800px) {
        padding: 5rem 0 5rem;
    }

    @media screen and (min-width: 800px) {
        &.layout {
            grid-row-gap: 8rem;
        }
    }
}

section {
    padding-block: 12rem;

    h1, h2, h3 {
        & > :first-child {
            text-align: center;
        }
    }

    @media screen and (max-width: 800px) {
        padding-block: 8rem;
    }
}

header.small, section.small {
    padding-block: 6rem;
    grid-row-gap: 5rem;
}

nav {
    position: sticky;
    top: 0;
    background-color: var(--background-color);

    height: 10rem;
    align-items: center;

    @media screen and (max-width: 800px) {
        height: 8rem;
    }

    .actions {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;

        .links {
            display: flex;
            flex-direction: row;
            gap: 4rem;

            font-weight: 600;
            font-size: var(--font-small);

            @media screen and (max-width: 800px) {
                gap: 1rem;
            }
        }
    }

    .logo {
        height: 5.25rem;
    }
}

footer {
    padding-block: 5rem;

    svg {
        height: 5.25rem;
    }

    .icon {
        height: 2.75rem;

        &:hover {
            --icon-color: var(--icon-color-hover);
        }
    }

    article {
        display: flex;
        justify-content: space-between;
    }

    aside {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 2rem;

    }

    .icons {
        margin-bottom: 2rem;
    }

    .links {
        text-align: right;

        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .fine-print {
        margin-top: auto;
        font-size: var(--font-xxsmall);
    }
}