:root {
    --baseWidth: 1240px;
    --cf: 1px;
}

.baseWidth {
    max-width: var(--baseWidth);
    /* padding: 0 calc(20 * var(--cf)); */
}

@media screen and (max-width: 1239px) {
    :root {
        --cf: calc(100vw / 1240);
    }
}

@media screen and (max-width: 575px) {
    :root {
        --baseWidth: 576px;
        --cf: calc(576 / 1240 * 1px);        
    }
}

* {
    font-size: calc(var(--fs, 1rem) * var(--cf));
    font-weight: calc(var(--fw, 500));
    text-indent: calc(var(--ti, unset) * var(--cf)) !important;
    border-radius: calc(var(--br, unset) * var(--cf));
}


/* Widths & Heights */
.w { width: calc(var(--w, unset) * var(--cf)); }
.h { height: calc(var(--h, unset) * var(--cf)); }


/* Absolute Positioning */
.top { top: calc(var(--top, 0) * var(--cf)) }
.bottom { bottom: calc(var(--bottom, 0) * var(--cf)) }
.left { left: calc(var(--left, 0) * var(--cf)) }
.right { right: calc(var(--right, 0) * var(--cf)) }

/* Paddings & Margins */
.p { padding: calc(var(--p, unset) * var(--cf)) }
.pt { padding-top: calc(var(--pt, unset) * var(--cf))}
.pb { padding-bottom: calc(var(--pb, unset) * var(--cf))}
.pl { padding-left: calc(var(--pl, unset) * var(--cf))}
.pr { padding-right: calc(var(--pr, unset) * var(--cf))}
.ptb { padding-top: calc(var(--ptb, unset) * var(--cf)); padding-bottom: calc(var(--ptb, unset) * var(--cf)) }
.plr { padding-left: calc(var(--plr, unset) * var(--cf)); padding-right: calc(var(--plr, unset) * var(--cf)) }

.m { margin: calc(var(--m, unset) * var(--cf)) !important}
.mt { margin-top: calc(var(--mt, unset) * var(--cf)) !important}
.mb { margin-bottom: calc(var(--mb, unset) * var(--cf)) !important}
.ml { margin-left: calc(var(--ml, unset) * var(--cf)) !important}
.mr { margin-right: calc(var(--mr, unset) * var(--cf)) !important}
.mtb { margin-top: calc(var(--mtb, unset) * var(--cf)); margin-bottom: calc(var(--mtb, unset) * var(--cf)) !important}
.mlr { margin-left: calc(var(--mlr, unset) * var(--cf)); margin-right: calc(var(--mlr, unset) * var(--cf)) !important}

.mh { min-height: calc(var(--mh, unset) * var(--cf)); }
.xh { max-height: calc(var(--xh, unset) * var(--cf)); }
.xhm { max-height: calc(100vh - (var(--xhm, unset) * var(--cf))); }

.mw { min-width: calc(var(--mw, unset) * var(--cf)); }
.xw { max-width: calc(var(--xw, unset) * var(--cf)); }


/* p, textarea, input, label {
    line-height: calc(var(--lh) * 1px) !important;
} */

@media screen and (max-width: 575px) {
    .baseWidth { min-width: 100vw; }

    .pr { padding-right: calc(var(--mpr, calc(var(--pr, unset))) * var(--cf)) !important}

    .mt { margin-top: calc(var(--mmt, calc(var(--mt, unset))) * var(--cf)) !important}
}