/* utility spacing variables */
:root {
    --space-2xlrg: calc(var(--base-space) * var(--space-scale-2xl));
    --space-xlrg: calc(var(--base-space) * var(--space-scale-xl));
    --space-lrg: calc(var(--base-space) * var(--space-scale-lg));
    --space-med: calc(var(--base-space) * var(--space-scale-m));
    --space-sml: calc(var(--base-space) * var(--space-scale-sm));
    --space-xsml: calc(var(--base-space) * var(--space-scale-xs));
    --space-2xsml: calc(var(--base-space) * var(--space-scale-2xs));
}

/* layout & position */
.w100 {
    width: 100%;
}
.w100a {
    width: 100%;
    height: auto;
}
.w75 {
    width: 75%;
}
.w75a {
    width: 75%;
    height: auto;
}
.w50 {
    width: 50%;
}
.w50a {
    width: 50%;
    height: auto;
}
.w25 {
    width: 33.333%;
}
.w25a {
    width: 33.333%;
    height: auto;
}
.h100 {
    height: 100%;
}
.h100a {
    height: 100%;
    width: auto;
}
.h75 {
    height: 75%;
}
.h75a {
    height: 75%;
    width: auto;
}
.h50 {
    height: 50%;
}
.h50a {
    height: 50%;
    width: auto;
}
.h25 {
    height: 25%;
}
.h25a {
    height: 25%;
    width: auto;
}

/* margins */
.m-xlrg {
    margin: var(--space-xl);
}
.my-xlrg {
    margin-top: var(--space-xl);
    margin-bottom: var(--space-xl);
}
.mt-xlrg {
    margin-top: var(--space-xl);
}
.mb-xlrg {
    margin-bottom: var(--space-xl);
}
.mx-xlrg {
    margin-left: var(--space-xl);
    margin-right: var(--space-xl);
}
.ml-xlrg {
    margin-left: var(--space-xl);
}
.mr-xlrg {
    margin-right: var(--space-xl);
}
.m-lrg {
    margin: var(--space-lg);
}
.my-lrg {
    margin-top: var(--space-lg);
    margin-bottom: var(--space-lg);
}
.mt-lrg {
    margin-top: var(--space-lg);
}
.mb-lrg {
    margin-bottom: var(--space-lg);
}
.mx-lrg {
    margin-left: var(--space-lg);
    margin-right: var(--space-lg);
}
.ml-lrg {
    margin-left: var(--space-lg);
}
.mr-lrg {
    margin-right: var(--space-lg);
}
.m-med {
    margin: var(--space-m);
}
.my-med {
    margin-top: var(--space-m);
    margin-bottom: var(--space-m);
}
.mt-med {
    margin-top: var(--space-m);
}
.mb-med {
    margin-bottom: var(--space-m);
}
.mx-med {
    margin-left: var(--space-m);
    margin-right: var(--space-m);
}
.ml-med {
    margin-left: var(--space-m);
}
.mr-med {
    margin-right: var(--space-m);
}
.m-sml {
    margin: var(--space-sm);
}
.my-sml {
    margin-top: var(--space-sm);
    margin-bottom: var(--space-sm);
}
.mt-sml {
    margin-top: var(--space-sm);
}
.mb-sml {
    margin-bottom: var(--space-sm);
}
.mx-sml {
    margin-left: var(--space-sm);
    margin-right: var(--space-sm);
}
.ml-sml {
    margin-left: var(--space-sm);
}
.mr-sml {
    margin-right: var(--space-sm);
}
.m-xsml {
    margin: var(--space-xs);
}
.my-xsml {
    margin-top: var(--space-xs);
    margin-bottom: var(--space-xs);
}
.mt-xsml {
    margin-top: var(--space-xs);
}
.mb-xsml {
    margin-bottom: var(--space-xs);
}
.mx-xsml {
    margin-left: var(--space-xs);
    margin-right: var(--space-xs);
}
.ml-xsml {
    margin-left: var(--space-xs);
}
.mr-xsml {
    margin-right: var(--space-xs);
}

