/*
===============
=== SPACING ===
===============
*/

:root {
    --max-width: 1200px;
    --max-width-1200px: 1200px;
    --max-width-800px: 800px;
    --max-width-600px: 600px;
    --max-width-400px: 400px;
    --max-width-300px: 300px;
    --max-width-200px: 200px;
    --max-width-100px: 100px;

    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;
    --spacing-xl: 6rem;
}

/*
=============
=== WIDTH ===
=============
*/

.max-width {
    max-width: var(--max-width) !important;
}

.max-width-3-4 {
    max-width: var(--max-width) * 3/4 !important;
}

.max-width-2-3 {
    max-width: var(--max-width) * 2/3 !important;
}

.max-width-800px {
    max-width: 800px !important;
}

.max-width-600px {
    max-width: 600px !important;
}

.max-width-400px {
    max-width: 400px !important;
}

.width-100 {
    width: 100% !important;
}

.width-90 {
    width: 90% !important;
}

.width-80 {
    width: 80% !important;
}

.width-75 {
    width: 75% !important;
}

.width-70 {
    width: 70% !important;
}

.width-60 {
    width: 60% !important;
}

.width-50 {
    width: 50% !important;
}

.width-40 {
    width: 40% !important;
}

.width-20 {
    width: 20% !important;
}

.width-30 {
    width: 30% !important;
}

.width-10 {
    width: 10% !important;
}

/*
==============
=== MARGIN ===
==============
*/

.m-0 {
    margin: 0 !important;
}

.m-xs {
    margin: var(--spacing-xs) !important;
}

.m-sm {
    margin: var(--spacing-sm) !important;
}

.m-md {
    margin: var(--spacing-md) !important;
}

.m-lg {
    margin: var(--spacing-lg) !important;
}

.m-xl {
    margin: var(--spacing-xl) !important;
}

.mt-xs {
    margin-top: var(--spacing-xs) !important;
}

.mt-sm {
    margin-top: var(--spacing-sm) !important;
}

.mt-md {
    margin-top: var(--spacing-md) !important;
}

.mt-lg {
    margin-top: var(--spacing-lg) !important;
}

.mt-xl {
    margin-top: var(--spacing-xl) !important;
}

.mb-xs {
    margin-bottom: var(--spacing-xs) !important;
}

.mb-sm {
    margin-bottom: var(--spacing-sm) !important;
}

.mb-md {
    margin-bottom: var(--spacing-md) !important;
}

.mb-lg {
    margin-bottom: var(--spacing-lg) !important;
}

.mb-xl {
    margin-bottom: var(--spacing-xl) !important;
}

.ml-0 {
    margin-left: 0 !important;
}

.ml-25 {
    margin-left: 25% !important;
}

.ml-50 {
    margin-left: 50% !important;
}

.ml-75 {
    margin-left: 75% !important;
}

.ml-auto {
    margin-left: auto !important;
}

.ml-xs {
    margin-left: var(--spacing-xs) !important;
}

.ml-sm {
    margin-left: var(--spacing-sm) !important;
}

.ml-md {
    margin-left: var(--spacing-md) !important;
}

.ml-lg {
    margin-left: var(--spacing-lg) !important;
}

.ml-xl {
    margin-left: var(--spacing-xl) !important;
}

.mr-0 {
    margin-right: 0 !important;
}

.mr-25 {
    margin-right: 25% !important;
}

.mr-50 {
    margin-right: 50% !important;
}

.mr-75 {
    margin-right: 75% !important;
}

.mr-auto {
    margin-right: auto !important;
}

.mr-xs {
    margin-right: var(--spacing-xs) !important;
}

.mr-sm {
    margin-right: var(--spacing-sm) !important;
}

.mr-md {
    margin-right: var(--spacing-md) !important;
}

.mr-lg {
    margin-right: var(--spacing-lg) !important;
}

.mr-xl {
    margin-right: var(--spacing-xl) !important;
}

.mx-0 {
    margin: 0 !important;
}

.mx-auto {
    margin: 0 auto !important;
}

.mx-xs {
    margin-left: var(--spacing-xs) !important;
    margin-right: var(--spacing-xs) !important;
}

.mx-sm {
    margin-left: var(--spacing-sm) !important;
    margin-right: var(--spacing-sm) !important;
}

.mx-md {
    margin-left: var(--spacing-md) !important;
    margin-right: var(--spacing-md) !important;
}

.mx-lg {
    margin-left: var(--spacing-lg) !important;
    margin-right: var(--spacing-lg) !important;
}

