/* Alignment */
.align-left {
    display: grid;
    text-align: left;
}

.align-center {
    display: grid;
    text-align: center;
}

.align-right {
    display: grid;
    text-align: right;
}

.va-mid {
    display: grid;
    place-content: center;
    contain: content;
}
.va-mid-stretch {
    display: grid;
}

/* Spacing - adding margin and padding to elements */
.m-0 {margin: 0;}
.m-xxs {margin: 0.25rem;}
.m-xs {margin: 0.5rem;}
.m-s {margin: 0.75rem;}
.m-m {margin: 1rem;}
.m-l {margin: 1.25rem;}
.m-xl {margin: 1.50rem;}
.m-xxl {margin: 3rem;}
.p-xxs {padding: 0.25rem;}
.p-xs {padding: 0.5rem;}
.p-s {padding: 0.75rem;}
.p-m {padding: 1rem;}
.p-l {padding: 1.25rem;}
.p-xl {padding: 1.50rem;}
.p-xxl {padding: 3rem;}

/* Margins & Padding - add them in the order Top Right Bottom Left */
/* Spacing - adding margin and padding to TOP ONLY */
.mt-0 {margin: 0;}
.mt-xxs {margin-top: 0.25rem;}
.mt-xs {margin-top: 0.5rem;}
.mt-s {margin-top: 0.75rem;}
.mt-m {margin-top: 1rem;}
.mt-l {margin-top: 1.25rem;}
.mt-xl {margin-top: 1.50rem;}
.mt-xxl {margin-top: 3rem;}
.pt-xxs {padding-top: 0.25rem;}
.pt-xs {padding-top: 0.5rem;}
.pt-s {padding-top: 0.75rem;}
.pt-m {padding-top: 1rem;}
.pt-xl {padding-top: 1.50rem;}
.pt-xxl {padding-top: 3rem;}

/* Spacing - adding margin and padding to RIGHT ONLY */
.mr-0 {margin: 0;}
.mr-xs {margin-right: 0.5rem;}
.mr-xxs {margin-right: 0.25rem;}
.mr-s {margin-right: 0.75rem;}
.mr-m {margin-right: 1rem;}
.mr-l {margin-right: 1.25rem;}
.mr-xl {margin-right: 1.50rem;}
.mr-xxl {margin-right: 3rem;}
.pr-xxs {padding-right: 0.25rem;}
.pr-xs {padding-right: 0.5rem;}
.pr-s {padding-right: 0.75rem;}
.pr-m {padding-right: 1rem;}
.pr-l {padding-right: 1.25rem;}
.pr-xl {padding-right: 1.50rem;}
.pr-xxl {padding-right: 3rem;}

/* Spacing - adding margin and padding to BOTTOM ONLY */
.mb-0 {margin: 0;}
.mb-xxs {margin-bottom: 0.25rem;}
.mb-xs {margin-bottom: 0.5rem;}
.mb-s {margin-bottom: 0.75rem;}
.mb-m {margin-bottom: 1rem;}
.mb-l {margin-bottom: 1.25rem;}
.mb-xl {margin-bottom: 1.50rem;}
.mb-xxl {margin-bottom: 3rem;}
.pb-xxs {padding-bottom: 0.25rem;}
.pb-xs {padding-bottom: 0.5rem;}
.pb-s {padding-bottom: 0.75rem;}
.pb-m {padding-bottom: 1rem;}
.pb-l {padding-bottom: 1.25rem;}
.pb-xl {padding-bottom: 1.50rem;}
.pb-xxl {padding-bottom: 3rem;}

/* Spacing - adding margin and padding to LEFT ONLY */
.ml-0 {margin: 0;}
.ml-xxs {margin-left: 0.25rem;}
.ml-xs {margin-left: 0.5rem;}
.ml-s {margin-left: 0.75rem;}
.ml-m {margin-left: 1rem;}
.ml-l {margin-left: 1.25rem;}
.ml-xl {margin-left: 1.50rem;}
.ml-xxl {margin-left: 3rem;}
.pl-xxs {padding-left: 0.25rem;}
.pl-xs {padding-left: 0.5rem;}
.pl-s {padding-left: 0.75rem;}
.pl-m {padding-left: 1rem;}
.pl-l {padding-left: 1.25rem;}
.pl-xl {padding-left: 1.50rem;}
.pl-xxl {padding-left: 3rem;}

/* Spacing - adding margin and padding to TOP AND BOTTOM ONLY */
.mtb-0 {margin: 0;}
.mtb-xxs {margin-top: 0.25rem;margin-bottom:0.25rem;}
.mtb-xs {margin-top: 0.5rem;margin-bottom:0.5rem;}
.mtb-s {margin-top: 0.75rem;margin-bottom:0.75rem;}
.mtb-m {margin-top: 1rem;margin-bottom:1rem;}
.mtb-l {margin-top: 1.25rem;margin-bottom:1.25rem;}
.mtb-xl {margin-top: 1.50rem;margin-bottom:1.50rem;}
.mtb-xxl {margin-top: 3rem;margin-bottom:3rem;}
.ptb-xxs {padding-top: 0.25rem;margin-bottom:0.25rem;}
.ptb-xs {padding-top: 0.5rem;margin-bottom:0.50rem;}
.ptb-s {padding-top: 0.75rem;margin-bottom:0.75rem;}
.ptb-m {padding-top: 1rem;margin-bottom:1rem;}
.ptb-l {padding-top: 1.25rem;margin-bottom:1.25rem;}
.ptb-xl {padding-top: 1.50rem;margin-bottom:1.50rem;}
.ptb-xxl {padding-top: 3rem;margin-bottom:3rem;}

/* Spacing - adding margin and padding to RIGHT AND LEFT ONLY */
.mrl-0 {margin: 0;}
.mrl-xxs {margin-right: 0.25rem;margin-left:0.25rem;}
.mrl-xs {margin-right: 0.5rem;margin-left:0.5rem;}
.mrl-s {margin-right: 0.75rem;margin-left:0.75rem;}
.mrl-m {margin-right: 1rem;margin-left:1rem;}
.mrl-l {margin-right: 1.25rem;margin-left:1.25rem;}
.mrl-xl {margin-right: 1.50rem;margin-left:1.50rem;}
.mrl-xxl {margin-right: 3rem;margin-left:3rem;}
.prl-xxs {padding-right: 0.25rem;padding-left:0.25rem;}
.prl-xs {padding-right: 0.5rem;padding-left:0.50rem;}
.prl-s {padding-right: 0.75rem;padding-left:0.75rem;}
.prl-m {padding-right: 1rem;padding-left:1rem;}
.prl-l {padding-right: 1.25rem;padding-left:1.25rem;}
.prl-xl {padding-right: 1.50rem;padding-left:1.50rem;}
.prl-xxl {padding-right: 3rem;padding-left:3rem;}