/* padding */
.p-xlrg {
    padding: var(--space-xl);
}
.py-xlrg {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
}
.pt-xlrg {
    padding-top: var(--space-xl);
}
.pb-xlrg {
    padding-bottom: var(--space-xl);
}
.px-xlrg {
    padding-left: var(--space-xl);
    padding-right: var(--space-xl);
}
.pl-xlrg {
    padding-left: var(--space-xl);
}
.pr-xlrg {
    padding-right: var(--space-xl);
}
.p-lrg {
    padding: var(--space-lg);
}
.py-lrg {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
}
.pt-lrg {
    padding-top: var(--space-lg);
}
.pb-lrg {
    padding-bottom: var(--space-lg);
}
.px-lrg {
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
}
.pl-lrg {
    padding-left: var(--space-lg);
}
.pr-lrg {
    padding-right: var(--space-lg);
}
.p-med {
    padding: var(--space-m);
}
.py-med {
    padding-top: var(--space-m);
    padding-bottom: var(--space-m);
}
.pt-med {
    padding-top: var(--space-m);
}
.pb-med {
    padding-bottom: var(--space-m);
}
.px-med {
    padding-left: var(--space-m);
    padding-right: var(--space-m);
}
.pl-med {
    padding-left: var(--space-m);
}
.pr-med {
    padding-right: var(--space-m);
}
.p-sml {
    padding: var(--space-sm);
}
.py-sml {
    padding-top: var(--space-sm);
    padding-bottom: var(--space-sm);
}
.pt-sml {
    padding-top: var(--space-sm);
}
.pb-sml {
    padding-bottom: var(--space-sm);
}
.px-sml {
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
}
.pl-sml {
    padding-left: var(--space-sm);
}
.pr-sml {
    padding-right: var(--space-sm);
}
.p-xsml {
    padding: var(--space-xs);
}
.py-xsml {
    padding-top: var(--space-xs);
    padding-bottom: var(--space-xs);
}
.pt-xsml {
    padding-top: var(--space-xs);
}
.pb-xsml {
    padding-bottom: var(--space-xs);
}
.px-xsml {
    padding-left: var(--space-xs);
    padding-right: var(--space-xs);
}
.pl-xsml {
    padding-left: var(--space-xs);
}
.pr-xsml {
    padding-right: var(--space-xs);
}

/* gaps */
.gap-xlrg {
    gap: var(--space-xl);
}
.gapy-xlrg {
    row-gap: var(--space-xl);
}
.gapx-xlrg {
    column-gap: var(--space-xl);
}
.gap-lrg {
    gap: var(--space-lg);
}
.gapy-lrg {
    row-gap: var(--space-lg);
}
.gapx-lrg {
    column-gap: var(--space-lg);
}
.gap-med {
    gap: var(--space-m);
}
.gapy-med {
    row-gap: var(--space-m);
}
.gapx-med {
    column-gap: var(--space-m);
}
.gap-sml {
    gap: var(--space-sm);
}
.gapy-sml {
    row-gap: var(--space-sm);
}
.gapx-sml {
    column-gap: var(--space-sm);
}
.gap-xsml {
    gap: var(--space-xs);
}
.gapy-xsml {
    row-gap: var(--space-xs);
}
.gapx-xsml {
    column-gap: var(--space-xs);
}

/* spacers */
.spacey-xlrg {
    height: var(--space-xl);
}
.spacex-xlrg {
    width: var(--space-xl);
}
.spacey-lrg {
    height: var(--space-lg);
}
.spacex-lrg {
    width: var(--space-lg);
}
.spacey-med {
    height: var(--space-m);
}
.spacex-med {
    width: var(--space-m);
}
.spacey-sml {
    height: var(--space-sm);
}
.spacex-sml {
    width: var(--space-sm);
}
.spacey-xsml {
    height: var(--space-xs);
}
.spacex-xsml {
    width: var(--space-xs);
}

/* containers */
.container-sml {
    max-width: var(--container-sml-width);
    margin-left: auto;
    margin-right: auto;
    padding: 0 var(--container-padding);

}
.container-lrg {
    max-width: var(--container-lrg-width);
    margin-left: auto;
    margin-right: auto;
    padding: 0 var(--container-padding);
}

/* text */
.txt-xsml {
    font-size: var(--text-xs);
}
.txt-sml {
    font-size: var(--text-sm);
}
.txt-med {
    font-size: var(--text-lg);
}
.txt-1 {
    color: var(--txt-1-color);
}
.txt-2 {
    color: var(--txt-2-color);
}
.txt-3 {
    color: var(--txt-3-color);
}