.mx-xl {
    margin-left: var(--spacing-xl) !important;
    margin-right: var(--spacing-xl) !important;
}

.my-xs {
    margin-top: var(--spacing-xs) !important;
    margin-bottom: var(--spacing-xs) !important;
}

.my-sm {
    margin-top: var(--spacing-sm) !important;
    margin-bottom: var(--spacing-sm) !important;
}

.my-md {
    margin-top: var(--spacing-md) !important;
    margin-bottom: var(--spacing-md) !important;
}

.my-lg {
    margin-top: var(--spacing-lg) !important;
    margin-bottom: var(--spacing-lg) !important;
}

.my-xl {
    margin-top: var(--spacing-xl) !important;
    margin-bottom: var(--spacing-xl) !important;
}

/*
===============
=== PADDING ===
===============
*/

.p-0 {
    padding: 0 !important;
}

.p-xs {
    padding: var(--spacing-xs) !important;
}

.p-sm {
    padding: var(--spacing-sm) !important;
}

.p-md {
    padding: var(--spacing-md) !important;
}

.p-lg {
    padding: var(--spacing-lg) !important;
}

.p-xl {
    padding: var(--spacing-xl) !important;
}

.pt-xs {
    padding-top: var(--spacing-xs) !important;
}

.pt-sm {
    padding-top: var(--spacing-sm) !important;
}

.pt-md {
    padding-top: var(--spacing-md) !important;
}

.pt-lg {
    padding-top: var(--spacing-lg) !important;
}

.pt-xl {
    padding-top: var(--spacing-xl) !important;
}

.pb-xs {
    padding-bottom: var(--spacing-xs) !important;
}

.pb-sm {
    padding-bottom: var(--spacing-sm) !important;
}

.pb-md {
    padding-bottom: var(--spacing-md) !important;
}

.pb-lg {
    padding-bottom: var(--spacing-lg) !important;
}

.pb-xl {
    padding-bottom: var(--spacing-xl) !important;
}

.pl-xs {
    padding-left: var(--spacing-xs) !important;
}

.pl-sm {
    padding-left: var(--spacing-sm) !important;
}

.pl-md {
    padding-left: var(--spacing-md) !important;
}

.pl-lg {
    padding-left: var(--spacing-lg) !important;
}

.pl-xl {
    padding-left: var(--spacing-xl) !important;
}

.pr-xs {
    padding-right: var(--spacing-xs) !important;
}

.pr-sm {
    padding-right: var(--spacing-sm) !important;
}

.pr-md {
    padding-right: var(--spacing-md) !important;
}

.pr-lg {
    padding-right: var(--spacing-lg) !important;
}

.pr-xl {
    padding-right: var(--spacing-xl) !important;
}

.px-0 {
    padding: 0 !important;
}

.px-auto {
    padding: 0 auto !important;
}

.px-xs {
    padding-left: var(--spacing-xs) !important;
    padding-right: var(--spacing-xs) !important;
}

.px-sm {
    padding-left: var(--spacing-sm) !important;
    padding-right: var(--spacing-sm) !important;
}

.px-md {
    padding-left: var(--spacing-md) !important;
    padding-right: var(--spacing-md) !important;
}

.px-lg {
    padding-left: var(--spacing-lg) !important;
    padding-right: var(--spacing-lg) !important;
}

.px-xl {
    padding-left: var(--spacing-xl) !important;
    padding-right: var(--spacing-xl) !important;
}

.py-xs {
    padding-top: var(--spacing-xs) !important;
    padding-bottom: var(--spacing-xs) !important;
}

.py-sm {
    padding-top: var(--spacing-sm) !important;
    padding-bottom: var(--spacing-sm) !important;
}

.py-md {
    padding-top: var(--spacing-md) !important;
    padding-bottom: var(--spacing-md) !important;
}

.py-lg {
    padding-top: var(--spacing-lg) !important;
    padding-bottom: var(--spacing-lg) !important;
}

.py-xl {
    padding-top: var(--spacing-xl) !important;
    padding-bottom: var(--spacing-xl) !important;
}

/*
===================
=== LINE-HEIGHT ===
===================
*/

.lh-100 {
    line-height: 100% !important;
}

.lh-125 {
    line-height: 125% !important;
}

.lh-150 {
    line-height: 150% !important;
}

.lh-175 {
    line-height: 175% !important;
}

.lh-200 {
    line-height: 200% !important;
}

.lh-250 {
    line-height: 250% !important;
}

.lh-300 {
    line-height: 300% !important;
}

/*
================
=== NO-SPACE ===
================
*/

.no-wrap {
    display: inline;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}