.title {
    font-size: calc(var(--font-size-base) * 2) !important;
    font-weight: bolder;
}

.subtitle { font-weight: bold; }

.white { color: white; }

.transparent { color: rgba(255, 255, 255, 0.5); }

.muted {
    color: var(--text-color-muted);
    font-size: calc(var(--font-size-base) - 2px) !important;
}

.gradient {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background: linear-gradient(90deg, var(--color-primary), var(--color-complementary));
    background-clip: text;
    color: transparent;
}

.primary {
    color: var(--color-primary);
}

.complementary {
    color: var(--color-complementary);
}

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

.divider {
    background: linear-gradient(90deg, var(--color-primary), var(--color-complementary));
    border-radius: 1px;
    height: 2px;
}

.gradient-background { 
    background: linear-gradient(90deg, var(--color-primary), var(--color-complementary))
}

.shadow {
    box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.2);
}

.page {
    display: grid;
    grid-template-columns: 1rem 1fr 1rem;
    grid-template-rows: 8rem 1fr auto; /* header - content - footer */
    min-height: 100vh;
}

.page__content {
    background-color: white;
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

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

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

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

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

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

.p-2 { padding: 0.5rem; }
.p-3 { padding: 1rem; }

.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3 { padding-left: 1rem; padding-right: 1rem; }

.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 1rem; padding-bottom: 1rem; }

.ps-2 { padding-left: 0.5rem; }
.ps-3 { padding-left: 1rem; }

.pt-2 { padding-top: 0.5rem; }
.pt-3 { padding-top: 1rem; }

.pe-2 { padding-right: 0.5rem; }
.pe-3 { padding-right: 1rem; }

.pb-2 { padding-bottom: 0.5rem; }
.pb-3 { padding-bottom: 1rem; }

.m-2 { margin: 0.5rem; }
.m-3 { margin: 1rem; }

.mx-2 { margin-left: 0.5rem; margin-right: 0.5rem; }
.mx-3 { margin-left: 1rem; margin-right: 1rem; }

.my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.my-3 { margin-top: 1rem; margin-bottom: 1rem; }

.ms-2 { margin-left: 0.5rem; }
.ms-3 { margin-left: 1rem; }

.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }

.me-2 { margin-right: 0.5rem; }
.me-3 { margin-right: 1rem; }

.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }

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

.d-flex { display: flex; }
.flex-column { flex-direction: column; }
.position-relative { position: relative; }

.align-center { align-items: center; }
.align-stretch { align-items: stretch; }
.align-end { align-items: end; }

.justify-center { justify-content: center; }

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