.page {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
}

.page__header {
    background: linear-gradient(90deg, var(--color-primary), var(--color-complementary));
    grid-row: 1 / 2;
    height: 8rem;
    padding-left: 1rem;
    padding-right: 1rem;
    background-color: var(--color-primary);
    overflow: visible !important;
    position: sticky !important;
    top: 0;
    z-index: 3;
    box-shadow: var(--box-shadow);
}

.page__content {
    grid-row: 2 / 3;
    padding: var(--page-content-padding-y) 1rem;
    overflow: visible !important;
}

.page__footer {
    background: white;
    grid-row: 3 / 4;
    margin-top: 16rem;
}

.m-auto { margin-right: auto;  margin-left: auto; }

.max-w-32 { max-width: 32rem; }
.max-w-64 { max-width: 64rem; }
.max-w-80 { max-width: 80rem; }
.max-w-96 { max-width: 96rem; }
.max-w-112 { max-width: 112rem; }

.row {
    display: flex;
    flex-wrap: wrap;
    margin-left: calc(-1 * var(--gutter));
    margin-right: calc(-1 * var(--gutter));
}

.col {
    flex: 1;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

.col-auto {
    flex: 0 0 auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

.z-1 { z-index: 1; }
.z-2 { z-index: 2; }
.z-3 { z-index: 3; }

.d-flex { display: flex; }
.align-center { align-items: center; }
.justify-center { justify-content: center; }

.h-100 { height: 100%; }
.w-100 { width: 100%; }