/* Layout styles that affect the overall layout of all pages */

.page-wrapper {
    position: relative;
    z-index: 1;
    background: var(--color-white);
    /* Covers the fixed footer initially; body padding-bottom (set by JS) provides the scroll room to reveal it */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex-grow: 1;
}

/* The container class enforces max-width and should wrap all elements */
.container {
    max-width: 110rem;
    width: 100%;
    margin: 0 auto;
    padding: 0 2rem;

    @media (min-width: 750px)  {
        padding: 0 3rem;
    }

    @media (min-width: 1100px)  {
        padding: 0;
    }
}

.container--header {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.container--page {
    margin: 2rem auto;

    @media (min-width: 750px)  {
        margin: 2.7rem auto;
    }

    @media (min-width: 992px) {
        margin: 3.5rem auto;
    }
}

.container--narrow {
    @media (min-width: 750px) {
        max-width: 77rem;
    }

    @media (min-width: 992px) {
        max-width: 83rem;
    }
}