/* style here */
body {
    position: relative;
    padding: 0;
    margin: 0;
}

header {
    display: grid;
    place-content: center start;
    grid-template-rows: 88px;
    border-bottom: 2px solid var(--maui-color-interaction-focus);
    margin-bottom: var(--maui-spacing-6);
    box-sizing: border-box;
    padding: 0 var(--maui-spacing-4);
}

main {
    display: grid;
    place-content: start;
    gap: var(--maui-spacing-4);
    min-height: 50svh;
    padding: 0 var(--maui-spacing-4);
}

footer {
    bottom: 0;
    margin-top: var(--maui-spacing-8);
    box-shadow: 0 -24px 0 0 var(--maui-color-brand-light-sky-blue), 0 -44px 0 0 var(--maui-color-brand-secondary);
}

    footer nav {
        background-color: var(--maui-color-brand-sky-blue);
        place-content: center start;
        padding: var(--maui-spacing-4);
    }

    footer maui-link-list {
        align-self: center;
    }

    footer section {
        display: grid;
        place-content: center start;
        grid-template-rows: 68px;
        background-color: var(--maui-color-text-headline);
        border-bottom: 36px solid var(--maui-color-text-copy);
        padding: 0 var(--maui-spacing-4);
    }


/*****************************************************************************
 * Spacers
 *****************************************************************************/

@media (min-width: 768px) {
    .spacer-small {
        width: auto;
        height: 20px;
    }

    .spacer-medium {
        width: auto;
        height: 40px;
    }
}

.spacer-small {
    width: auto;
    height: 16px;
}


.spacer-medium {
    width: auto;
    height: 40px;
}