.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

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

.page__header {
    grid-row: 1 / 2;
    height: var(--navbar-height);
    padding: 0 var(--spacing-unit);
    overflow: visible !important;
    position: sticky !important;
    top: 0;
    z-index: 100;
}

.page__content {
    grid-row: 2 / 3;
    padding: var(--page-content-py) var(--spacing-unit);
    z-index: 50;
}

.page__footer {
    grid-row: 3 / 4;
    padding-top: calc(var(--spacing-unit) * 2);
    border-top: 2px solid var(--color-background);
    margin-top: 16rem;
    z-index: 0;
}

.page__header {
    background-image: linear-gradient(90deg, var(--color-primary), var(--color-complementary));
    position: relative;
    overflow: hidden;
}

.page__header::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("/assets/images/texture.png");
    background-repeat: repeat;
    background-size: calc(var(--spacing-unit) * 8) calc(var(--spacing-unit) * 6.5);
    opacity: 0.1;
    pointer-events: none;
}

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

.max-w-sm {max-width: calc(var(--spacing-unit) * 80); }
.max-w-md { max-width: calc(var(--spacing-unit) * 96); }
.max-w-lg { max-width: calc(var(--spacing-unit) * 128); }
/* .max-w-lg { max-width: calc(var(--spacing-unit) * 112); } */
.max-w-xl { max-width: calc(var(--spacing-unit) * 128); }

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

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

.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);
}

.p-2 { padding: calc(0.5 * var(--spacing-unit)); }
.p-3 { padding: calc(1 * var(--spacing-unit)); }
.p-4 { padding: calc(2 * var(--spacing-unit)); }

.px-2 {
    padding-left: calc(0.5 * var(--spacing-unit));
    padding-right: calc(0.5 * var(--spacing-unit));
}
.px-3 {
    padding-left: calc(1 * var(--spacing-unit));
    padding-right: calc(1 * var(--spacing-unit));
}
.px-4 {
    padding-left: calc(2 * var(--spacing-unit));
    padding-right: calc(2 * var(--spacing-unit));
}

.py-2 {
    padding-top: calc(0.5 * var(--spacing-unit));
    padding-bottom: calc(0.5 * var(--spacing-unit));
}
.py-3 {
    padding-top: calc(1 * var(--spacing-unit));
    padding-bottom: calc(1 * var(--spacing-unit));
}
.py-4 {
    padding-top: calc(2 * var(--spacing-unit));
    padding-bottom: calc(2 * var(--spacing-unit));
}

.ps-2 { padding-left: calc(0.5 * var(--spacing-unit)); }
.ps-3 { padding-left: calc(1 * var(--spacing-unit)); }
.ps-4 { padding-left: calc(2 * var(--spacing-unit)); }

.pt-2 { padding-top: calc(0.5 * var(--spacing-unit)); }
.pt-3 { padding-top: calc(1 * var(--spacing-unit)); }
.pt-4 { padding-top: calc(2 * var(--spacing-unit)); }

.pe-2 { padding-right: calc(0.5 * var(--spacing-unit)); }
.pe-3 { padding-right: calc(1 * var(--spacing-unit)); }
.pe-4 { padding-right: calc(2 * var(--spacing-unit)); }

.pb-2 { padding-bottom: calc(0.5 * var(--spacing-unit)); }
.pb-3 { padding-bottom: calc(1 * var(--spacing-unit)); }
.pb-4 { padding-bottom: calc(2 * var(--spacing-unit)); }

.m-2 { margin: calc(0.5 * var(--spacing-unit)); }
.m-3 { margin: calc(1 * var(--spacing-unit)); }
.m-4 { margin: calc(2 * var(--spacing-unit)); }

.mx-2 {
    margin-left: calc(0.5 * var(--spacing-unit));
    margin-right: calc(0.5 * var(--spacing-unit));
}
.mx-3 {
    margin-left: calc(1 * var(--spacing-unit));
    margin-right: calc(1 * var(--spacing-unit));
}
.mx-4 {
    margin-left: calc(2 * var(--spacing-unit));
    margin-right: calc(2 * var(--spacing-unit));
}

.my-2 {
    margin-top: calc(0.5 * var(--spacing-unit));
    margin-bottom: calc(0.5 * var(--spacing-unit));
}
.my-3 {
    margin-top: calc(1 * var(--spacing-unit));
    margin-bottom: calc(1 * var(--spacing-unit));
}
.my-4 {
    margin-top: calc(2 * var(--spacing-unit));
    margin-bottom: calc(2 * var(--spacing-unit));
}

.ms-2 { margin-left: calc(0.5 * var(--spacing-unit)); }
.ms-3 { margin-left: calc(1 * var(--spacing-unit)); }
.ms-4 { margin-left: calc(2 * var(--spacing-unit)); }

.mt-2 { margin-top: calc(0.5 * var(--spacing-unit)); }
.mt-3 { margin-top: calc(1 * var(--spacing-unit)); }
.mt-4 { margin-top: calc(2 * var(--spacing-unit)); }

.me-2 { margin-right: calc(0.5 * var(--spacing-unit)); }
.me-3 { margin-right: calc(1 * var(--spacing-unit)); }
.me-4 { margin-right: calc(2 * var(--spacing-unit)); }

.mb-2 { margin-bottom: calc(0.5 * var(--spacing-unit)); }
.mb-3 { margin-bottom: calc(1 * var(--spacing-unit)); }
.mb-4 { margin-bottom: calc(2 * var(--spacing-unit)); }