/* ================================================
   Fluid Spacing System - Responsive via clamp()
   Based on viewport 1440px for max values
   ================================================ */

:root {
    --padding-xl: clamp(2rem, calc(2rem + 10.89vw), 9999rem); /* 154px @ 1440 */
    --padding-l: clamp(2rem, calc(0.788rem + 6.07vw), 9999rem); /* 100px @ 1440 */
    --padding-md: clamp(2rem, calc(1.594rem + 2.05vw), 9999rem); /* 55px @ 1440 */
    --padding-xs: clamp(0.75rem, calc(0.643rem + 0.536vw), 9999rem); /* 18px @ 1440 */
}

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

/* PADDING - XL */
.p-xl {
    padding: var(--padding-xl);
}

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

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

.ps-xl {
    padding-left: var(--padding-xl);
}

.pe-xl {
    padding-right: var(--padding-xl);
}

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

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

/* PADDING - L */
.p-l {
    padding: var(--padding-l);
}

.pt-l {
    padding-top: var(--padding-l);
}

.pb-l {
    padding-bottom: var(--padding-l);
}

.ps-l {
    padding-left: var(--padding-l);
}

.pe-l {
    padding-right: var(--padding-l);
}

.px-l {
    padding-left: var(--padding-l);
    padding-right: var(--padding-l);
}

.py-l {
    padding-top: var(--padding-l);
    padding-bottom: var(--padding-l);
}

/* PADDING - MD */
.p-md {
    padding: var(--padding-md);
}

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

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

.ps-md {
    padding-left: var(--padding-md);
}

.pe-md {
    padding-right: var(--padding-md);
}

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

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

/* PADDING - XS */
.p-xs {
    padding: var(--padding-xs);
}

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

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

.ps-xs {
    padding-left: var(--padding-xs);
}

.pe-xs {
    padding-right: var(--padding-xs);
}

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

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

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

/* MARGIN - XL */
.m-xl {
    margin: var(--padding-xl);
}

.mt-xl {
    margin-top: var(--padding-xl);
}

.mb-xl {
    margin-bottom: var(--padding-xl);
}

.ms-xl {
    margin-left: var(--padding-xl);
}

.me-xl {
    margin-right: var(--padding-xl);
}

.mx-xl {
    margin-left: var(--padding-xl);
    margin-right: var(--padding-xl);
}

.my-xl {
    margin-top: var(--padding-xl);
    margin-bottom: var(--padding-xl);
}

/* MARGIN - L */
.m-l {
    margin: var(--padding-l);
}

.mt-l {
    margin-top: var(--padding-l);
}

.mb-l {
    margin-bottom: var(--padding-l);
}

.ms-l {
    margin-left: var(--padding-l);
}

.me-l {
    margin-right: var(--padding-l);
}

.mx-l {
    margin-left: var(--padding-l);
    margin-right: var(--padding-l);
}

.my-l {
    margin-top: var(--padding-l);
    margin-bottom: var(--padding-l);
}

/* MARGIN - MD */
.m-md {
    margin: var(--padding-md);
}

.mt-md {
    margin-top: var(--padding-md);
}

.mb-md {
    margin-bottom: var(--padding-md);
}

.ms-md {
    margin-left: var(--padding-md);
}

.me-md {
    margin-right: var(--padding-md);
}

.mx-md {
    margin-left: var(--padding-md);
    margin-right: var(--padding-md);
}

.my-md {
    margin-top: var(--padding-md);
    margin-bottom: var(--padding-md);
}

/* MARGIN - XS */
.m-xs {
    margin: var(--padding-xs);
}

.mt-xs {
    margin-top: var(--padding-xs);
}

.mb-xs {
    margin-bottom: var(--padding-xs);
}

.ms-xs {
    margin-left: var(--padding-xs);
}

.me-xs {
    margin-right: var(--padding-xs);
}

.mx-xs {
    margin-left: var(--padding-xs);
    margin-right: var(--padding-xs);
}

.my-xs {
    margin-top: var(--padding-xs);
    margin-bottom: var(--padding-xs);
}

/* ===============================
   Line height (legacy)
   =============================== */

.lh-08 {
    line-height: 0.8 !important;
}