/* GENERAL CSS Layout */
.absolute { position: absolute; }
.relative { position: relative; }
.static { position: static; }
.fixed { position: fixed; }
.sticky { position: sticky; }

.left-0 { left: 0; }
.top-0 { top: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }

.min-height-fullscreen { min-height: calc(100lvh - var(--header-height)); } /* Only works if --header-height is known, otherwise I calculate it in main.js */
.width-full-pct { width: 100%; }
.width-full-vw { width: 100lvw; }
.height-full-pct { height: 100%; }
.height-full-vh { height: 100lvh; }
.width-auto { width: auto; }
.height-auto { height: auto; }

.background-main-color { background-color: var(--color1-80); }
.behind-everything { z-index: -999; }
.behind { z-index: -1; }
.stay-on-top { z-index: 1; }
.always-on-top { z-index: 999; }

.overflow-hidden { overflow: hidden; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-y-hidden { overflow-y: hidden; }

.horizontal-center { margin: 0 auto; }

.object-fit-contain { object-fit: contain; }
.object-fit-cover { object-fit: cover; }
.object-fit-fill { object-fit: fill; }
.object-fit-none { object-fit: none; }
.object-fit-scale-down { object-fit: scale-down; }




/* FLEX Properties */
.flex { display: flex; }
.flex-spacer { margin-left: auto; } /* TO DO: make this work vertically too */
.flex-wrap { flex-wrap: wrap; }
.row { flex-direction: row; }
.col { flex-direction: column; }
.row-reverse { flex-direction: row-reverse; }
.col-reverse { flex-direction: col-reverse; }

.flex-grow-0 { flex-grow: 0; }
.flex-grow-1 { flex-grow: 1; }
.flex-grow-2 { flex-grow: 2; }
.flex-grow-3 { flex-grow: 3; }
.flex-grow-4 { flex-grow: 4; }
.flex-grow-5 { flex-grow: 5; }
.flex-grow-6 { flex-grow: 6; }
.flex-grow-7 { flex-grow: 7; }
.flex-grow-8 { flex-grow: 8; }

.flex-shrink-0 { flex-shrink: 0; }
.flex-shrink-1 { flex-shrink: 1; }
.flex-shrink-2 { flex-shrink: 2; }
.flex-shrink-3 { flex-shrink: 3; }
.flex-shrink-4 { flex-shrink: 4; }
.flex-shrink-5 { flex-shrink: 5; }
.flex-shrink-6 { flex-shrink: 6; }
.flex-shrink-7 { flex-shrink: 7; }
.flex-shrink-8 { flex-shrink: 8; }

.wrap { flex-wrap: wrap; }
.nowrap { flex-wrap: nowrap; }
.wrap { flex-wrap: wrap; }
.nowrap { flex-wrap: nowrap; }

.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }

.align-items-start { align-items: flex-start; }
.align-items-center { align-items: center; }
.align-items-end { align-items: flex-end; }
.align-items-stretch { align-items: stretch; }
.align-items-baseline { align-items: baseline; }

.text-decoration-none { text-decoration: none; }
.list-decoration-none { list-style-type: none; }

.hidden { display: none !important; }
.visible { visibility: visible !important; }
.invisible { visibility: hidden !important; }


/* SPACING RULES */

/* SPACING RULES FOR .row */
/* PX */
.row.gap-xxxs-px { column-gap: var(--spacing-xxxs-px); }
.row.gap-xxs-px { column-gap: var(--spacing-xxs-px); }
.row.gap-xs-px { column-gap: var(--spacing-xs-px); }
.row.gap-s-px { column-gap: var(--spacing-s-px); }
.row.gap-m-px { column-gap: var(--spacing-m-px); }
.row.gap-l-px { column-gap: var(--spacing-l-px); }
.row.gap-xl-px { column-gap: var(--spacing-xl-px); }
.row.gap-xxl-px { column-gap: var(--spacing-xxl-px); }
.row.gap-xxxl-px { column-gap: var(--spacing-xxxl-px); }

/* EM */
.row.gap-xxxs-em { column-gap: var(--spacing-xxxs-em); }
.row.gap-xxs-em { column-gap: var(--spacing-xxs-em); }
.row.gap-xs-em { column-gap: var(--spacing-xs-em); }
.row.gap-s-em { column-gap: var(--spacing-s-em); }
.row.gap-m-em { column-gap: var(--spacing-m-em); }
.row.gap-l-em { column-gap: var(--spacing-l-em); }
.row.gap-xl-em { column-gap: var(--spacing-xl-em); }
.row.gap-xxl-em { column-gap: var(--spacing-xxl-em); }
.row.gap-xxxl-em { column-gap: var(--spacing-xxxl-em); }

/* REM */
.row.gap-xxxs-rem { column-gap: var(--spacing-xxxs-rem); }
.row.gap-xxs-rem { column-gap: var(--spacing-xxs-rem); }
.row.gap-xs-rem { column-gap: var(--spacing-xs-rem); }
.row.gap-s-rem { column-gap: var(--spacing-s-rem); }
.row.gap-m-rem { column-gap: var(--spacing-m-rem); }
.row.gap-l-rem { column-gap: var(--spacing-l-rem); }
.row.gap-xl-rem { column-gap: var(--spacing-xl-rem); }
.row.gap-xxl-rem { column-gap: var(--spacing-xxl-rem); }
.row.gap-xxxl-rem { column-gap: var(--spacing-xxxl-rem); }

/* PERCENTAGE */
.row.gap-xxxs-pct { column-gap: var(--spacing-xxxs-pct); }
.row.gap-xxs-pct { column-gap: var(--spacing-xxs-pct); }
.row.gap-xs-pct { column-gap: var(--spacing-xs-pct); }
.row.gap-s-pct { column-gap: var(--spacing-s-pct); }
.row.gap-m-pct { column-gap: var(--spacing-m-pct); }
.row.gap-l-pct { column-gap: var(--spacing-l-pct); }
.row.gap-xl-pct { column-gap: var(--spacing-xl-pct); }
.row.gap-xxl-pct { column-gap: var(--spacing-xxl-pct); }
.row.gap-xxxl-pct { column-gap: var(--spacing-xxxl-pct); }

/* VIEWPORT WIDTH (VW) */
.row.gap-xxxs-vw { column-gap: var(--spacing-xxxs-vw); }
.row.gap-xxs-vw { column-gap: var(--spacing-xxs-vw); }
.row.gap-xs-vw { column-gap: var(--spacing-xs-vw); }
.row.gap-s-vw { column-gap: var(--spacing-s-vw); }
.row.gap-m-vw { column-gap: var(--spacing-m-vw); }
.row.gap-l-vw { column-gap: var(--spacing-l-vw); }
.row.gap-xl-vw { column-gap: var(--spacing-xl-vw); }
.row.gap-xxl-vw { column-gap: var(--spacing-xxl-vw); }
.row.gap-xxxl-vw { column-gap: var(--spacing-xxxl-vw); }

/* VIEWPORT HEIGHT (VH) */
.row.gap-xxxs-vh { column-gap: var(--spacing-xxxs-vh); }
.row.gap-xxs-vh { column-gap: var(--spacing-xxs-vh); }
.row.gap-xs-vh { column-gap: var(--spacing-xs-vh); }
.row.gap-s-vh { column-gap: var(--spacing-s-vh); }
.row.gap-m-vh { column-gap: var(--spacing-m-vh); }
.row.gap-l-vh { column-gap: var(--spacing-l-vh); }
.row.gap-xl-vh { column-gap: var(--spacing-xl-vh); }
.row.gap-xxl-vh { column-gap: var(--spacing-xxl-vh); }
.row.gap-xxxl-vh { column-gap: var(--spacing-xxxl-vh); }




/* SPACING RULES FOR .col */
/* PX */
.col.gap-xxxs-px { row-gap: var(--spacing-xxxs-px); }
.col.gap-xxs-px { row-gap: var(--spacing-xxs-px); }
.col.gap-xs-px { row-gap: var(--spacing-xs-px); }
.col.gap-s-px { row-gap: var(--spacing-s-px); }
.col.gap-m-px { row-gap: var(--spacing-m-px); }
.col.gap-l-px { row-gap: var(--spacing-l-px); }
.col.gap-xl-px { row-gap: var(--spacing-xl-px); }
.col.gap-xxl-px { row-gap: var(--spacing-xxl-px); }
.col.gap-xxxl-px { row-gap: var(--spacing-xxxl-px); }

/* EM */
.col.gap-xxxs-em { row-gap: var(--spacing-xxxs-em); }
.col.gap-xxs-em { row-gap: var(--spacing-xxs-em); }
.col.gap-xs-em { row-gap: var(--spacing-xs-em); }
.col.gap-s-em { row-gap: var(--spacing-s-em); }
.col.gap-m-em { row-gap: var(--spacing-m-em); }
.col.gap-l-em { row-gap: var(--spacing-l-em); }
.col.gap-xl-em { row-gap: var(--spacing-xl-em); }
.col.gap-xxl-em { row-gap: var(--spacing-xxl-em); }
.col.gap-xxxl-em { row-gap: var(--spacing-xxxl-em); }

/* REM */
.col.gap-xxxs-rem { row-gap: var(--spacing-xxxs-rem); }
.col.gap-xxs-rem { row-gap: var(--spacing-xxs-rem); }
.col.gap-xs-rem { row-gap: var(--spacing-xs-rem); }
.col.gap-s-rem { row-gap: var(--spacing-s-rem); }
.col.gap-m-rem { row-gap: var(--spacing-m-rem); }
.col.gap-l-rem { row-gap: var(--spacing-l-rem); }
.col.gap-xl-rem { row-gap: var(--spacing-xl-rem); }
.col.gap-xxl-rem { row-gap: var(--spacing-xxl-rem); }
.col.gap-xxxl-rem { row-gap: var(--spacing-xxxl-rem); }

/* PERCENTAGE */
.col.gap-xxxs-pct { row-gap: var(--spacing-xxxs-pct); }
.col.gap-xxs-pct { row-gap: var(--spacing-xxs-pct); }
.col.gap-xs-pct { row-gap: var(--spacing-xs-pct); }
.col.gap-s-pct { row-gap: var(--spacing-s-pct); }
.col.gap-m-pct { row-gap: var(--spacing-m-pct); }
.col.gap-l-pct { row-gap: var(--spacing-l-pct); }
.col.gap-xl-pct { row-gap: var(--spacing-xl-pct); }
.col.gap-xxl-pct { row-gap: var(--spacing-xxl-pct); }
.col.gap-xxxl-pct { row-gap: var(--spacing-xxxl-pct); }

/* VIEWPORT WIDTH (VW) */
.col.gap-xxxs-vw { row-gap: var(--spacing-xxxs-vw); }
.col.gap-xxs-vw { row-gap: var(--spacing-xxs-vw); }
.col.gap-xs-vw { row-gap: var(--spacing-xs-vw); }
.col.gap-s-vw { row-gap: var(--spacing-s-vw); }
.col.gap-m-vw { row-gap: var(--spacing-m-vw); }
.col.gap-l-vw { row-gap: var(--spacing-l-vw); }
.col.gap-xl-vw { row-gap: var(--spacing-xl-vw); }
.col.gap-xxl-vw { row-gap: var(--spacing-xxl-vw); }
.col.gap-xxxl-vw { row-gap: var(--spacing-xxxl-vw); }

/* VIEWPORT HEIGHT (VH) */
.col.gap-xxxs-vh { row-gap: var(--spacing-xxxs-vh); }
.col.gap-xxs-vh { row-gap: var(--spacing-xxs-vh); }
.col.gap-xs-vh { row-gap: var(--spacing-xs-vh); }
.col.gap-s-vh { row-gap: var(--spacing-s-vh); }
.col.gap-m-vh { row-gap: var(--spacing-m-vh); }
.col.gap-l-vh { row-gap: var(--spacing-l-vh); }
.col.gap-xl-vh { row-gap: var(--spacing-xl-vh); }
.col.gap-xxl-vh { row-gap: var(--spacing-xxl-vh); }
.col.gap-xxxl-vh { row-gap: var(--spacing-xxxl-vh); }




/* HEIGHT RULES */
/* PX */
.height-xxxs-px { height: var(--spacing-xxxs-px); }
.height-xxs-px { height: var(--spacing-xxs-px); }
.height-xs-px { height: var(--spacing-xs-px); }
.height-s-px { height: var(--spacing-s-px); }
.height-m-px { height: var(--spacing-m-px); }
.height-l-px { height: var(--spacing-l-px); }
.height-xl-px { height: var(--spacing-xl-px); }
.height-xxl-px { height: var(--spacing-xxl-px); }
.height-xxxl-px { height: var(--spacing-xxxl-px); }

/* EM */
.height-xxxs-em { height: var(--spacing-xxxs-em); }
.height-xxs-em { height: var(--spacing-xxs-em); }
.height-xs-em { height: var(--spacing-xs-em); }
.height-s-em { height: var(--spacing-s-em); }
.height-m-em { height: var(--spacing-m-em); }
.height-l-em { height: var(--spacing-l-em); }
.height-xl-em { height: var(--spacing-xl-em); }
.height-xxl-em { height: var(--spacing-xxl-em); }
.height-xxxl-em { height: var(--spacing-xxxl-em); }

/* REM */
.height-xxxs-rem { height: var(--spacing-xxxs-rem); }
.height-xxs-rem { height: var(--spacing-xxs-rem); }
.height-xs-rem { height: var(--spacing-xs-rem); }
.height-s-rem { height: var(--spacing-s-rem); }
.height-m-rem { height: var(--spacing-m-rem); }
.height-l-rem { height: var(--spacing-l-rem); }
.height-xl-rem { height: var(--spacing-xl-rem); }
.height-xxl-rem { height: var(--spacing-xxl-rem); }
.height-xxxl-rem { height: var(--spacing-xxxl-rem); }

/* PERCENTAGE */
.height-xxxs-pct { height: var(--spacing-xxxs-pct); }
.height-xxs-pct { height: var(--spacing-xxs-pct); }
.height-xs-pct { height: var(--spacing-xs-pct); }
.height-s-pct { height: var(--spacing-s-pct); }
.height-m-pct { height: var(--spacing-m-pct); }
.height-l-pct { height: var(--spacing-l-pct); }
.height-xl-pct { height: var(--spacing-xl-pct); }
.height-xxl-pct { height: var(--spacing-xxl-pct); }
.height-xxxl-pct { height: var(--spacing-xxxl-pct); }

/* VIEWPORT WIDTH (VW) */
.height-xxxs-vw { height: var(--spacing-xxxs-vw); }
.height-xxs-vw { height: var(--spacing-xxs-vw); }
.height-xs-vw { height: var(--spacing-xs-vw); }
.height-s-vw { height: var(--spacing-s-vw); }
.height-m-vw { height: var(--spacing-m-vw); }
.height-l-vw { height: var(--spacing-l-vw); }
.height-xl-vw { height: var(--spacing-xl-vw); }
.height-xxl-vw { height: var(--spacing-xxl-vw); }
.height-xxxl-vw { height: var(--spacing-xxxl-vw); }

/* VIEWPORT HEIGHT (VH) */
.height-xxxs-vh { height: var(--spacing-xxxs-vh); }
.height-xxs-vh { height: var(--spacing-xxs-vh); }
.height-xs-vh { height: var(--spacing-xs-vh); }
.height-s-vh { height: var(--spacing-s-vh); }
.height-m-vh { height: var(--spacing-m-vh); }
.height-l-vh { height: var(--spacing-l-vh); }
.height-xl-vh { height: var(--spacing-xl-vh); }
.height-xxl-vh { height: var(--spacing-xxl-vh); }
.height-xxxl-vh { height: var(--spacing-xxxl-vh); }




/* WIDTH RULES */
/* PX */
.width-xxxs-px { width: var(--spacing-xxxs-px); }
.width-xxs-px { width: var(--spacing-xxs-px); }
.width-xs-px { width: var(--spacing-xs-px); }
.width-s-px { width: var(--spacing-s-px); }
.width-m-px { width: var(--spacing-m-px); }
.width-l-px { width: var(--spacing-l-px); }
.width-xl-px { width: var(--spacing-xl-px); }
.width-xxl-px { width: var(--spacing-xxl-px); }
.width-xxxl-px { width: var(--spacing-xxxl-px); }

/* EM */
.width-xxxs-em { width: var(--spacing-xxxs-em); }
.width-xxs-em { width: var(--spacing-xxs-em); }
.width-xs-em { width: var(--spacing-xs-em); }
.width-s-em { width: var(--spacing-s-em); }
.width-m-em { width: var(--spacing-m-em); }
.width-l-em { width: var(--spacing-l-em); }
.width-xl-em { width: var(--spacing-xl-em); }
.width-xxl-em { width: var(--spacing-xxl-em); }
.width-xxxl-em { width: var(--spacing-xxxl-em); }

/* REM */
.width-xxxs-rem { width: var(--spacing-xxxs-rem); }
.width-xxs-rem { width: var(--spacing-xxs-rem); }
.width-xs-rem { width: var(--spacing-xs-rem); }
.width-s-rem { width: var(--spacing-s-rem); }
.width-m-rem { width: var(--spacing-m-rem); }
.width-l-rem { width: var(--spacing-l-rem); }
.width-xl-rem { width: var(--spacing-xl-rem); }
.width-xxl-rem { width: var(--spacing-xxl-rem); }
.width-xxxl-rem { width: var(--spacing-xxxl-rem); }

/* PERCENTAGE */
.width-xxxs-pct { width: var(--spacing-xxxs-pct); }
.width-xxs-pct { width: var(--spacing-xxs-pct); }
.width-xs-pct { width: var(--spacing-xs-pct); }
.width-s-pct { width: var(--spacing-s-pct); }
.width-m-pct { width: var(--spacing-m-pct); }
.width-l-pct { width: var(--spacing-l-pct); }
.width-xl-pct { width: var(--spacing-xl-pct); }
.width-xxl-pct { width: var(--spacing-xxl-pct); }
.width-xxxl-pct { width: var(--spacing-xxxl-pct); }

/* VIEWPORT WIDTH (VW) */
.width-xxxs-vw { width: var(--spacing-xxxs-vw); }
.width-xxs-vw { width: var(--spacing-xxs-vw); }
.width-xs-vw { width: var(--spacing-xs-vw); }
.width-s-vw { width: var(--spacing-s-vw); }
.width-m-vw { width: var(--spacing-m-vw); }
.width-l-vw { width: var(--spacing-l-vw); }
.width-xl-vw { width: var(--spacing-xl-vw); }
.width-xxl-vw { width: var(--spacing-xxl-vw); }
.width-xxxl-vw { width: var(--spacing-xxxl-vw); }

/* VIEWPORT HEIGHT (VH) */
.width-xxxs-vh { width: var(--spacing-xxxs-vh); }
.width-xxs-vh { width: var(--spacing-xxs-vh); }
.width-xs-vh { width: var(--spacing-xs-vh); }
.width-s-vh { width: var(--spacing-s-vh); }
.width-m-vh { width: var(--spacing-m-vh); }
.width-l-vh { width: var(--spacing-l-vh); }
.width-xl-vh { width: var(--spacing-xl-vh); }
.width-xxl-vh { width: var(--spacing-xxl-vh); }
.width-xxxl-vh { width: var(--spacing-xxxl-vh); }




/* MARGIN RULES */
/* PX */
.margin-xxxs-px { margin: var(--spacing-xxxs-px); }
.margin-xxs-px { margin: var(--spacing-xxs-px); }
.margin-xs-px { margin: var(--spacing-xs-px); }
.margin-s-px { margin: var(--spacing-s-px); }
.margin-m-px { margin: var(--spacing-m-px); }
.margin-l-px { margin: var(--spacing-l-px); }
.margin-xl-px { margin: var(--spacing-xl-px); }
.margin-xxl-px { margin: var(--spacing-xxl-px); }
.margin-xxxl-px { margin: var(--spacing-xxxl-px); }

/* EM */
.margin-xxxs-em { margin: var(--spacing-xxxs-em); }
.margin-xxs-em { margin: var(--spacing-xxs-em); }
.margin-xs-em { margin: var(--spacing-xs-em); }
.margin-s-em { margin: var(--spacing-s-em); }
.margin-m-em { margin: var(--spacing-m-em); }
.margin-l-em { margin: var(--spacing-l-em); }
.margin-xl-em { margin: var(--spacing-xl-em); }
.margin-xxl-em { margin: var(--spacing-xxl-em); }
.margin-xxxl-em { margin: var(--spacing-xxxl-em); }

/* REM */
.margin-xxxs-rem { margin: var(--spacing-xxxs-rem); }
.margin-xxs-rem { margin: var(--spacing-xxs-rem); }
.margin-xs-rem { margin: var(--spacing-xs-rem); }
.margin-s-rem { margin: var(--spacing-s-rem); }
.margin-m-rem { margin: var(--spacing-m-rem); }
.margin-l-rem { margin: var(--spacing-l-rem); }
.margin-xl-rem { margin: var(--spacing-xl-rem); }
.margin-xxl-rem { margin: var(--spacing-xxl-rem); }
.margin-xxxl-rem { margin: var(--spacing-xxxl-rem); }

/* PERCENTAGE */
.margin-xxxs-pct { margin: var(--spacing-xxxs-pct); }
.margin-xxs-pct { margin: var(--spacing-xxs-pct); }
.margin-xs-pct { margin: var(--spacing-xs-pct); }
.margin-s-pct { margin: var(--spacing-s-pct); }
.margin-m-pct { margin: var(--spacing-m-pct); }
.margin-l-pct { margin: var(--spacing-l-pct); }
.margin-xl-pct { margin: var(--spacing-xl-pct); }
.margin-xxl-pct { margin: var(--spacing-xxl-pct); }
.margin-xxxl-pct { margin: var(--spacing-xxxl-pct); }

/* VIEWPORT WIDTH (VW) */
.margin-xxxs-vw { margin: var(--spacing-xxxs-vw); }
.margin-xxs-vw { margin: var(--spacing-xxs-vw); }
.margin-xs-vw { margin: var(--spacing-xs-vw); }
.margin-s-vw { margin: var(--spacing-s-vw); }
.margin-m-vw { margin: var(--spacing-m-vw); }
.margin-l-vw { margin: var(--spacing-l-vw); }
.margin-xl-vw { margin: var(--spacing-xl-vw); }
.margin-xxl-vw { margin: var(--spacing-xxl-vw); }
.margin-xxxl-vw { margin: var(--spacing-xxxl-vw); }

/* VIEWPORT HEIGHT (VH) */
.margin-xxxs-vh { margin: var(--spacing-xxxs-vh); }
.margin-xxs-vh { margin: var(--spacing-xxs-vh); }
.margin-xs-vh { margin: var(--spacing-xs-vh); }
.margin-s-vh { margin: var(--spacing-s-vh); }
.margin-m-vh { margin: var(--spacing-m-vh); }
.margin-l-vh { margin: var(--spacing-l-vh); }
.margin-xl-vh { margin: var(--spacing-xl-vh); }
.margin-xxl-vh { margin: var(--spacing-xxl-vh); }
.margin-xxxl-vh { margin: var(--spacing-xxxl-vh); }




/* MARGIN-LEFT RULES */
/* PX */
.margin-left-xxxs-px { margin-left: var(--spacing-xxxs-px); }
.margin-left-xxs-px { margin-left: var(--spacing-xxs-px); }
.margin-left-xs-px { margin-left: var(--spacing-xs-px); }
.margin-left-s-px { margin-left: var(--spacing-s-px); }
.margin-left-m-px { margin-left: var(--spacing-m-px); }
.margin-left-l-px { margin-left: var(--spacing-l-px); }
.margin-left-xl-px { margin-left: var(--spacing-xl-px); }
.margin-left-xxl-px { margin-left: var(--spacing-xxl-px); }
.margin-left-xxxl-px { margin-left: var(--spacing-xxxl-px); }

/* EM */
.margin-left-xxxs-em { margin-left: var(--spacing-xxxs-em); }
.margin-left-xxs-em { margin-left: var(--spacing-xxs-em); }
.margin-left-xs-em { margin-left: var(--spacing-xs-em); }
.margin-left-s-em { margin-left: var(--spacing-s-em); }
.margin-left-m-em { margin-left: var(--spacing-m-em); }
.margin-left-l-em { margin-left: var(--spacing-l-em); }
.margin-left-xl-em { margin-left: var(--spacing-xl-em); }
.margin-left-xxl-em { margin-left: var(--spacing-xxl-em); }
.margin-left-xxxl-em { margin-left: var(--spacing-xxxl-em); }

/* REM */
.margin-left-xxxs-rem { margin-left: var(--spacing-xxxs-rem); }
.margin-left-xxs-rem { margin-left: var(--spacing-xxs-rem); }
.margin-left-xs-rem { margin-left: var(--spacing-xs-rem); }
.margin-left-s-rem { margin-left: var(--spacing-s-rem); }
.margin-left-m-rem { margin-left: var(--spacing-m-rem); }
.margin-left-l-rem { margin-left: var(--spacing-l-rem); }
.margin-left-xl-rem { margin-left: var(--spacing-xl-rem); }
.margin-left-xxl-rem { margin-left: var(--spacing-xxl-rem); }
.margin-left-xxxl-rem { margin-left: var(--spacing-xxxl-rem); }

/* PERCENTAGE */
.margin-left-xxxs-pct { margin-left: var(--spacing-xxxs-pct); }
.margin-left-xxs-pct { margin-left: var(--spacing-xxs-pct); }
.margin-left-xs-pct { margin-left: var(--spacing-xs-pct); }
.margin-left-s-pct { margin-left: var(--spacing-s-pct); }
.margin-left-m-pct { margin-left: var(--spacing-m-pct); }
.margin-left-l-pct { margin-left: var(--spacing-l-pct); }
.margin-left-xl-pct { margin-left: var(--spacing-xl-pct); }
.margin-left-xxl-pct { margin-left: var(--spacing-xxl-pct); }
.margin-left-xxxl-pct { margin-left: var(--spacing-xxxl-pct); }

/* VIEWPORT WIDTH (VW) */
.margin-left-xxxs-vw { margin-left: var(--spacing-xxxs-vw); }
.margin-left-xxs-vw { margin-left: var(--spacing-xxs-vw); }
.margin-left-xs-vw { margin-left: var(--spacing-xs-vw); }
.margin-left-s-vw { margin-left: var(--spacing-s-vw); }
.margin-left-m-vw { margin-left: var(--spacing-m-vw); }
.margin-left-l-vw { margin-left: var(--spacing-l-vw); }
.margin-left-xl-vw { margin-left: var(--spacing-xl-vw); }
.margin-left-xxl-vw { margin-left: var(--spacing-xxl-vw); }
.margin-left-xxxl-vw { margin-left: var(--spacing-xxxl-vw); }

/* VIEWPORT HEIGHT (VH) */
.margin-left-xxxs-vh { margin-left: var(--spacing-xxxs-vh); }
.margin-left-xxs-vh { margin-left: var(--spacing-xxs-vh); }
.margin-left-xs-vh { margin-left: var(--spacing-xs-vh); }
.margin-left-s-vh { margin-left: var(--spacing-s-vh); }
.margin-left-m-vh { margin-left: var(--spacing-m-vh); }
.margin-left-l-vh { margin-left: var(--spacing-l-vh); }
.margin-left-xl-vh { margin-left: var(--spacing-xl-vh); }
.margin-left-xxl-vh { margin-left: var(--spacing-xxl-vh); }
.margin-left-xxxl-vh { margin-left: var(--spacing-xxxl-vh); }




/* MARGIN-TOP RULES */
/* PX */
.margin-top-xxxs-px { margin-top: var(--spacing-xxxs-px); }
.margin-top-xxs-px { margin-top: var(--spacing-xxs-px); }
.margin-top-xs-px { margin-top: var(--spacing-xs-px); }
.margin-top-s-px { margin-top: var(--spacing-s-px); }
.margin-top-m-px { margin-top: var(--spacing-m-px); }
.margin-top-l-px { margin-top: var(--spacing-l-px); }
.margin-top-xl-px { margin-top: var(--spacing-xl-px); }
.margin-top-xxl-px { margin-top: var(--spacing-xxl-px); }
.margin-top-xxxl-px { margin-top: var(--spacing-xxxl-px); }

/* EM */
.margin-top-xxxs-em { margin-top: var(--spacing-xxxs-em); }
.margin-top-xxs-em { margin-top: var(--spacing-xxs-em); }
.margin-top-xs-em { margin-top: var(--spacing-xs-em); }
.margin-top-s-em { margin-top: var(--spacing-s-em); }
.margin-top-m-em { margin-top: var(--spacing-m-em); }
.margin-top-l-em { margin-top: var(--spacing-l-em); }
.margin-top-xl-em { margin-top: var(--spacing-xl-em); }
.margin-top-xxl-em { margin-top: var(--spacing-xxl-em); }
.margin-top-xxxl-em { margin-top: var(--spacing-xxxl-em); }

/* REM */
.margin-top-xxxs-rem { margin-top: var(--spacing-xxxs-rem); }
.margin-top-xxs-rem { margin-top: var(--spacing-xxs-rem); }
.margin-top-xs-rem { margin-top: var(--spacing-xs-rem); }
.margin-top-s-rem { margin-top: var(--spacing-s-rem); }
.margin-top-m-rem { margin-top: var(--spacing-m-rem); }
.margin-top-l-rem { margin-top: var(--spacing-l-rem); }
.margin-top-xl-rem { margin-top: var(--spacing-xl-rem); }
.margin-top-xxl-rem { margin-top: var(--spacing-xxl-rem); }
.margin-top-xxxl-rem { margin-top: var(--spacing-xxxl-rem); }

/* PERCENTAGE */
.margin-top-xxxs-pct { margin-top: var(--spacing-xxxs-pct); }
.margin-top-xxs-pct { margin-top: var(--spacing-xxs-pct); }
.margin-top-xs-pct { margin-top: var(--spacing-xs-pct); }
.margin-top-s-pct { margin-top: var(--spacing-s-pct); }
.margin-top-m-pct { margin-top: var(--spacing-m-pct); }
.margin-top-l-pct { margin-top: var(--spacing-l-pct); }
.margin-top-xl-pct { margin-top: var(--spacing-xl-pct); }
.margin-top-xxl-pct { margin-top: var(--spacing-xxl-pct); }
.margin-top-xxxl-pct { margin-top: var(--spacing-xxxl-pct); }

/* VIEWPORT WIDTH (VW) */
.margin-top-xxxs-vw { margin-top: var(--spacing-xxxs-vw); }
.margin-top-xxs-vw { margin-top: var(--spacing-xxs-vw); }
.margin-top-xs-vw { margin-top: var(--spacing-xs-vw); }
.margin-top-s-vw { margin-top: var(--spacing-s-vw); }
.margin-top-m-vw { margin-top: var(--spacing-m-vw); }
.margin-top-l-vw { margin-top: var(--spacing-l-vw); }
.margin-top-xl-vw { margin-top: var(--spacing-xl-vw); }
.margin-top-xxl-vw { margin-top: var(--spacing-xxl-vw); }
.margin-top-xxxl-vw { margin-top: var(--spacing-xxxl-vw); }

/* VIEWPORT HEIGHT (VH) */
.margin-top-xxxs-vh { margin-top: var(--spacing-xxxs-vh); }
.margin-top-xxs-vh { margin-top: var(--spacing-xxs-vh); }
.margin-top-xs-vh { margin-top: var(--spacing-xs-vh); }
.margin-top-s-vh { margin-top: var(--spacing-s-vh); }
.margin-top-m-vh { margin-top: var(--spacing-m-vh); }
.margin-top-l-vh { margin-top: var(--spacing-l-vh); }
.margin-top-xl-vh { margin-top: var(--spacing-xl-vh); }
.margin-top-xxl-vh { margin-top: var(--spacing-xxl-vh); }
.margin-top-xxxl-vh { margin-top: var(--spacing-xxxl-vh); }




/* MARGIN-RIGHT RULES */
/* PX */
.margin-right-xxxs-px { margin-right: var(--spacing-xxxs-px); }
.margin-right-xxs-px { margin-right: var(--spacing-xxs-px); }
.margin-right-xs-px { margin-right: var(--spacing-xs-px); }
.margin-right-s-px { margin-right: var(--spacing-s-px); }
.margin-right-m-px { margin-right: var(--spacing-m-px); }
.margin-right-l-px { margin-right: var(--spacing-l-px); }
.margin-right-xl-px { margin-right: var(--spacing-xl-px); }
.margin-right-xxl-px { margin-right: var(--spacing-xxl-px); }
.margin-right-xxxl-px { margin-right: var(--spacing-xxxl-px); }

/* EM */
.margin-right-xxxs-em { margin-right: var(--spacing-xxxs-em); }
.margin-right-xxs-em { margin-right: var(--spacing-xxs-em); }
.margin-right-xs-em { margin-right: var(--spacing-xs-em); }
.margin-right-s-em { margin-right: var(--spacing-s-em); }
.margin-right-m-em { margin-right: var(--spacing-m-em); }
.margin-right-l-em { margin-right: var(--spacing-l-em); }
.margin-right-xl-em { margin-right: var(--spacing-xl-em); }
.margin-right-xxl-em { margin-right: var(--spacing-xxl-em); }
.margin-right-xxxl-em { margin-right: var(--spacing-xxxl-em); }

/* REM */
.margin-right-xxxs-rem { margin-right: var(--spacing-xxxs-rem); }
.margin-right-xxs-rem { margin-right: var(--spacing-xxs-rem); }
.margin-right-xs-rem { margin-right: var(--spacing-xs-rem); }
.margin-right-s-rem { margin-right: var(--spacing-s-rem); }
.margin-right-m-rem { margin-right: var(--spacing-m-rem); }
.margin-right-l-rem { margin-right: var(--spacing-l-rem); }
.margin-right-xl-rem { margin-right: var(--spacing-xl-rem); }
.margin-right-xxl-rem { margin-right: var(--spacing-xxl-rem); }
.margin-right-xxxl-rem { margin-right: var(--spacing-xxxl-rem); }

/* PERCENTAGE */
.margin-right-xxxs-pct { margin-right: var(--spacing-xxxs-pct); }
.margin-right-xxs-pct { margin-right: var(--spacing-xxs-pct); }
.margin-right-xs-pct { margin-right: var(--spacing-xs-pct); }
.margin-right-s-pct { margin-right: var(--spacing-s-pct); }
.margin-right-m-pct { margin-right: var(--spacing-m-pct); }
.margin-right-l-pct { margin-right: var(--spacing-l-pct); }
.margin-right-xl-pct { margin-right: var(--spacing-xl-pct); }
.margin-right-xxl-pct { margin-right: var(--spacing-xxl-pct); }
.margin-right-xxxl-pct { margin-right: var(--spacing-xxxl-pct); }

/* VIEWPORT WIDTH (VW) */
.margin-right-xxxs-vw { margin-right: var(--spacing-xxxs-vw); }
.margin-right-xxs-vw { margin-right: var(--spacing-xxs-vw); }
.margin-right-xs-vw { margin-right: var(--spacing-xs-vw); }
.margin-right-s-vw { margin-right: var(--spacing-s-vw); }
.margin-right-m-vw { margin-right: var(--spacing-m-vw); }
.margin-right-l-vw { margin-right: var(--spacing-l-vw); }
.margin-right-xl-vw { margin-right: var(--spacing-xl-vw); }
.margin-right-xxl-vw { margin-right: var(--spacing-xxl-vw); }
.margin-right-xxxl-vw { margin-right: var(--spacing-xxxl-vw); }

/* VIEWPORT HEIGHT (VH) */
.margin-right-xxxs-vh { margin-right: var(--spacing-xxxs-vh); }
.margin-right-xxs-vh { margin-right: var(--spacing-xxs-vh); }
.margin-right-xs-vh { margin-right: var(--spacing-xs-vh); }
.margin-right-s-vh { margin-right: var(--spacing-s-vh); }
.margin-right-m-vh { margin-right: var(--spacing-m-vh); }
.margin-right-l-vh { margin-right: var(--spacing-l-vh); }
.margin-right-xl-vh { margin-right: var(--spacing-xl-vh); }
.margin-right-xxl-vh { margin-right: var(--spacing-xxl-vh); }
.margin-right-xxxl-vh { margin-right: var(--spacing-xxxl-vh); }




/* MARGIN-BOTTOM RULES */
/* PX */
.margin-bottom-xxxs-px { margin-bottom: var(--spacing-xxxs-px); }
.margin-bottom-xxs-px { margin-bottom: var(--spacing-xxs-px); }
.margin-bottom-xs-px { margin-bottom: var(--spacing-xs-px); }
.margin-bottom-s-px { margin-bottom: var(--spacing-s-px); }
.margin-bottom-m-px { margin-bottom: var(--spacing-m-px); }
.margin-bottom-l-px { margin-bottom: var(--spacing-l-px); }
.margin-bottom-xl-px { margin-bottom: var(--spacing-xl-px); }
.margin-bottom-xxl-px { margin-bottom: var(--spacing-xxl-px); }
.margin-bottom-xxxl-px { margin-bottom: var(--spacing-xxxl-px); }

/* EM */
.margin-bottom-xxxs-em { margin-bottom: var(--spacing-xxxs-em); }
.margin-bottom-xxs-em { margin-bottom: var(--spacing-xxs-em); }
.margin-bottom-xs-em { margin-bottom: var(--spacing-xs-em); }
.margin-bottom-s-em { margin-bottom: var(--spacing-s-em); }
.margin-bottom-m-em { margin-bottom: var(--spacing-m-em); }
.margin-bottom-l-em { margin-bottom: var(--spacing-l-em); }
.margin-bottom-xl-em { margin-bottom: var(--spacing-xl-em); }
.margin-bottom-xxl-em { margin-bottom: var(--spacing-xxl-em); }
.margin-bottom-xxxl-em { margin-bottom: var(--spacing-xxxl-em); }

/* REM */
.margin-bottom-xxxs-rem { margin-bottom: var(--spacing-xxxs-rem); }
.margin-bottom-xxs-rem { margin-bottom: var(--spacing-xxs-rem); }
.margin-bottom-xs-rem { margin-bottom: var(--spacing-xs-rem); }
.margin-bottom-s-rem { margin-bottom: var(--spacing-s-rem); }
.margin-bottom-m-rem { margin-bottom: var(--spacing-m-rem); }
.margin-bottom-l-rem { margin-bottom: var(--spacing-l-rem); }
.margin-bottom-xl-rem { margin-bottom: var(--spacing-xl-rem); }
.margin-bottom-xxl-rem { margin-bottom: var(--spacing-xxl-rem); }
.margin-bottom-xxxl-rem { margin-bottom: var(--spacing-xxxl-rem); }

/* PERCENTAGE */
.margin-bottom-xxxs-pct { margin-bottom: var(--spacing-xxxs-pct); }
.margin-bottom-xxs-pct { margin-bottom: var(--spacing-xxs-pct); }
.margin-bottom-xs-pct { margin-bottom: var(--spacing-xs-pct); }
.margin-bottom-s-pct { margin-bottom: var(--spacing-s-pct); }
.margin-bottom-m-pct { margin-bottom: var(--spacing-m-pct); }
.margin-bottom-l-pct { margin-bottom: var(--spacing-l-pct); }
.margin-bottom-xl-pct { margin-bottom: var(--spacing-xl-pct); }
.margin-bottom-xxl-pct { margin-bottom: var(--spacing-xxl-pct); }
.margin-bottom-xxxl-pct { margin-bottom: var(--spacing-xxxl-pct); }

/* VIEWPORT WIDTH (VW) */
.margin-bottom-xxxs-vw { margin-bottom: var(--spacing-xxxs-vw); }
.margin-bottom-xxs-vw { margin-bottom: var(--spacing-xxs-vw); }
.margin-bottom-xs-vw { margin-bottom: var(--spacing-xs-vw); }
.margin-bottom-s-vw { margin-bottom: var(--spacing-s-vw); }
.margin-bottom-m-vw { margin-bottom: var(--spacing-m-vw); }
.margin-bottom-l-vw { margin-bottom: var(--spacing-l-vw); }
.margin-bottom-xl-vw { margin-bottom: var(--spacing-xl-vw); }
.margin-bottom-xxl-vw { margin-bottom: var(--spacing-xxl-vw); }
.margin-bottom-xxxl-vw { margin-bottom: var(--spacing-xxxl-vw); }

/* VIEWPORT HEIGHT (VH) */
.margin-bottom-xxxs-vh { margin-bottom: var(--spacing-xxxs-vh); }
.margin-bottom-xxs-vh { margin-bottom: var(--spacing-xxs-vh); }
.margin-bottom-xs-vh { margin-bottom: var(--spacing-xs-vh); }
.margin-bottom-s-vh { margin-bottom: var(--spacing-s-vh); }
.margin-bottom-m-vh { margin-bottom: var(--spacing-m-vh); }
.margin-bottom-l-vh { margin-bottom: var(--spacing-l-vh); }
.margin-bottom-xl-vh { margin-bottom: var(--spacing-xl-vh); }
.margin-bottom-xxl-vh { margin-bottom: var(--spacing-xxl-vh); }
.margin-bottom-xxxl-vh { margin-bottom: var(--spacing-xxxl-vh); }




/* MARGIN HORIZONTAL RULES */
/* PX */
.margin-horizontal-xxxs-px { margin-left: var(--spacing-xxxs-px); margin-right: var(--spacing-xxxs-px); }
.margin-horizontal-xxs-px { margin-left: var(--spacing-xxs-px); margin-right: var(--spacing-xxs-px); }
.margin-horizontal-xs-px { margin-left: var(--spacing-xs-px); margin-right: var(--spacing-xs-px); }
.margin-horizontal-s-px { margin-left: var(--spacing-s-px); margin-right: var(--spacing-s-px); }
.margin-horizontal-m-px { margin-left: var(--spacing-m-px); margin-right: var(--spacing-m-px); }
.margin-horizontal-l-px { margin-left: var(--spacing-l-px); margin-right: var(--spacing-l-px); }
.margin-horizontal-xl-px { margin-left: var(--spacing-xl-px); margin-right: var(--spacing-xl-px); }
.margin-horizontal-xxl-px { margin-left: var(--spacing-xxl-px); margin-right: var(--spacing-xxl-px); }
.margin-horizontal-xxxl-px { margin-left: var(--spacing-xxxl-px); margin-right: var(--spacing-xxxl-px); }

/* EM */
.margin-horizontal-xxxs-em { margin-left: var(--spacing-xxxs-em); margin-right: var(--spacing-xxxs-em); }
.margin-horizontal-xxs-em { margin-left: var(--spacing-xxs-em); margin-right: var(--spacing-xxs-em); }
.margin-horizontal-xs-em { margin-left: var(--spacing-xs-em); margin-right: var(--spacing-xs-em); }
.margin-horizontal-s-em { margin-left: var(--spacing-s-em); margin-right: var(--spacing-s-em); }
.margin-horizontal-m-em { margin-left: var(--spacing-m-em); margin-right: var(--spacing-m-em); }
.margin-horizontal-l-em { margin-left: var(--spacing-l-em); margin-right: var(--spacing-l-em); }
.margin-horizontal-xl-em { margin-left: var(--spacing-xl-em); margin-right: var(--spacing-xl-em); }
.margin-horizontal-xxl-em { margin-left: var(--spacing-xxl-em); margin-right: var(--spacing-xxl-em); }
.margin-horizontal-xxxl-em { margin-left: var(--spacing-xxxl-em); margin-right: var(--spacing-xxxl-em); }

/* REM */
.margin-horizontal-xxxs-rem { margin-left: var(--spacing-xxxs-rem); margin-right: var(--spacing-xxxs-rem); }
.margin-horizontal-xxs-rem { margin-left: var(--spacing-xxs-rem); margin-right: var(--spacing-xxs-rem); }
.margin-horizontal-xs-rem { margin-left: var(--spacing-xs-rem); margin-right: var(--spacing-xs-rem); }
.margin-horizontal-s-rem { margin-left: var(--spacing-s-rem); margin-right: var(--spacing-s-rem); }
.margin-horizontal-m-rem { margin-left: var(--spacing-m-rem); margin-right: var(--spacing-m-rem); }
.margin-horizontal-l-rem { margin-left: var(--spacing-l-rem); margin-right: var(--spacing-l-rem); }
.margin-horizontal-xl-rem { margin-left: var(--spacing-xl-rem); margin-right: var(--spacing-xl-rem); }
.margin-horizontal-xxl-rem { margin-left: var(--spacing-xxl-rem); margin-right: var(--spacing-xxl-rem); }
.margin-horizontal-xxxl-rem { margin-left: var(--spacing-xxxl-rem); margin-right: var(--spacing-xxxl-rem); }

/* PERCENTAGE */
.margin-horizontal-xxxs-pct { margin-left: var(--spacing-xxxs-pct); margin-right: var(--spacing-xxxs-pct); }
.margin-horizontal-xxs-pct { margin-left: var(--spacing-xxs-pct); margin-right: var(--spacing-xxs-pct); }
.margin-horizontal-xs-pct { margin-left: var(--spacing-xs-pct); margin-right: var(--spacing-xs-pct); }
.margin-horizontal-s-pct { margin-left: var(--spacing-s-pct); margin-right: var(--spacing-s-pct); }
.margin-horizontal-m-pct { margin-left: var(--spacing-m-pct); margin-right: var(--spacing-m-pct); }
.margin-horizontal-l-pct { margin-left: var(--spacing-l-pct); margin-right: var(--spacing-l-pct); }
.margin-horizontal-xl-pct { margin-left: var(--spacing-xl-pct); margin-right: var(--spacing-xl-pct); }
.margin-horizontal-xxl-pct { margin-left: var(--spacing-xxl-pct); margin-right: var(--spacing-xxl-pct); }
.margin-horizontal-xxxl-pct { margin-left: var(--spacing-xxxl-pct); margin-right: var(--spacing-xxxl-pct); }

/* VIEWPORT WIDTH (VW) */
.margin-horizontal-xxxs-vw { margin-left: var(--spacing-xxxs-vw); margin-right: var(--spacing-xxxs-vw); }
.margin-horizontal-xxs-vw { margin-left: var(--spacing-xxs-vw); margin-right: var(--spacing-xxs-vw); }
.margin-horizontal-xs-vw { margin-left: var(--spacing-xs-vw); margin-right: var(--spacing-xs-vw); }
.margin-horizontal-s-vw { margin-left: var(--spacing-s-vw); margin-right: var(--spacing-s-vw); }
.margin-horizontal-m-vw { margin-left: var(--spacing-m-vw); margin-right: var(--spacing-m-vw); }
.margin-horizontal-l-vw { margin-left: var(--spacing-l-vw); margin-right: var(--spacing-l-vw); }
.margin-horizontal-xl-vw { margin-left: var(--spacing-xl-vw); margin-right: var(--spacing-xl-vw); }
.margin-horizontal-xxl-vw { margin-left: var(--spacing-xxl-vw); margin-right: var(--spacing-xxl-vw); }
.margin-horizontal-xxxl-vw { margin-left: var(--spacing-xxxl-vw); margin-right: var(--spacing-xxxl-vw); }

/* VIEWPORT HEIGHT (VH) */
.margin-horizontal-xxxs-vh { margin-left: var(--spacing-xxxs-vh); margin-right: var(--spacing-xxxs-vh); }
.margin-horizontal-xxs-vh { margin-left: var(--spacing-xxs-vh); margin-right: var(--spacing-xxs-vh); }
.margin-horizontal-xs-vh { margin-left: var(--spacing-xs-vh); margin-right: var(--spacing-xs-vh); }
.margin-horizontal-s-vh { margin-left: var(--spacing-s-vh); margin-right: var(--spacing-s-vh); }
.margin-horizontal-m-vh { margin-left: var(--spacing-m-vh); margin-right: var(--spacing-m-vh); }
.margin-horizontal-l-vh { margin-left: var(--spacing-l-vh); margin-right: var(--spacing-l-vh); }
.margin-horizontal-xl-vh { margin-left: var(--spacing-xl-vh); margin-right: var(--spacing-xl-vh); }
.margin-horizontal-xxl-vh { margin-left: var(--spacing-xxl-vh); margin-right: var(--spacing-xxl-vh); }
.margin-horizontal-xxxl-vh { margin-left: var(--spacing-xxxl-vh); margin-right: var(--spacing-xxxl-vh); }




/* MARGIN VERTICAL RULES */
.margin-vertical-xxxs-px { margin-top: var(--spacing-xxxs-px); margin-bottom: var(--spacing-xxxs-px); }
.margin-vertical-xxs-px { margin-top: var(--spacing-xxs-px); margin-bottom: var(--spacing-xxs-px); }
.margin-vertical-xs-px { margin-top: var(--spacing-xs-px); margin-bottom: var(--spacing-xs-px); }
.margin-vertical-s-px { margin-top: var(--spacing-s-px); margin-bottom: var(--spacing-s-px); }
.margin-vertical-m-px { margin-top: var(--spacing-m-px); margin-bottom: var(--spacing-m-px); }
.margin-vertical-l-px { margin-top: var(--spacing-l-px); margin-bottom: var(--spacing-l-px); }
.margin-vertical-xl-px { margin-top: var(--spacing-xl-px); margin-bottom: var(--spacing-xl-px); }
.margin-vertical-xxl-px { margin-top: var(--spacing-xxl-px); margin-bottom: var(--spacing-xxl-px); }
.margin-vertical-xxxl-px { margin-top: var(--spacing-xxxl-px); margin-bottom: var(--spacing-xxxl-px); }

.margin-vertical-xxxs-em { margin-top: var(--spacing-xxxs-em); margin-bottom: var(--spacing-xxxs-em); }
.margin-vertical-xxs-em { margin-top: var(--spacing-xxs-em); margin-bottom: var(--spacing-xxs-em); }
.margin-vertical-xs-em { margin-top: var(--spacing-xs-em); margin-bottom: var(--spacing-xs-em); }
.margin-vertical-s-em { margin-top: var(--spacing-s-em); margin-bottom: var(--spacing-s-em); }
.margin-vertical-m-em { margin-top: var(--spacing-m-em); margin-bottom: var(--spacing-m-em); }
.margin-vertical-l-em { margin-top: var(--spacing-l-em); margin-bottom: var(--spacing-l-em); }
.margin-vertical-xl-em { margin-top: var(--spacing-xl-em); margin-bottom: var(--spacing-xl-em); }
.margin-vertical-xxl-em { margin-top: var(--spacing-xxl-em); margin-bottom: var(--spacing-xxl-em); }
.margin-vertical-xxxl-em { margin-top: var(--spacing-xxxl-em); margin-bottom: var(--spacing-xxxl-em); }

.margin-vertical-xxxs-rem { margin-top: var(--spacing-xxxs-rem); margin-bottom: var(--spacing-xxxs-rem); }
.margin-vertical-xxs-rem { margin-top: var(--spacing-xxs-rem); margin-bottom: var(--spacing-xxs-rem); }
.margin-vertical-xs-rem { margin-top: var(--spacing-xs-rem); margin-bottom: var(--spacing-xs-rem); }
.margin-vertical-s-rem { margin-top: var(--spacing-s-rem); margin-bottom: var(--spacing-s-rem); }
.margin-vertical-m-rem { margin-top: var(--spacing-m-rem); margin-bottom: var(--spacing-m-rem); }
.margin-vertical-l-rem { margin-top: var(--spacing-l-rem); margin-bottom: var(--spacing-l-rem); }
.margin-vertical-xl-rem { margin-top: var(--spacing-xl-rem); margin-bottom: var(--spacing-xl-rem); }
.margin-vertical-xxl-rem { margin-top: var(--spacing-xxl-rem); margin-bottom: var(--spacing-xxl-rem); }
.margin-vertical-xxxl-rem { margin-top: var(--spacing-xxxl-rem); margin-bottom: var(--spacing-xxxl-rem); }

.margin-vertical-xxxs-pct { margin-top: var(--spacing-xxxs-pct); margin-bottom: var(--spacing-xxxs-pct); }
.margin-vertical-xxs-pct { margin-top: var(--spacing-xxs-pct); margin-bottom: var(--spacing-xxs-pct); }
.margin-vertical-xs-pct { margin-top: var(--spacing-xs-pct); margin-bottom: var(--spacing-xs-pct); }
.margin-vertical-s-pct { margin-top: var(--spacing-s-pct); margin-bottom: var(--spacing-s-pct); }
.margin-vertical-m-pct { margin-top: var(--spacing-m-pct); margin-bottom: var(--spacing-m-pct); }
.margin-vertical-l-pct { margin-top: var(--spacing-l-pct); margin-bottom: var(--spacing-l-pct); }
.margin-vertical-xl-pct { margin-top: var(--spacing-xl-pct); margin-bottom: var(--spacing-xl-pct); }
.margin-vertical-xxl-pct { margin-top: var(--spacing-xxl-pct); margin-bottom: var(--spacing-xxl-pct); }
.margin-vertical-xxxl-pct { margin-top: var(--spacing-xxxl-pct); margin-bottom: var(--spacing-xxxl-pct); }

.margin-vertical-xxxs-vw { margin-top: var(--spacing-xxxs-vw); margin-bottom: var(--spacing-xxxs-vw); }
.margin-vertical-xxs-vw { margin-top: var(--spacing-xxs-vw); margin-bottom: var(--spacing-xxs-vw); }
.margin-vertical-xs-vw { margin-top: var(--spacing-xs-vw); margin-bottom: var(--spacing-xs-vw); }
.margin-vertical-s-vw { margin-top: var(--spacing-s-vw); margin-bottom: var(--spacing-s-vw); }
.margin-vertical-m-vw { margin-top: var(--spacing-m-vw); margin-bottom: var(--spacing-m-vw); }
.margin-vertical-l-vw { margin-top: var(--spacing-l-vw); margin-bottom: var(--spacing-l-vw); }
.margin-vertical-xl-vw { margin-top: var(--spacing-xl-vw); margin-bottom: var(--spacing-xl-vw); }
.margin-vertical-xxl-vw { margin-top: var(--spacing-xxl-vw); margin-bottom: var(--spacing-xxl-vw); }
.margin-vertical-xxxl-vw { margin-top: var(--spacing-xxxl-vw); margin-bottom: var(--spacing-xxxl-vw); }

.margin-vertical-xxxs-vh { margin-top: var(--spacing-xxxs-vh); margin-bottom: var(--spacing-xxxs-vh); }
.margin-vertical-xxs-vh { margin-top: var(--spacing-xxs-vh); margin-bottom: var(--spacing-xxs-vh); }
.margin-vertical-xs-vh { margin-top: var(--spacing-xs-vh); margin-bottom: var(--spacing-xs-vh); }
.margin-vertical-s-vh { margin-top: var(--spacing-s-vh); margin-bottom: var(--spacing-s-vh); }
.margin-vertical-m-vh { margin-top: var(--spacing-m-vh); margin-bottom: var(--spacing-m-vh); }
.margin-vertical-l-vh { margin-top: var(--spacing-l-vh); margin-bottom: var(--spacing-l-vh); }
.margin-vertical-xl-vh { margin-top: var(--spacing-xl-vh); margin-bottom: var(--spacing-xl-vh); }
.margin-vertical-xxl-vh { margin-top: var(--spacing-xxl-vh); margin-bottom: var(--spacing-xxl-vh); }
.margin-vertical-xxxl-vh { margin-top: var(--spacing-xxxl-vh); margin-bottom: var(--spacing-xxxl-vh); }




/* RESPONSIVE MARGIN RULES */
/* EM RESPONSIVE */
.margin-xxxs-em-responsive { margin: var(--spacing-xxxs-em-responsive); }
.margin-xxs-em-responsive { margin: var(--spacing-xxs-em-responsive); }
.margin-xs-em-responsive { margin: var(--spacing-xs-em-responsive); }
.margin-s-em-responsive { margin: var(--spacing-s-em-responsive); }
.margin-m-em-responsive { margin: var(--spacing-m-em-responsive); }
.margin-l-em-responsive { margin: var(--spacing-l-em-responsive); }
.margin-xl-em-responsive { margin: var(--spacing-xl-em-responsive); }
.margin-xxl-em-responsive { margin: var(--spacing-xxl-em-responsive); }
.margin-xxxl-em-responsive { margin: var(--spacing-xxxl-em-responsive); }

/* REM RESPONSIVE */
.margin-xxxs-rem-responsive { margin: var(--spacing-xxxs-rem-responsive); }
.margin-xxs-rem-responsive { margin: var(--spacing-xxs-rem-responsive); }
.margin-xs-rem-responsive { margin: var(--spacing-xs-rem-responsive); }
.margin-s-rem-responsive { margin: var(--spacing-s-rem-responsive); }
.margin-m-rem-responsive { margin: var(--spacing-m-rem-responsive); }
.margin-l-rem-responsive { margin: var(--spacing-l-rem-responsive); }
.margin-xl-rem-responsive { margin: var(--spacing-xl-rem-responsive); }
.margin-xxl-rem-responsive { margin: var(--spacing-xxl-rem-responsive); }
.margin-xxxl-rem-responsive { margin: var(--spacing-xxxl-rem-responsive); }




/* MARGIN-LEFT RESPONSIVE RULES */
/* EM RESPONSIVE */
.margin-left-xxxs-em-responsive { margin-left: var(--spacing-xxxs-em-responsive); }
.margin-left-xxs-em-responsive { margin-left: var(--spacing-xxs-em-responsive); }
.margin-left-xs-em-responsive { margin-left: var(--spacing-xs-em-responsive); }
.margin-left-s-em-responsive { margin-left: var(--spacing-s-em-responsive); }
.margin-left-m-em-responsive { margin-left: var(--spacing-m-em-responsive); }
.margin-left-l-em-responsive { margin-left: var(--spacing-l-em-responsive); }
.margin-left-xl-em-responsive { margin-left: var(--spacing-xl-em-responsive); }
.margin-left-xxl-em-responsive { margin-left: var(--spacing-xxl-em-responsive); }
.margin-left-xxxl-em-responsive { margin-left: var(--spacing-xxxl-em-responsive); }

/* REM RESPONSIVE */
.margin-left-xxxs-rem-responsive { margin-left: var(--spacing-xxxs-rem-responsive); }
.margin-left-xxs-rem-responsive { margin-left: var(--spacing-xxs-rem-responsive); }
.margin-left-xs-rem-responsive { margin-left: var(--spacing-xs-rem-responsive); }
.margin-left-s-rem-responsive { margin-left: var(--spacing-s-rem-responsive); }
.margin-left-m-rem-responsive { margin-left: var(--spacing-m-rem-responsive); }
.margin-left-l-rem-responsive { margin-left: var(--spacing-l-rem-responsive); }
.margin-left-xl-rem-responsive { margin-left: var(--spacing-xl-rem-responsive); }
.margin-left-xxl-rem-responsive { margin-left: var(--spacing-xxl-rem-responsive); }
.margin-left-xxxl-rem-responsive { margin-left: var(--spacing-xxxl-rem-responsive); }




/* MARGIN-TOP RESPONSIVE RULES */
/* EM RESPONSIVE */
.margin-top-xxxs-em-responsive { margin-top: var(--spacing-xxxs-em-responsive); }
.margin-top-xxs-em-responsive { margin-top: var(--spacing-xxs-em-responsive); }
.margin-top-xs-em-responsive { margin-top: var(--spacing-xs-em-responsive); }
.margin-top-s-em-responsive { margin-top: var(--spacing-s-em-responsive); }
.margin-top-m-em-responsive { margin-top: var(--spacing-m-em-responsive); }
.margin-top-l-em-responsive { margin-top: var(--spacing-l-em-responsive); }
.margin-top-xl-em-responsive { margin-top: var(--spacing-xl-em-responsive); }
.margin-top-xxl-em-responsive { margin-top: var(--spacing-xxl-em-responsive); }
.margin-top-xxxl-em-responsive { margin-top: var(--spacing-xxxl-em-responsive); }

/* REM RESPONSIVE */
.margin-top-xxxs-rem-responsive { margin-top: var(--spacing-xxxs-rem-responsive); }
.margin-top-xxs-rem-responsive { margin-top: var(--spacing-xxs-rem-responsive); }
.margin-top-xs-rem-responsive { margin-top: var(--spacing-xs-rem-responsive); }
.margin-top-s-rem-responsive { margin-top: var(--spacing-s-rem-responsive); }
.margin-top-m-rem-responsive { margin-top: var(--spacing-m-rem-responsive); }
.margin-top-l-rem-responsive { margin-top: var(--spacing-l-rem-responsive); }
.margin-top-xl-rem-responsive { margin-top: var(--spacing-xl-rem-responsive); }
.margin-top-xxl-rem-responsive { margin-top: var(--spacing-xxl-rem-responsive); }
.margin-top-xxxl-rem-responsive { margin-top: var(--spacing-xxxl-rem-responsive); }




/* MARGIN-RIGHT RESPONSIVE RULES */
/* EM RESPONSIVE */
.margin-right-xxxs-em-responsive { margin-right: var(--spacing-xxxs-em-responsive); }
.margin-right-xxs-em-responsive { margin-right: var(--spacing-xxs-em-responsive); }
.margin-right-xs-em-responsive { margin-right: var(--spacing-xs-em-responsive); }
.margin-right-s-em-responsive { margin-right: var(--spacing-s-em-responsive); }
.margin-right-m-em-responsive { margin-right: var(--spacing-m-em-responsive); }
.margin-right-l-em-responsive { margin-right: var(--spacing-l-em-responsive); }
.margin-right-xl-em-responsive { margin-right: var(--spacing-xl-em-responsive); }
.margin-right-xxl-em-responsive { margin-right: var(--spacing-xxl-em-responsive); }
.margin-right-xxxl-em-responsive { margin-right: var(--spacing-xxxl-em-responsive); }

/* REM RESPONSIVE */
.margin-right-xxxs-rem-responsive { margin-right: var(--spacing-xxxs-rem-responsive); }
.margin-right-xxs-rem-responsive { margin-right: var(--spacing-xxs-rem-responsive); }
.margin-right-xs-rem-responsive { margin-right: var(--spacing-xs-rem-responsive); }
.margin-right-s-rem-responsive { margin-right: var(--spacing-s-rem-responsive); }
.margin-right-m-rem-responsive { margin-right: var(--spacing-m-rem-responsive); }
.margin-right-l-rem-responsive { margin-right: var(--spacing-l-rem-responsive); }
.margin-right-xl-rem-responsive { margin-right: var(--spacing-xl-rem-responsive); }
.margin-right-xxl-rem-responsive { margin-right: var(--spacing-xxl-rem-responsive); }
.margin-right-xxxl-rem-responsive { margin-right: var(--spacing-xxxl-rem-responsive); }




/* MARGIN-BOTTOM RESPONSIVE RULES */
/* EM RESPONSIVE */
.margin-bottom-xxxs-em-responsive { margin-bottom: var(--spacing-xxxs-em-responsive); }
.margin-bottom-xxs-em-responsive { margin-bottom: var(--spacing-xxs-em-responsive); }
.margin-bottom-xs-em-responsive { margin-bottom: var(--spacing-xs-em-responsive); }
.margin-bottom-s-em-responsive { margin-bottom: var(--spacing-s-em-responsive); }
.margin-bottom-m-em-responsive { margin-bottom: var(--spacing-m-em-responsive); }
.margin-bottom-l-em-responsive { margin-bottom: var(--spacing-l-em-responsive); }
.margin-bottom-xl-em-responsive { margin-bottom: var(--spacing-xl-em-responsive); }
.margin-bottom-xxl-em-responsive { margin-bottom: var(--spacing-xxl-em-responsive); }
.margin-bottom-xxxl-em-responsive { margin-bottom: var(--spacing-xxxl-em-responsive); }

/* REM RESPONSIVE */
.margin-bottom-xxxs-rem-responsive { margin-bottom: var(--spacing-xxxs-rem-responsive); }
.margin-bottom-xxs-rem-responsive { margin-bottom: var(--spacing-xxs-rem-responsive); }
.margin-bottom-xs-rem-responsive { margin-bottom: var(--spacing-xs-rem-responsive); }
.margin-bottom-s-rem-responsive { margin-bottom: var(--spacing-s-rem-responsive); }
.margin-bottom-m-rem-responsive { margin-bottom: var(--spacing-m-rem-responsive); }
.margin-bottom-l-rem-responsive { margin-bottom: var(--spacing-l-rem-responsive); }
.margin-bottom-xl-rem-responsive { margin-bottom: var(--spacing-xl-rem-responsive); }
.margin-bottom-xxl-rem-responsive { margin-bottom: var(--spacing-xxl-rem-responsive); }
.margin-bottom-xxxl-rem-responsive { margin-bottom: var(--spacing-xxxl-rem-responsive); }




/* MARGIN HORIZONTAL RESPONSIVE RULES */
/* EM RESPONSIVE */
.margin-horizontal-xxxs-em-responsive { margin-left: var(--spacing-xxxs-em-responsive); margin-right: var(--spacing-xxxs-em-responsive); }
.margin-horizontal-xxs-em-responsive { margin-left: var(--spacing-xxs-em-responsive); margin-right: var(--spacing-xxs-em-responsive); }
.margin-horizontal-xs-em-responsive { margin-left: var(--spacing-xs-em-responsive); margin-right: var(--spacing-xs-em-responsive); }
.margin-horizontal-s-em-responsive { margin-left: var(--spacing-s-em-responsive); margin-right: var(--spacing-s-em-responsive); }
.margin-horizontal-m-em-responsive { margin-left: var(--spacing-m-em-responsive); margin-right: var(--spacing-m-em-responsive); }
.margin-horizontal-l-em-responsive { margin-left: var(--spacing-l-em-responsive); margin-right: var(--spacing-l-em-responsive); }
.margin-horizontal-xl-em-responsive { margin-left: var(--spacing-xl-em-responsive); margin-right: var(--spacing-xl-em-responsive); }
.margin-horizontal-xxl-em-responsive { margin-left: var(--spacing-xxl-em-responsive); margin-right: var(--spacing-xxl-em-responsive); }
.margin-horizontal-xxxl-em-responsive { margin-left: var(--spacing-xxxl-em-responsive); margin-right: var(--spacing-xxxl-em-responsive); }

/* REM RESPONSIVE */
.margin-horizontal-xxxs-rem-responsive { margin-left: var(--spacing-xxxs-rem-responsive); margin-right: var(--spacing-xxxs-rem-responsive); }
.margin-horizontal-xxs-rem-responsive { margin-left: var(--spacing-xxs-rem-responsive); margin-right: var(--spacing-xxs-rem-responsive); }
.margin-horizontal-xs-rem-responsive { margin-left: var(--spacing-xs-rem-responsive); margin-right: var(--spacing-xs-rem-responsive); }
.margin-horizontal-s-rem-responsive { margin-left: var(--spacing-s-rem-responsive); margin-right: var(--spacing-s-rem-responsive); }
.margin-horizontal-m-rem-responsive { margin-left: var(--spacing-m-rem-responsive); margin-right: var(--spacing-m-rem-responsive); }
.margin-horizontal-l-rem-responsive { margin-left: var(--spacing-l-rem-responsive); margin-right: var(--spacing-l-rem-responsive); }
.margin-horizontal-xl-rem-responsive { margin-left: var(--spacing-xl-rem-responsive); margin-right: var(--spacing-xl-rem-responsive); }
.margin-horizontal-xxl-rem-responsive { margin-left: var(--spacing-xxl-rem-responsive); margin-right: var(--spacing-xxl-rem-responsive); }
.margin-horizontal-xxxl-rem-responsive { margin-left: var(--spacing-xxxl-rem-responsive); margin-right: var(--spacing-xxxl-rem-responsive); }




/* MARGIN VERTICAL RESPONSIVE RULES */
/* EM RESPONSIVE */
.margin-vertical-xxxs-em-responsive { margin-top: var(--spacing-xxxs-em-responsive); margin-bottom: var(--spacing-xxxs-em-responsive); }
.margin-vertical-xxs-em-responsive { margin-top: var(--spacing-xxs-em-responsive); margin-bottom: var(--spacing-xxs-em-responsive); }
.margin-vertical-xs-em-responsive { margin-top: var(--spacing-xs-em-responsive); margin-bottom: var(--spacing-xs-em-responsive); }
.margin-vertical-s-em-responsive { margin-top: var(--spacing-s-em-responsive); margin-bottom: var(--spacing-s-em-responsive); }
.margin-vertical-m-em-responsive { margin-top: var(--spacing-m-em-responsive); margin-bottom: var(--spacing-m-em-responsive); }
.margin-vertical-l-em-responsive { margin-top: var(--spacing-l-em-responsive); margin-bottom: var(--spacing-l-em-responsive); }
.margin-vertical-xl-em-responsive { margin-top: var(--spacing-xl-em-responsive); margin-bottom: var(--spacing-xl-em-responsive); }
.margin-vertical-xxl-em-responsive { margin-top: var(--spacing-xxl-em-responsive); margin-bottom: var(--spacing-xxl-em-responsive); }
.margin-vertical-xxxl-em-responsive { margin-top: var(--spacing-xxxl-em-responsive); margin-bottom: var(--spacing-xxxl-em-responsive); }

/* REM RESPONSIVE */
.margin-vertical-xxxs-rem-responsive { margin-top: var(--spacing-xxxs-rem-responsive); margin-bottom: var(--spacing-xxxs-rem-responsive); }
.margin-vertical-xxs-rem-responsive { margin-top: var(--spacing-xxs-rem-responsive); margin-bottom: var(--spacing-xxs-rem-responsive); }
.margin-vertical-xs-rem-responsive { margin-top: var(--spacing-xs-rem-responsive); margin-bottom: var(--spacing-xs-rem-responsive); }
.margin-vertical-s-rem-responsive { margin-top: var(--spacing-s-rem-responsive); margin-bottom: var(--spacing-s-rem-responsive); }
.margin-vertical-m-rem-responsive { margin-top: var(--spacing-m-rem-responsive); margin-bottom: var(--spacing-m-rem-responsive); }
.margin-vertical-l-rem-responsive { margin-top: var(--spacing-l-rem-responsive); margin-bottom: var(--spacing-l-rem-responsive); }
.margin-vertical-xl-rem-responsive { margin-top: var(--spacing-xl-rem-responsive); margin-bottom: var(--spacing-xl-rem-responsive); }
.margin-vertical-xxl-rem-responsive { margin-top: var(--spacing-xxl-rem-responsive); margin-bottom: var(--spacing-xxl-rem-responsive); }
.margin-vertical-xxxl-rem-responsive { margin-top: var(--spacing-xxxl-rem-responsive); margin-bottom: var(--spacing-xxxl-rem-responsive); }




/* PADDING RULES */
/* PX */
.padding-xxxs-px { padding: var(--spacing-xxxs-px); }
.padding-xxs-px { padding: var(--spacing-xxs-px); }
.padding-xs-px { padding: var(--spacing-xs-px); }
.padding-s-px { padding: var(--spacing-s-px); }
.padding-m-px { padding: var(--spacing-m-px); }
.padding-l-px { padding: var(--spacing-l-px); }
.padding-xl-px { padding: var(--spacing-xl-px); }
.padding-xxl-px { padding: var(--spacing-xxl-px); }
.padding-xxxl-px { padding: var(--spacing-xxxl-px); }

/* EM */
.padding-xxxs-em { padding: var(--spacing-xxxs-em); }
.padding-xxs-em { padding: var(--spacing-xxs-em); }
.padding-xs-em { padding: var(--spacing-xs-em); }
.padding-s-em { padding: var(--spacing-s-em); }
.padding-m-em { padding: var(--spacing-m-em); }
.padding-l-em { padding: var(--spacing-l-em); }
.padding-xl-em { padding: var(--spacing-xl-em); }
.padding-xxl-em { padding: var(--spacing-xxl-em); }
.padding-xxxl-em { padding: var(--spacing-xxxl-em); }

/* REM */
.padding-xxxs-rem { padding: var(--spacing-xxxs-rem); }
.padding-xxs-rem { padding: var(--spacing-xxs-rem); }
.padding-xs-rem { padding: var(--spacing-xs-rem); }
.padding-s-rem { padding: var(--spacing-s-rem); }
.padding-m-rem { padding: var(--spacing-m-rem); }
.padding-l-rem { padding: var(--spacing-l-rem); }
.padding-xl-rem { padding: var(--spacing-xl-rem); }
.padding-xxl-rem { padding: var(--spacing-xxl-rem); }
.padding-xxxl-rem { padding: var(--spacing-xxxl-rem); }

/* PERCENTAGE */
.padding-xxxs-pct { padding: var(--spacing-xxxs-pct); }
.padding-xxs-pct { padding: var(--spacing-xxs-pct); }
.padding-xs-pct { padding: var(--spacing-xs-pct); }
.padding-s-pct { padding: var(--spacing-s-pct); }
.padding-m-pct { padding: var(--spacing-m-pct); }
.padding-l-pct { padding: var(--spacing-l-pct); }
.padding-xl-pct { padding: var(--spacing-xl-pct); }
.padding-xxl-pct { padding: var(--spacing-xxl-pct); }
.padding-xxxl-pct { padding: var(--spacing-xxxl-pct); }

/* VIEWPORT WIDTH (VW) */
.padding-xxxs-vw { padding: var(--spacing-xxxs-vw); }
.padding-xxs-vw { padding: var(--spacing-xxs-vw); }
.padding-xs-vw { padding: var(--spacing-xs-vw); }
.padding-s-vw { padding: var(--spacing-s-vw); }
.padding-m-vw { padding: var(--spacing-m-vw); }
.padding-l-vw { padding: var(--spacing-l-vw); }
.padding-xl-vw { padding: var(--spacing-xl-vw); }
.padding-xxl-vw { padding: var(--spacing-xxl-vw); }
.padding-xxxl-vw { padding: var(--spacing-xxxl-vw); }

/* VIEWPORT HEIGHT (VH) */
.padding-xxxs-vh { padding: var(--spacing-xxxs-vh); }
.padding-xxs-vh { padding: var(--spacing-xxs-vh); }
.padding-xs-vh { padding: var(--spacing-xs-vh); }
.padding-s-vh { padding: var(--spacing-s-vh); }
.padding-m-vh { padding: var(--spacing-m-vh); }
.padding-l-vh { padding: var(--spacing-l-vh); }
.padding-xl-vh { padding: var(--spacing-xl-vh); }
.padding-xxl-vh { padding: var(--spacing-xxl-vh); }
.padding-xxxl-vh { padding: var(--spacing-xxxl-vh); }




/* PADDING-LEFT RULES */
/* PX */
.padding-left-xxxs-px { padding-left: var(--spacing-xxxs-px); }
.padding-left-xxs-px { padding-left: var(--spacing-xxs-px); }
.padding-left-xs-px { padding-left: var(--spacing-xs-px); }
.padding-left-s-px { padding-left: var(--spacing-s-px); }
.padding-left-m-px { padding-left: var(--spacing-m-px); }
.padding-left-l-px { padding-left: var(--spacing-l-px); }
.padding-left-xl-px { padding-left: var(--spacing-xl-px); }
.padding-left-xxl-px { padding-left: var(--spacing-xxl-px); }
.padding-left-xxxl-px { padding-left: var(--spacing-xxxl-px); }

/* EM */
.padding-left-xxxs-em { padding-left: var(--spacing-xxxs-em); }
.padding-left-xxs-em { padding-left: var(--spacing-xxs-em); }
.padding-left-xs-em { padding-left: var(--spacing-xs-em); }
.padding-left-s-em { padding-left: var(--spacing-s-em); }
.padding-left-m-em { padding-left: var(--spacing-m-em); }
.padding-left-l-em { padding-left: var(--spacing-l-em); }
.padding-left-xl-em { padding-left: var(--spacing-xl-em); }
.padding-left-xxl-em { padding-left: var(--spacing-xxl-em); }
.padding-left-xxxl-em { padding-left: var(--spacing-xxxl-em); }

/* REM */
.padding-left-xxxs-rem { padding-left: var(--spacing-xxxs-rem); }
.padding-left-xxs-rem { padding-left: var(--spacing-xxs-rem); }
.padding-left-xs-rem { padding-left: var(--spacing-xs-rem); }
.padding-left-s-rem { padding-left: var(--spacing-s-rem); }
.padding-left-m-rem { padding-left: var(--spacing-m-rem); }
.padding-left-l-rem { padding-left: var(--spacing-l-rem); }
.padding-left-xl-rem { padding-left: var(--spacing-xl-rem); }
.padding-left-xxl-rem { padding-left: var(--spacing-xxl-rem); }
.padding-left-xxxl-rem { padding-left: var(--spacing-xxxl-rem); }

/* PERCENTAGE */
.padding-left-xxxs-pct { padding-left: var(--spacing-xxxs-pct); }
.padding-left-xxs-pct { padding-left: var(--spacing-xxs-pct); }
.padding-left-xs-pct { padding-left: var(--spacing-xs-pct); }
.padding-left-s-pct { padding-left: var(--spacing-s-pct); }
.padding-left-m-pct { padding-left: var(--spacing-m-pct); }
.padding-left-l-pct { padding-left: var(--spacing-l-pct); }
.padding-left-xl-pct { padding-left: var(--spacing-xl-pct); }
.padding-left-xxl-pct { padding-left: var(--spacing-xxl-pct); }
.padding-left-xxxl-pct { padding-left: var(--spacing-xxxl-pct); }

/* VIEWPORT WIDTH (VW) */
.padding-left-xxxs-vw { padding-left: var(--spacing-xxxs-vw); }
.padding-left-xxs-vw { padding-left: var(--spacing-xxs-vw); }
.padding-left-xs-vw { padding-left: var(--spacing-xs-vw); }
.padding-left-s-vw { padding-left: var(--spacing-s-vw); }
.padding-left-m-vw { padding-left: var(--spacing-m-vw); }
.padding-left-l-vw { padding-left: var(--spacing-l-vw); }
.padding-left-xl-vw { padding-left: var(--spacing-xl-vw); }
.padding-left-xxl-vw { padding-left: var(--spacing-xxl-vw); }
.padding-left-xxxl-vw { padding-left: var(--spacing-xxxl-vw); }

/* VIEWPORT HEIGHT (VH) */
.padding-left-xxxs-vh { padding-left: var(--spacing-xxxs-vh); }
.padding-left-xxs-vh { padding-left: var(--spacing-xxs-vh); }
.padding-left-xs-vh { padding-left: var(--spacing-xs-vh); }
.padding-left-s-vh { padding-left: var(--spacing-s-vh); }
.padding-left-m-vh { padding-left: var(--spacing-m-vh); }
.padding-left-l-vh { padding-left: var(--spacing-l-vh); }
.padding-left-xl-vh { padding-left: var(--spacing-xl-vh); }
.padding-left-xxl-vh { padding-left: var(--spacing-xxl-vh); }
.padding-left-xxxl-vh { padding-left: var(--spacing-xxxl-vh); }




/* PADDING-TOP RULES */
/* PX */
.padding-top-xxxs-px { padding-top: var(--spacing-xxxs-px); }
.padding-top-xxs-px { padding-top: var(--spacing-xxs-px); }
.padding-top-xs-px { padding-top: var(--spacing-xs-px); }
.padding-top-s-px { padding-top: var(--spacing-s-px); }
.padding-top-m-px { padding-top: var(--spacing-m-px); }
.padding-top-l-px { padding-top: var(--spacing-l-px); }
.padding-top-xl-px { padding-top: var(--spacing-xl-px); }
.padding-top-xxl-px { padding-top: var(--spacing-xxl-px); }
.padding-top-xxxl-px { padding-top: var(--spacing-xxxl-px); }

/* EM */
.padding-top-xxxs-em { padding-top: var(--spacing-xxxs-em); }
.padding-top-xxs-em { padding-top: var(--spacing-xxs-em); }
.padding-top-xs-em { padding-top: var(--spacing-xs-em); }
.padding-top-s-em { padding-top: var(--spacing-s-em); }
.padding-top-m-em { padding-top: var(--spacing-m-em); }
.padding-top-l-em { padding-top: var(--spacing-l-em); }
.padding-top-xl-em { padding-top: var(--spacing-xl-em); }
.padding-top-xxl-em { padding-top: var(--spacing-xxl-em); }
.padding-top-xxxl-em { padding-top: var(--spacing-xxxl-em); }

/* REM */
.padding-top-xxxs-rem { padding-top: var(--spacing-xxxs-rem); }
.padding-top-xxs-rem { padding-top: var(--spacing-xxs-rem); }
.padding-top-xs-rem { padding-top: var(--spacing-xs-rem); }
.padding-top-s-rem { padding-top: var(--spacing-s-rem); }
.padding-top-m-rem { padding-top: var(--spacing-m-rem); }
.padding-top-l-rem { padding-top: var(--spacing-l-rem); }
.padding-top-xl-rem { padding-top: var(--spacing-xl-rem); }
.padding-top-xxl-rem { padding-top: var(--spacing-xxl-rem); }
.padding-top-xxxl-rem { padding-top: var(--spacing-xxxl-rem); }

/* PERCENTAGE */
.padding-top-xxxs-pct { padding-top: var(--spacing-xxxs-pct); }
.padding-top-xxs-pct { padding-top: var(--spacing-xxs-pct); }
.padding-top-xs-pct { padding-top: var(--spacing-xs-pct); }
.padding-top-s-pct { padding-top: var(--spacing-s-pct); }
.padding-top-m-pct { padding-top: var(--spacing-m-pct); }
.padding-top-l-pct { padding-top: var(--spacing-l-pct); }
.padding-top-xl-pct { padding-top: var(--spacing-xl-pct); }
.padding-top-xxl-pct { padding-top: var(--spacing-xxl-pct); }
.padding-top-xxxl-pct { padding-top: var(--spacing-xxxl-pct); }

/* VIEWPORT WIDTH (VW) */
.padding-top-xxxs-vw { padding-top: var(--spacing-xxxs-vw); }
.padding-top-xxs-vw { padding-top: var(--spacing-xxs-vw); }
.padding-top-xs-vw { padding-top: var(--spacing-xs-vw); }
.padding-top-s-vw { padding-top: var(--spacing-s-vw); }
.padding-top-m-vw { padding-top: var(--spacing-m-vw); }
.padding-top-l-vw { padding-top: var(--spacing-l-vw); }
.padding-top-xl-vw { padding-top: var(--spacing-xl-vw); }
.padding-top-xxl-vw { padding-top: var(--spacing-xxl-vw); }
.padding-top-xxxl-vw { padding-top: var(--spacing-xxxl-vw); }

/* VIEWPORT HEIGHT (VH) */
.padding-top-xxxs-vh { padding-top: var(--spacing-xxxs-vh); }
.padding-top-xxs-vh { padding-top: var(--spacing-xxs-vh); }
.padding-top-xs-vh { padding-top: var(--spacing-xs-vh); }
.padding-top-s-vh { padding-top: var(--spacing-s-vh); }
.padding-top-m-vh { padding-top: var(--spacing-m-vh); }
.padding-top-l-vh { padding-top: var(--spacing-l-vh); }
.padding-top-xl-vh { padding-top: var(--spacing-xl-vh); }
.padding-top-xxl-vh { padding-top: var(--spacing-xxl-vh); }
.padding-top-xxxl-vh { padding-top: var(--spacing-xxxl-vh); }




/* PADDING-RIGHT RULES */
/* PX */
.padding-right-xxxs-px { padding-right: var(--spacing-xxxs-px); }
.padding-right-xxs-px { padding-right: var(--spacing-xxs-px); }
.padding-right-xs-px { padding-right: var(--spacing-xs-px); }
.padding-right-s-px { padding-right: var(--spacing-s-px); }
.padding-right-m-px { padding-right: var(--spacing-m-px); }
.padding-right-l-px { padding-right: var(--spacing-l-px); }
.padding-right-xl-px { padding-right: var(--spacing-xl-px); }
.padding-right-xxl-px { padding-right: var(--spacing-xxl-px); }
.padding-right-xxxl-px { padding-right: var(--spacing-xxxl-px); }

/* EM */
.padding-right-xxxs-em { padding-right: var(--spacing-xxxs-em); }
.padding-right-xxs-em { padding-right: var(--spacing-xxs-em); }
.padding-right-xs-em { padding-right: var(--spacing-xs-em); }
.padding-right-s-em { padding-right: var(--spacing-s-em); }
.padding-right-m-em { padding-right: var(--spacing-m-em); }
.padding-right-l-em { padding-right: var(--spacing-l-em); }
.padding-right-xl-em { padding-right: var(--spacing-xl-em); }
.padding-right-xxl-em { padding-right: var(--spacing-xxl-em); }
.padding-right-xxxl-em { padding-right: var(--spacing-xxxl-em); }

/* REM */
.padding-right-xxxs-rem { padding-right: var(--spacing-xxxs-rem); }
.padding-right-xxs-rem { padding-right: var(--spacing-xxs-rem); }
.padding-right-xs-rem { padding-right: var(--spacing-xs-rem); }
.padding-right-s-rem { padding-right: var(--spacing-s-rem); }
.padding-right-m-rem { padding-right: var(--spacing-m-rem); }
.padding-right-l-rem { padding-right: var(--spacing-l-rem); }
.padding-right-xl-rem { padding-right: var(--spacing-xl-rem); }
.padding-right-xxl-rem { padding-right: var(--spacing-xxl-rem); }
.padding-right-xxxl-rem { padding-right: var(--spacing-xxxl-rem); }

/* PERCENTAGE */
.padding-right-xxxs-pct { padding-right: var(--spacing-xxxs-pct); }
.padding-right-xxs-pct { padding-right: var(--spacing-xxs-pct); }
.padding-right-xs-pct { padding-right: var(--spacing-xs-pct); }
.padding-right-s-pct { padding-right: var(--spacing-s-pct); }
.padding-right-m-pct { padding-right: var(--spacing-m-pct); }
.padding-right-l-pct { padding-right: var(--spacing-l-pct); }
.padding-right-xl-pct { padding-right: var(--spacing-xl-pct); }
.padding-right-xxl-pct { padding-right: var(--spacing-xxl-pct); }
.padding-right-xxxl-pct { padding-right: var(--spacing-xxxl-pct); }

/* VIEWPORT WIDTH (VW) */
.padding-right-xxxs-vw { padding-right: var(--spacing-xxxs-vw); }
.padding-right-xxs-vw { padding-right: var(--spacing-xxs-vw); }
.padding-right-xs-vw { padding-right: var(--spacing-xs-vw); }
.padding-right-s-vw { padding-right: var(--spacing-s-vw); }
.padding-right-m-vw { padding-right: var(--spacing-m-vw); }
.padding-right-l-vw { padding-right: var(--spacing-l-vw); }
.padding-right-xl-vw { padding-right: var(--spacing-xl-vw); }
.padding-right-xxl-vw { padding-right: var(--spacing-xxl-vw); }
.padding-right-xxxl-vw { padding-right: var(--spacing-xxxl-vw); }

/* VIEWPORT HEIGHT (VH) */
.padding-right-xxxs-vh { padding-right: var(--spacing-xxxs-vh); }
.padding-right-xxs-vh { padding-right: var(--spacing-xxs-vh); }
.padding-right-xs-vh { padding-right: var(--spacing-xs-vh); }
.padding-right-s-vh { padding-right: var(--spacing-s-vh); }
.padding-right-m-vh { padding-right: var(--spacing-m-vh); }
.padding-right-l-vh { padding-right: var(--spacing-l-vh); }
.padding-right-xl-vh { padding-right: var(--spacing-xl-vh); }
.padding-right-xxl-vh { padding-right: var(--spacing-xxl-vh); }
.padding-right-xxxl-vh { padding-right: var(--spacing-xxxl-vh); }




/* PADDING-BOTTOM RULES */
/* PX */
.padding-bottom-xxxs-px { padding-bottom: var(--spacing-xxxs-px); }
.padding-bottom-xxs-px { padding-bottom: var(--spacing-xxs-px); }
.padding-bottom-xs-px { padding-bottom: var(--spacing-xs-px); }
.padding-bottom-s-px { padding-bottom: var(--spacing-s-px); }
.padding-bottom-m-px { padding-bottom: var(--spacing-m-px); }
.padding-bottom-l-px { padding-bottom: var(--spacing-l-px); }
.padding-bottom-xl-px { padding-bottom: var(--spacing-xl-px); }
.padding-bottom-xxl-px { padding-bottom: var(--spacing-xxl-px); }
.padding-bottom-xxxl-px { padding-bottom: var(--spacing-xxxl-px); }

/* EM */
.padding-bottom-xxxs-em { padding-bottom: var(--spacing-xxxs-em); }
.padding-bottom-xxs-em { padding-bottom: var(--spacing-xxs-em); }
.padding-bottom-xs-em { padding-bottom: var(--spacing-xs-em); }
.padding-bottom-s-em { padding-bottom: var(--spacing-s-em); }
.padding-bottom-m-em { padding-bottom: var(--spacing-m-em); }
.padding-bottom-l-em { padding-bottom: var(--spacing-l-em); }
.padding-bottom-xl-em { padding-bottom: var(--spacing-xl-em); }
.padding-bottom-xxl-em { padding-bottom: var(--spacing-xxl-em); }
.padding-bottom-xxxl-em { padding-bottom: var(--spacing-xxxl-em); }

/* REM */
.padding-bottom-xxxs-rem { padding-bottom: var(--spacing-xxxs-rem); }
.padding-bottom-xxs-rem { padding-bottom: var(--spacing-xxs-rem); }
.padding-bottom-xs-rem { padding-bottom: var(--spacing-xs-rem); }
.padding-bottom-s-rem { padding-bottom: var(--spacing-s-rem); }
.padding-bottom-m-rem { padding-bottom: var(--spacing-m-rem); }
.padding-bottom-l-rem { padding-bottom: var(--spacing-l-rem); }
.padding-bottom-xl-rem { padding-bottom: var(--spacing-xl-rem); }
.padding-bottom-xxl-rem { padding-bottom: var(--spacing-xxl-rem); }
.padding-bottom-xxxl-rem { padding-bottom: var(--spacing-xxxl-rem); }

/* PERCENTAGE */
.padding-bottom-xxxs-pct { padding-bottom: var(--spacing-xxxs-pct); }
.padding-bottom-xxs-pct { padding-bottom: var(--spacing-xxs-pct); }
.padding-bottom-xs-pct { padding-bottom: var(--spacing-xs-pct); }
.padding-bottom-s-pct { padding-bottom: var(--spacing-s-pct); }
.padding-bottom-m-pct { padding-bottom: var(--spacing-m-pct); }
.padding-bottom-l-pct { padding-bottom: var(--spacing-l-pct); }
.padding-bottom-xl-pct { padding-bottom: var(--spacing-xl-pct); }
.padding-bottom-xxl-pct { padding-bottom: var(--spacing-xxl-pct); }
.padding-bottom-xxxl-pct { padding-bottom: var(--spacing-xxxl-pct); }

/* VIEWPORT WIDTH (VW) */
.padding-bottom-xxxs-vw { padding-bottom: var(--spacing-xxxs-vw); }
.padding-bottom-xxs-vw { padding-bottom: var(--spacing-xxs-vw); }
.padding-bottom-xs-vw { padding-bottom: var(--spacing-xs-vw); }
.padding-bottom-s-vw { padding-bottom: var(--spacing-s-vw); }
.padding-bottom-m-vw { padding-bottom: var(--spacing-m-vw); }
.padding-bottom-l-vw { padding-bottom: var(--spacing-l-vw); }
.padding-bottom-xl-vw { padding-bottom: var(--spacing-xl-vw); }
.padding-bottom-xxl-vw { padding-bottom: var(--spacing-xxl-vw); }
.padding-bottom-xxxl-vw { padding-bottom: var(--spacing-xxxl-vw); }

/* VIEWPORT HEIGHT (VH) */
.padding-bottom-xxxs-vh { padding-bottom: var(--spacing-xxxs-vh); }
.padding-bottom-xxs-vh { padding-bottom: var(--spacing-xxs-vh); }
.padding-bottom-xs-vh { padding-bottom: var(--spacing-xs-vh); }
.padding-bottom-s-vh { padding-bottom: var(--spacing-s-vh); }
.padding-bottom-m-vh { padding-bottom: var(--spacing-m-vh); }
.padding-bottom-l-vh { padding-bottom: var(--spacing-l-vh); }
.padding-bottom-xl-vh { padding-bottom: var(--spacing-xl-vh); }
.padding-bottom-xxl-vh { padding-bottom: var(--spacing-xxl-vh); }
.padding-bottom-xxxl-vh { padding-bottom: var(--spacing-xxxl-vh); }




/* PADDING-horizontal RULES */
/* PX */
.padding-horizontal-xxxs-px { padding-left: var(--spacing-xxxs-px); padding-right: var(--spacing-xxxs-px); }
.padding-horizontal-xxs-px { padding-left: var(--spacing-xxs-px); padding-right: var(--spacing-xxs-px); }
.padding-horizontal-xs-px { padding-left: var(--spacing-xs-px); padding-right: var(--spacing-xs-px); }
.padding-horizontal-s-px { padding-left: var(--spacing-s-px); padding-right: var(--spacing-s-px); }
.padding-horizontal-m-px { padding-left: var(--spacing-m-px); padding-right: var(--spacing-m-px); }
.padding-horizontal-l-px { padding-left: var(--spacing-l-px); padding-right: var(--spacing-l-px); }
.padding-horizontal-xl-px { padding-left: var(--spacing-xl-px); padding-right: var(--spacing-xl-px); }
.padding-horizontal-xxl-px { padding-left: var(--spacing-xxl-px); padding-right: var(--spacing-xxl-px); }
.padding-horizontal-xxxl-px { padding-left: var(--spacing-xxxl-px); padding-right: var(--spacing-xxxl-px); }

/* EM */
.padding-horizontal-xxxs-em { padding-left: var(--spacing-xxxs-em); padding-right: var(--spacing-xxxs-em); }
.padding-horizontal-xxs-em { padding-left: var(--spacing-xxs-em); padding-right: var(--spacing-xxs-em); }
.padding-horizontal-xs-em { padding-left: var(--spacing-xs-em); padding-right: var(--spacing-xs-em); }
.padding-horizontal-s-em { padding-left: var(--spacing-s-em); padding-right: var(--spacing-s-em); }
.padding-horizontal-m-em { padding-left: var(--spacing-m-em); padding-right: var(--spacing-m-em); }
.padding-horizontal-l-em { padding-left: var(--spacing-l-em); padding-right: var(--spacing-l-em); }
.padding-horizontal-xl-em { padding-left: var(--spacing-xl-em); padding-right: var(--spacing-xl-em); }
.padding-horizontal-xxl-em { padding-left: var(--spacing-xxl-em); padding-right: var(--spacing-xxl-em); }
.padding-horizontal-xxxl-em { padding-left: var(--spacing-xxxl-em); padding-right: var(--spacing-xxxl-em); }

/* REM */
.padding-horizontal-xxxs-rem { padding-left: var(--spacing-xxxs-rem); padding-right: var(--spacing-xxxs-rem); }
.padding-horizontal-xxs-rem { padding-left: var(--spacing-xxs-rem); padding-right: var(--spacing-xxs-rem); }
.padding-horizontal-xs-rem { padding-left: var(--spacing-xs-rem); padding-right: var(--spacing-xs-rem); }
.padding-horizontal-s-rem { padding-left: var(--spacing-s-rem); padding-right: var(--spacing-s-rem); }
.padding-horizontal-m-rem { padding-left: var(--spacing-m-rem); padding-right: var(--spacing-m-rem); }
.padding-horizontal-l-rem { padding-left: var(--spacing-l-rem); padding-right: var(--spacing-l-rem); }
.padding-horizontal-xl-rem { padding-left: var(--spacing-xl-rem); padding-right: var(--spacing-xl-rem); }
.padding-horizontal-xxl-rem { padding-left: var(--spacing-xxl-rem); padding-right: var(--spacing-xxl-rem); }
.padding-horizontal-xxxl-rem { padding-left: var(--spacing-xxxl-rem); padding-right: var(--spacing-xxxl-rem); }

/* PERCENTAGE */
.padding-horizontal-xxxs-pct { padding-left: var(--spacing-xxxs-pct); padding-right: var(--spacing-xxxs-pct); }
.padding-horizontal-xxs-pct { padding-left: var(--spacing-xxs-pct); padding-right: var(--spacing-xxs-pct); }
.padding-horizontal-xs-pct { padding-left: var(--spacing-xs-pct); padding-right: var(--spacing-xs-pct); }
.padding-horizontal-s-pct { padding-left: var(--spacing-s-pct); padding-right: var(--spacing-s-pct); }
.padding-horizontal-m-pct { padding-left: var(--spacing-m-pct); padding-right: var(--spacing-m-pct); }
.padding-horizontal-l-pct { padding-left: var(--spacing-l-pct); padding-right: var(--spacing-l-pct); }
.padding-horizontal-xl-pct { padding-left: var(--spacing-xl-pct); padding-right: var(--spacing-xl-pct); }
.padding-horizontal-xxl-pct { padding-left: var(--spacing-xxl-pct); padding-right: var(--spacing-xxl-pct); }
.padding-horizontal-xxxl-pct { padding-left: var(--spacing-xxxl-pct); padding-right: var(--spacing-xxxl-pct); }

/* VIEWPORT WIDTH (VW) */
.padding-horizontal-xxxs-vw { padding-left: var(--spacing-xxxs-vw); padding-right: var(--spacing-xxxs-vw); }
.padding-horizontal-xxs-vw { padding-left: var(--spacing-xxs-vw); padding-right: var(--spacing-xxs-vw); }
.padding-horizontal-xs-vw { padding-left: var(--spacing-xs-vw); padding-right: var(--spacing-xs-vw); }
.padding-horizontal-s-vw { padding-left: var(--spacing-s-vw); padding-right: var(--spacing-s-vw); }
.padding-horizontal-m-vw { padding-left: var(--spacing-m-vw); padding-right: var(--spacing-m-vw); }
.padding-horizontal-l-vw { padding-left: var(--spacing-l-vw); padding-right: var(--spacing-l-vw); }
.padding-horizontal-xl-vw { padding-left: var(--spacing-xl-vw); padding-right: var(--spacing-xl-vw); }
.padding-horizontal-xxl-vw { padding-left: var(--spacing-xxl-vw); padding-right: var(--spacing-xxl-vw); }
.padding-horizontal-xxxl-vw { padding-left: var(--spacing-xxxl-vw); padding-right: var(--spacing-xxxl-vw); }

/* VIEWPORT HEIGHT (VH) */
.padding-horizontal-xxxs-vh { padding-left: var(--spacing-xxxs-vh); padding-right: var(--spacing-xxxs-vh); }
.padding-horizontal-xxs-vh { padding-left: var(--spacing-xxs-vh); padding-right: var(--spacing-xxs-vh); }
.padding-horizontal-xs-vh { padding-left: var(--spacing-xs-vh); padding-right: var(--spacing-xs-vh); }
.padding-horizontal-s-vh { padding-left: var(--spacing-s-vh); padding-right: var(--spacing-s-vh); }
.padding-horizontal-m-vh { padding-left: var(--spacing-m-vh); padding-right: var(--spacing-m-vh); }
.padding-horizontal-l-vh { padding-left: var(--spacing-l-vh); padding-right: var(--spacing-l-vh); }
.padding-horizontal-xl-vh { padding-left: var(--spacing-xl-vh); padding-right: var(--spacing-xl-vh); }
.padding-horizontal-xxl-vh { padding-left: var(--spacing-xxl-vh); padding-right: var(--spacing-xxl-vh); }
.padding-horizontal-xxxl-vh { padding-left: var(--spacing-xxxl-vh); padding-right: var(--spacing-xxxl-vh); }




/* PADDING-VERTICAL RULES */
/* PX */
.padding-vertical-xxxs-px { padding-top: var(--spacing-xxxs-px); padding-bottom: var(--spacing-xxxs-px); }
.padding-vertical-xxs-px { padding-top: var(--spacing-xxs-px); padding-bottom: var(--spacing-xxs-px); }
.padding-vertical-xs-px { padding-top: var(--spacing-xs-px); padding-bottom: var(--spacing-xs-px); }
.padding-vertical-s-px { padding-top: var(--spacing-s-px); padding-bottom: var(--spacing-s-px); }
.padding-vertical-m-px { padding-top: var(--spacing-m-px); padding-bottom: var(--spacing-m-px); }
.padding-vertical-l-px { padding-top: var(--spacing-l-px); padding-bottom: var(--spacing-l-px); }
.padding-vertical-xl-px { padding-top: var(--spacing-xl-px); padding-bottom: var(--spacing-xl-px); }
.padding-vertical-xxl-px { padding-top: var(--spacing-xxl-px); padding-bottom: var(--spacing-xxl-px); }
.padding-vertical-xxxl-px { padding-top: var(--spacing-xxxl-px); padding-bottom: var(--spacing-xxxl-px); }

/* EM */
.padding-vertical-xxxs-em { padding-top: var(--spacing-xxxs-em); padding-bottom: var(--spacing-xxxs-em); }
.padding-vertical-xxs-em { padding-top: var(--spacing-xxs-em); padding-bottom: var(--spacing-xxs-em); }
.padding-vertical-xs-em { padding-top: var(--spacing-xs-em); padding-bottom: var(--spacing-xs-em); }
.padding-vertical-s-em { padding-top: var(--spacing-s-em); padding-bottom: var(--spacing-s-em); }
.padding-vertical-m-em { padding-top: var(--spacing-m-em); padding-bottom: var(--spacing-m-em); }
.padding-vertical-l-em { padding-top: var(--spacing-l-em); padding-bottom: var(--spacing-l-em); }
.padding-vertical-xl-em { padding-top: var(--spacing-xl-em); padding-bottom: var(--spacing-xl-em); }
.padding-vertical-xxl-em { padding-top: var(--spacing-xxl-em); padding-bottom: var(--spacing-xxl-em); }
.padding-vertical-xxxl-em { padding-top: var(--spacing-xxxl-em); padding-bottom: var(--spacing-xxxl-em); }

/* REM */
.padding-vertical-xxxs-rem { padding-top: var(--spacing-xxxs-rem); padding-bottom: var(--spacing-xxxs-rem); }
.padding-vertical-xxs-rem { padding-top: var(--spacing-xxs-rem); padding-bottom: var(--spacing-xxs-rem); }
.padding-vertical-xs-rem { padding-top: var(--spacing-xs-rem); padding-bottom: var(--spacing-xs-rem); }
.padding-vertical-s-rem { padding-top: var(--spacing-s-rem); padding-bottom: var(--spacing-s-rem); }
.padding-vertical-m-rem { padding-top: var(--spacing-m-rem); padding-bottom: var(--spacing-m-rem); }
.padding-vertical-l-rem { padding-top: var(--spacing-l-rem); padding-bottom: var(--spacing-l-rem); }
.padding-vertical-xl-rem { padding-top: var(--spacing-xl-rem); padding-bottom: var(--spacing-xl-rem); }
.padding-vertical-xxl-rem { padding-top: var(--spacing-xxl-rem); padding-bottom: var(--spacing-xxl-rem); }
.padding-vertical-xxxl-rem { padding-top: var(--spacing-xxxl-rem); padding-bottom: var(--spacing-xxxl-rem); }

/* PERCENTAGE */
.padding-vertical-xxxs-pct { padding-top: var(--spacing-xxxs-pct); padding-bottom: var(--spacing-xxxs-pct); }
.padding-vertical-xxs-pct { padding-top: var(--spacing-xxs-pct); padding-bottom: var(--spacing-xxs-pct); }
.padding-vertical-xs-pct { padding-top: var(--spacing-xs-pct); padding-bottom: var(--spacing-xs-pct); }
.padding-vertical-s-pct { padding-top: var(--spacing-s-pct); padding-bottom: var(--spacing-s-pct); }
.padding-vertical-m-pct { padding-top: var(--spacing-m-pct); padding-bottom: var(--spacing-m-pct); }
.padding-vertical-l-pct { padding-top: var(--spacing-l-pct); padding-bottom: var(--spacing-l-pct); }
.padding-vertical-xl-pct { padding-top: var(--spacing-xl-pct); padding-bottom: var(--spacing-xl-pct); }
.padding-vertical-xxl-pct { padding-top: var(--spacing-xxl-pct); padding-bottom: var(--spacing-xxl-pct); }
.padding-vertical-xxxl-pct { padding-top: var(--spacing-xxxl-pct); padding-bottom: var(--spacing-xxxl-pct); }

/* VIEWPORT WIDTH (VW) */
.padding-vertical-xxxs-vw { padding-top: var(--spacing-xxxs-vw); padding-bottom: var(--spacing-xxxs-vw); }
.padding-vertical-xxs-vw { padding-top: var(--spacing-xxs-vw); padding-bottom: var(--spacing-xxs-vw); }
.padding-vertical-xs-vw { padding-top: var(--spacing-xs-vw); padding-bottom: var(--spacing-xs-vw); }
.padding-vertical-s-vw { padding-top: var(--spacing-s-vw); padding-bottom: var(--spacing-s-vw); }
.padding-vertical-m-vw { padding-top: var(--spacing-m-vw); padding-bottom: var(--spacing-m-vw); }
.padding-vertical-l-vw { padding-top: var(--spacing-l-vw); padding-bottom: var(--spacing-l-vw); }
.padding-vertical-xl-vw { padding-top: var(--spacing-xl-vw); padding-bottom: var(--spacing-xl-vw); }
.padding-vertical-xxl-vw { padding-top: var(--spacing-xxl-vw); padding-bottom: var(--spacing-xxl-vw); }
.padding-vertical-xxxl-vw { padding-top: var(--spacing-xxxl-vw); padding-bottom: var(--spacing-xxxl-vw); }

/* VIEWPORT HEIGHT (VH) */
.padding-vertical-xxxs-vh { padding-top: var(--spacing-xxxs-vh); padding-bottom: var(--spacing-xxxs-vh); }
.padding-vertical-xxs-vh { padding-top: var(--spacing-xxs-vh); padding-bottom: var(--spacing-xxs-vh); }
.padding-vertical-xs-vh { padding-top: var(--spacing-xs-vh); padding-bottom: var(--spacing-xs-vh); }
.padding-vertical-s-vh { padding-top: var(--spacing-s-vh); padding-bottom: var(--spacing-s-vh); }
.padding-vertical-m-vh { padding-top: var(--spacing-m-vh); padding-bottom: var(--spacing-m-vh); }
.padding-vertical-l-vh { padding-top: var(--spacing-l-vh); padding-bottom: var(--spacing-l-vh); }
.padding-vertical-xl-vh { padding-top: var(--spacing-xl-vh); padding-bottom: var(--spacing-xl-vh); }
.padding-vertical-xxl-vh { padding-top: var(--spacing-xxl-vh); padding-bottom: var(--spacing-xxl-vh); }
.padding-vertical-xxxl-vh { padding-top: var(--spacing-xxxl-vh); padding-bottom: var(--spacing-xxxl-vh); }




/* RESPONSIVE PADDING RULES */
/* EM RESPONSIVE */
.padding-xxxs-em-responsive { padding: var(--spacing-xxxs-em-responsive); }
.padding-xxs-em-responsive { padding: var(--spacing-xxs-em-responsive); }
.padding-xs-em-responsive { padding: var(--spacing-xs-em-responsive); }
.padding-s-em-responsive { padding: var(--spacing-s-em-responsive); }
.padding-m-em-responsive { padding: var(--spacing-m-em-responsive); }
.padding-l-em-responsive { padding: var(--spacing-l-em-responsive); }
.padding-xl-em-responsive { padding: var(--spacing-xl-em-responsive); }
.padding-xxl-em-responsive { padding: var(--spacing-xxl-em-responsive); }
.padding-xxxl-em-responsive { padding: var(--spacing-xxxl-em-responsive); }

/* REM RESPONSIVE */
.padding-xxxs-rem-responsive { padding: var(--spacing-xxxs-rem-responsive); }
.padding-xxs-rem-responsive { padding: var(--spacing-xxs-rem-responsive); }
.padding-xs-rem-responsive { padding: var(--spacing-xs-rem-responsive); }
.padding-s-rem-responsive { padding: var(--spacing-s-rem-responsive); }
.padding-m-rem-responsive { padding: var(--spacing-m-rem-responsive); }
.padding-l-rem-responsive { padding: var(--spacing-l-rem-responsive); }
.padding-xl-rem-responsive { padding: var(--spacing-xl-rem-responsive); }
.padding-xxl-rem-responsive { padding: var(--spacing-xxl-rem-responsive); }
.padding-xxxl-rem-responsive { padding: var(--spacing-xxxl-rem-responsive); }




/* PADDING-LEFT RESPONSIVE RULES */
/* EM RESPONSIVE */
.padding-left-xxxs-em-responsive { padding-left: var(--spacing-xxxs-em-responsive); }
.padding-left-xxs-em-responsive { padding-left: var(--spacing-xxs-em-responsive); }
.padding-left-xs-em-responsive { padding-left: var(--spacing-xs-em-responsive); }
.padding-left-s-em-responsive { padding-left: var(--spacing-s-em-responsive); }
.padding-left-m-em-responsive { padding-left: var(--spacing-m-em-responsive); }
.padding-left-l-em-responsive { padding-left: var(--spacing-l-em-responsive); }
.padding-left-xl-em-responsive { padding-left: var(--spacing-xl-em-responsive); }
.padding-left-xxl-em-responsive { padding-left: var(--spacing-xxl-em-responsive); }
.padding-left-xxxl-em-responsive { padding-left: var(--spacing-xxxl-em-responsive); }

/* REM RESPONSIVE */
.padding-left-xxxs-rem-responsive { padding-left: var(--spacing-xxxs-rem-responsive); }
.padding-left-xxs-rem-responsive { padding-left: var(--spacing-xxs-rem-responsive); }
.padding-left-xs-rem-responsive { padding-left: var(--spacing-xs-rem-responsive); }
.padding-left-s-rem-responsive { padding-left: var(--spacing-s-rem-responsive); }
.padding-left-m-rem-responsive { padding-left: var(--spacing-m-rem-responsive); }
.padding-left-l-rem-responsive { padding-left: var(--spacing-l-rem-responsive); }
.padding-left-xl-rem-responsive { padding-left: var(--spacing-xl-rem-responsive); }
.padding-left-xxl-rem-responsive { padding-left: var(--spacing-xxl-rem-responsive); }
.padding-left-xxxl-rem-responsive { padding-left: var(--spacing-xxxl-rem-responsive); }




/* PADDING-TOP RESPONSIVE RULES */
/* EM RESPONSIVE */
.padding-top-xxxs-em-responsive { padding-top: var(--spacing-xxxs-em-responsive); }
.padding-top-xxs-em-responsive { padding-top: var(--spacing-xxs-em-responsive); }
.padding-top-xs-em-responsive { padding-top: var(--spacing-xs-em-responsive); }
.padding-top-s-em-responsive { padding-top: var(--spacing-s-em-responsive); }
.padding-top-m-em-responsive { padding-top: var(--spacing-m-em-responsive); }
.padding-top-l-em-responsive { padding-top: var(--spacing-l-em-responsive); }
.padding-top-xl-em-responsive { padding-top: var(--spacing-xl-em-responsive); }
.padding-top-xxl-em-responsive { padding-top: var(--spacing-xxl-em-responsive); }
.padding-top-xxxl-em-responsive { padding-top: var(--spacing-xxxl-em-responsive); }

/* REM RESPONSIVE */
.padding-top-xxxs-rem-responsive { padding-top: var(--spacing-xxxs-rem-responsive); }
.padding-top-xxs-rem-responsive { padding-top: var(--spacing-xxs-rem-responsive); }
.padding-top-xs-rem-responsive { padding-top: var(--spacing-xs-rem-responsive); }
.padding-top-s-rem-responsive { padding-top: var(--spacing-s-rem-responsive); }
.padding-top-m-rem-responsive { padding-top: var(--spacing-m-rem-responsive); }
.padding-top-l-rem-responsive { padding-top: var(--spacing-l-rem-responsive); }
.padding-top-xl-rem-responsive { padding-top: var(--spacing-xl-rem-responsive); }
.padding-top-xxl-rem-responsive { padding-top: var(--spacing-xxl-rem-responsive); }
.padding-top-xxxl-rem-responsive { padding-top: var(--spacing-xxxl-rem-responsive); }




/* PADDING-RIGHT RESPONSIVE RULES */
/* EM RESPONSIVE */
.padding-right-xxxs-em-responsive { padding-right: var(--spacing-xxxs-em-responsive); }
.padding-right-xxs-em-responsive { padding-right: var(--spacing-xxs-em-responsive); }
.padding-right-xs-em-responsive { padding-right: var(--spacing-xs-em-responsive); }
.padding-right-s-em-responsive { padding-right: var(--spacing-s-em-responsive); }
.padding-right-m-em-responsive { padding-right: var(--spacing-m-em-responsive); }
.padding-right-l-em-responsive { padding-right: var(--spacing-l-em-responsive); }
.padding-right-xl-em-responsive { padding-right: var(--spacing-xl-em-responsive); }
.padding-right-xxl-em-responsive { padding-right: var(--spacing-xxl-em-responsive); }
.padding-right-xxxl-em-responsive { padding-right: var(--spacing-xxxl-em-responsive); }

/* REM RESPONSIVE */
.padding-right-xxxs-rem-responsive { padding-right: var(--spacing-xxxs-rem-responsive); }
.padding-right-xxs-rem-responsive { padding-right: var(--spacing-xxs-rem-responsive); }
.padding-right-xs-rem-responsive { padding-right: var(--spacing-xs-rem-responsive); }
.padding-right-s-rem-responsive { padding-right: var(--spacing-s-rem-responsive); }
.padding-right-m-rem-responsive { padding-right: var(--spacing-m-rem-responsive); }
.padding-right-l-rem-responsive { padding-right: var(--spacing-l-rem-responsive); }
.padding-right-xl-rem-responsive { padding-right: var(--spacing-xl-rem-responsive); }
.padding-right-xxl-rem-responsive { padding-right: var(--spacing-xxl-rem-responsive); }
.padding-right-xxxl-rem-responsive { padding-right: var(--spacing-xxxl-rem-responsive); }




/* PADDING-BOTTOM RESPONSIVE RULES */
/* EM RESPONSIVE */
.padding-bottom-xxxs-em-responsive { padding-bottom: var(--spacing-xxxs-em-responsive); }
.padding-bottom-xxs-em-responsive { padding-bottom: var(--spacing-xxs-em-responsive); }
.padding-bottom-xs-em-responsive { padding-bottom: var(--spacing-xs-em-responsive); }
.padding-bottom-s-em-responsive { padding-bottom: var(--spacing-s-em-responsive); }
.padding-bottom-m-em-responsive { padding-bottom: var(--spacing-m-em-responsive); }
.padding-bottom-l-em-responsive { padding-bottom: var(--spacing-l-em-responsive); }
.padding-bottom-xl-em-responsive { padding-bottom: var(--spacing-xl-em-responsive); }
.padding-bottom-xxl-em-responsive { padding-bottom: var(--spacing-xxl-em-responsive); }
.padding-bottom-xxxl-em-responsive { padding-bottom: var(--spacing-xxxl-em-responsive); }

/* REM RESPONSIVE */
.padding-bottom-xxxs-rem-responsive { padding-bottom: var(--spacing-xxxs-rem-responsive); }
.padding-bottom-xxs-rem-responsive { padding-bottom: var(--spacing-xxs-rem-responsive); }
.padding-bottom-xs-rem-responsive { padding-bottom: var(--spacing-xs-rem-responsive); }
.padding-bottom-s-rem-responsive { padding-bottom: var(--spacing-s-rem-responsive); }
.padding-bottom-m-rem-responsive { padding-bottom: var(--spacing-m-rem-responsive); }
.padding-bottom-l-rem-responsive { padding-bottom: var(--spacing-l-rem-responsive); }
.padding-bottom-xl-rem-responsive { padding-bottom: var(--spacing-xl-rem-responsive); }
.padding-bottom-xxl-rem-responsive { padding-bottom: var(--spacing-xxl-rem-responsive); }
.padding-bottom-xxxl-rem-responsive { padding-bottom: var(--spacing-xxxl-rem-responsive); }




/* PADDING HORIZONTAL RESPONSIVE RULES */
/* EM RESPONSIVE */
.padding-horizontal-xxxs-em-responsive { padding-left: var(--spacing-xxxs-em-responsive); padding-right: var(--spacing-xxxs-em-responsive); }
.padding-horizontal-xxs-em-responsive { padding-left: var(--spacing-xxs-em-responsive); padding-right: var(--spacing-xxs-em-responsive); }
.padding-horizontal-xs-em-responsive { padding-left: var(--spacing-xs-em-responsive); padding-right: var(--spacing-xs-em-responsive); }
.padding-horizontal-s-em-responsive { padding-left: var(--spacing-s-em-responsive); padding-right: var(--spacing-s-em-responsive); }
.padding-horizontal-m-em-responsive { padding-left: var(--spacing-m-em-responsive); padding-right: var(--spacing-m-em-responsive); }
.padding-horizontal-l-em-responsive { padding-left: var(--spacing-l-em-responsive); padding-right: var(--spacing-l-em-responsive); }
.padding-horizontal-xl-em-responsive { padding-left: var(--spacing-xl-em-responsive); padding-right: var(--spacing-xl-em-responsive); }
.padding-horizontal-xxl-em-responsive { padding-left: var(--spacing-xxl-em-responsive); padding-right: var(--spacing-xxl-em-responsive); }
.padding-horizontal-xxxl-em-responsive { padding-left: var(--spacing-xxxl-em-responsive); padding-right: var(--spacing-xxxl-em-responsive); }

/* REM RESPONSIVE */
.padding-horizontal-xxxs-rem-responsive { padding-left: var(--spacing-xxxs-rem-responsive); padding-right: var(--spacing-xxxs-rem-responsive); }
.padding-horizontal-xxs-rem-responsive { padding-left: var(--spacing-xxs-rem-responsive); padding-right: var(--spacing-xxs-rem-responsive); }
.padding-horizontal-xs-rem-responsive { padding-left: var(--spacing-xs-rem-responsive); padding-right: var(--spacing-xs-rem-responsive); }
.padding-horizontal-s-rem-responsive { padding-left: var(--spacing-s-rem-responsive); padding-right: var(--spacing-s-rem-responsive); }
.padding-horizontal-m-rem-responsive { padding-left: var(--spacing-m-rem-responsive); padding-right: var(--spacing-m-rem-responsive); }
.padding-horizontal-l-rem-responsive { padding-left: var(--spacing-l-rem-responsive); padding-right: var(--spacing-l-rem-responsive); }
.padding-horizontal-xl-rem-responsive { padding-left: var(--spacing-xl-rem-responsive); padding-right: var(--spacing-xl-rem-responsive); }
.padding-horizontal-xxl-rem-responsive { padding-left: var(--spacing-xxl-rem-responsive); padding-right: var(--spacing-xxl-rem-responsive); }
.padding-horizontal-xxxl-rem-responsive { padding-left: var(--spacing-xxxl-rem-responsive); padding-right: var(--spacing-xxxl-rem-responsive); }




/* PADDING VERTICAL RESPONSIVE RULES */
/* EM RESPONSIVE */
.padding-vertical-xxxs-em-responsive { padding-top: var(--spacing-xxxs-em-responsive); padding-bottom: var(--spacing-xxxs-em-responsive); }
.padding-vertical-xxs-em-responsive { padding-top: var(--spacing-xxs-em-responsive); padding-bottom: var(--spacing-xxs-em-responsive); }
.padding-vertical-xs-em-responsive { padding-top: var(--spacing-xs-em-responsive); padding-bottom: var(--spacing-xs-em-responsive); }
.padding-vertical-s-em-responsive { padding-top: var(--spacing-s-em-responsive); padding-bottom: var(--spacing-s-em-responsive); }
.padding-vertical-m-em-responsive { padding-top: var(--spacing-m-em-responsive); padding-bottom: var(--spacing-m-em-responsive); }
.padding-vertical-l-em-responsive { padding-top: var(--spacing-l-em-responsive); padding-bottom: var(--spacing-l-em-responsive); }
.padding-vertical-xl-em-responsive { padding-top: var(--spacing-xl-em-responsive); padding-bottom: var(--spacing-xl-em-responsive); }
.padding-vertical-xxl-em-responsive { padding-top: var(--spacing-xxl-em-responsive); padding-bottom: var(--spacing-xxl-em-responsive); }
.padding-vertical-xxxl-em-responsive { padding-top: var(--spacing-xxxl-em-responsive); padding-bottom: var(--spacing-xxxl-em-responsive); }

/* REM RESPONSIVE */
.padding-vertical-xxxs-rem-responsive { padding-top: var(--spacing-xxxs-rem-responsive); padding-bottom: var(--spacing-xxxs-rem-responsive); }
.padding-vertical-xxs-rem-responsive { padding-top: var(--spacing-xxs-rem-responsive); padding-bottom: var(--spacing-xxs-rem-responsive); }
.padding-vertical-xs-rem-responsive { padding-top: var(--spacing-xs-rem-responsive); padding-bottom: var(--spacing-xs-rem-responsive); }
.padding-vertical-s-rem-responsive { padding-top: var(--spacing-s-rem-responsive); padding-bottom: var(--spacing-s-rem-responsive); }
.padding-vertical-m-rem-responsive { padding-top: var(--spacing-m-rem-responsive); padding-bottom: var(--spacing-m-rem-responsive); }
.padding-vertical-l-rem-responsive { padding-top: var(--spacing-l-rem-responsive); padding-bottom: var(--spacing-l-rem-responsive); }
.padding-vertical-xl-rem-responsive { padding-top: var(--spacing-xl-rem-responsive); padding-bottom: var(--spacing-xl-rem-responsive); }
.padding-vertical-xxl-rem-responsive { padding-top: var(--spacing-xxl-rem-responsive); padding-bottom: var(--spacing-xxl-rem-responsive); }
.padding-vertical-xxxl-rem-responsive { padding-top: var(--spacing-xxxl-rem-responsive); padding-bottom: var(--spacing-xxxl-rem-responsive); }




/* BACKGROUND COLOR RULES */
.background-color1-10 { background-color: var(--color1-10); }
.background-color1-20 { background-color: var(--color1-20); }
.background-color1-30 { background-color: var(--color1-30); }
.background-color1-40 { background-color: var(--color1-40); }
.background-color1-50 { background-color: var(--color1-50); }
.background-color1-60 { background-color: var(--color1-60); }
.background-color1-70 { background-color: var(--color1-70); }
.background-color1-80 { background-color: var(--color1-80); }

.background-color2-10 { background-color: var(--color2-10); }
.background-color2-20 { background-color: var(--color2-20); }
.background-color2-30 { background-color: var(--color2-30); }
.background-color2-40 { background-color: var(--color2-40); }
.background-color2-50 { background-color: var(--color2-50); }
.background-color2-60 { background-color: var(--color2-60); }
.background-color2-70 { background-color: var(--color2-70); }
.background-color2-80 { background-color: var(--color2-80); }

.background-color3-10 { background-color: var(--color3-10); }
.background-color3-20 { background-color: var(--color3-20); }
.background-color3-30 { background-color: var(--color3-30); }
.background-color3-40 { background-color: var(--color3-40); }
.background-color3-50 { background-color: var(--color3-50); }
.background-color3-60 { background-color: var(--color3-60); }
.background-color3-70 { background-color: var(--color3-70); }
.background-color3-80 { background-color: var(--color3-80); }

.background-color4-10 { background-color: var(--color4-10); }
.background-color4-20 { background-color: var(--color4-20); }
.background-color4-30 { background-color: var(--color4-30); }
.background-color4-40 { background-color: var(--color4-40); }
.background-color4-50 { background-color: var(--color4-50); }
.background-color4-60 { background-color: var(--color4-60); }
.background-color4-70 { background-color: var(--color4-70); }
.background-color4-80 { background-color: var(--color4-80); }

.background-color5-10 { background-color: var(--color5-10); }
.background-color5-20 { background-color: var(--color5-20); }
.background-color5-30 { background-color: var(--color5-30); }
.background-color5-40 { background-color: var(--color5-40); }
.background-color5-50 { background-color: var(--color5-50); }
.background-color5-60 { background-color: var(--color5-60); }
.background-color5-70 { background-color: var(--color5-70); }
.background-color5-80 { background-color: var(--color5-80); }

.background-color6-10 { background-color: var(--color6-10); }
.background-color6-20 { background-color: var(--color6-20); }
.background-color6-30 { background-color: var(--color6-30); }
.background-color6-40 { background-color: var(--color6-40); }
.background-color6-50 { background-color: var(--color6-50); }
.background-color6-60 { background-color: var(--color6-60); }
.background-color6-70 { background-color: var(--color6-70); }
.background-color6-80 { background-color: var(--color6-80); }




/* TEXT RULES */
.text-color1-10 { color: var(--color1-10); }
.text-color1-20 { color: var(--color1-20); }
.text-color1-30 { color: var(--color1-30); }
.text-color1-40 { color: var(--color1-40); }
.text-color1-50 { color: var(--color1-50); }
.text-color1-60 { color: var(--color1-60); }
.text-color1-70 { color: var(--color1-70); }
.text-color1-80 { color: var(--color1-80); }

.text-color2-10 { color: var(--color2-10); }
.text-color2-20 { color: var(--color2-20); }
.text-color2-30 { color: var(--color2-30); }
.text-color2-40 { color: var(--color2-40); }
.text-color2-50 { color: var(--color2-50); }
.text-color2-60 { color: var(--color2-60); }
.text-color2-70 { color: var(--color2-70); }
.text-color2-80 { color: var(--color2-80); }

.text-color3-10 { color: var(--color3-10); }
.text-color3-20 { color: var(--color3-20); }
.text-color3-30 { color: var(--color3-30); }
.text-color3-40 { color: var(--color3-40); }
.text-color3-50 { color: var(--color3-50); }
.text-color3-60 { color: var(--color3-60); }
.text-color3-70 { color: var(--color3-70); }
.text-color3-80 { color: var(--color3-80); }

.text-color4-10 { color: var(--color4-10); }
.text-color4-20 { color: var(--color4-20); }
.text-color4-30 { color: var(--color4-30); }
.text-color4-40 { color: var(--color4-40); }
.text-color4-50 { color: var(--color4-50); }
.text-color4-60 { color: var(--color4-60); }
.text-color4-70 { color: var(--color4-70); }
.text-color4-80 { color: var(--color4-80); }

.text-color5-10 { color: var(--color5-10); }
.text-color5-20 { color: var(--color5-20); }
.text-color5-30 { color: var(--color5-30); }
.text-color5-40 { color: var(--color5-40); }
.text-color5-50 { color: var(--color5-50); }
.text-color5-60 { color: var(--color5-60); }
.text-color5-70 { color: var(--color5-70); }
.text-color5-80 { color: var(--color5-80); }

.text-color6-10 { color: var(--color6-10); }
.text-color6-20 { color: var(--color6-20); }
.text-color6-30 { color: var(--color6-30); }
.text-color6-40 { color: var(--color6-40); }
.text-color6-50 { color: var(--color6-50); }
.text-color6-60 { color: var(--color6-60); }
.text-color6-70 { color: var(--color6-70); }
.text-color6-80 { color: var(--color6-80); }




/* EM-based text sizes */
.text-xxxs-em { font-size: var(--text-xxxs-em); }
.text-xxs-em { font-size: var(--text-xxs-em); }
.text-xs-em { font-size: var(--text-xs-em); }
.text-s-em { font-size: var(--text-s-em); }
.text-m-em { font-size: var(--text-m-em); }
.text-l-em { font-size: var(--text-l-em); }
.text-xl-em { font-size: var(--text-xl-em); }
.text-xxl-em { font-size: var(--text-xxl-em); }
.text-xxxl-em { font-size: var(--text-xxxl-em); }

/* REM-based text sizes */
.text-xxxs-rem { font-size: var(--text-xxxs-rem); }
.text-xxs-rem { font-size: var(--text-xxs-rem); }
.text-xs-rem { font-size: var(--text-xs-rem); }
.text-s-rem { font-size: var(--text-s-rem); }
.text-m-rem { font-size: var(--text-m-rem); }
.text-l-rem { font-size: var(--text-l-rem); }
.text-xl-rem { font-size: var(--text-xl-rem); }
.text-xxl-rem { font-size: var(--text-xxl-rem); }
.text-xxxl-rem { font-size: var(--text-xxxl-rem); }

/* PT-based text sizes */
.text-xxxs-pt { font-size: var(--text-xxxs-pt); }
.text-xxs-pt { font-size: var(--text-xxs-pt); }
.text-xs-pt { font-size: var(--text-xs-pt); }
.text-s-pt { font-size: var(--text-s-pt); }
.text-m-pt { font-size: var(--text-m-pt); }
.text-l-pt { font-size: var(--text-l-pt); }
.text-xl-pt { font-size: var(--text-xl-pt); }
.text-xxl-pt { font-size: var(--text-xxl-pt); }
.text-xxxl-pt { font-size: var(--text-xxxl-pt); }

/* Font weight rules */
.font-weight-100 { font-weight: 100; }
.font-weight-200 { font-weight: 200; }
.font-weight-300 { font-weight: 300; }
.font-weight-400 { font-weight: 400; }
.font-weight-500 { font-weight: 500; }
.font-weight-600 { font-weight: 600; }
.font-weight-700 { font-weight: 700; }
.font-weight-800 { font-weight: 800; }
.font-weight-900 { font-weight: 900; }

.text-align-left { text-align: left; }
.text-align-center { text-align: center; }
.text-align-right { text-align: right; }
.text-align-justify { text-align: justify; }


/* BORDER COLOR RULES */
.border-color1-10 { border-color: var(--color1-10); }
.border-color1-20 { border-color: var(--color1-20); }
.border-color1-30 { border-color: var(--color1-30); }
.border-color1-40 { border-color: var(--color1-40); }
.border-color1-50 { border-color: var(--color1-50); }
.border-color1-60 { border-color: var(--color1-60); }
.border-color1-70 { border-color: var(--color1-70); }
.border-color1-80 { border-color: var(--color1-80); }

.border-color2-10 { border-color: var(--color2-10); }
.border-color2-20 { border-color: var(--color2-20); }
.border-color2-30 { border-color: var(--color2-30); }
.border-color2-40 { border-color: var(--color2-40); }
.border-color2-50 { border-color: var(--color2-50); }
.border-color2-60 { border-color: var(--color2-60); }
.border-color2-70 { border-color: var(--color2-70); }
.border-color2-80 { border-color: var(--color2-80); }

.border-color3-10 { border-color: var(--color3-10); }
.border-color3-20 { border-color: var(--color3-20); }
.border-color3-30 { border-color: var(--color3-30); }
.border-color3-40 { border-color: var(--color3-40); }
.border-color3-50 { border-color: var(--color3-50); }
.border-color3-60 { border-color: var(--color3-60); }
.border-color3-70 { border-color: var(--color3-70); }
.border-color3-80 { border-color: var(--color3-80); }

.border-color4-10 { border-color: var(--color4-10); }
.border-color4-20 { border-color: var(--color4-20); }
.border-color4-30 { border-color: var(--color4-30); }
.border-color4-40 { border-color: var(--color4-40); }
.border-color4-50 { border-color: var(--color4-50); }
.border-color4-60 { border-color: var(--color4-60); }
.border-color4-70 { border-color: var(--color4-70); }
.border-color4-80 { border-color: var(--color4-80); }

.border-color5-10 { border-color: var(--color5-10); }
.border-color5-20 { border-color: var(--color5-20); }
.border-color5-30 { border-color: var(--color5-30); }
.border-color5-40 { border-color: var(--color5-40); }
.border-color5-50 { border-color: var(--color5-50); }
.border-color5-60 { border-color: var(--color5-60); }
.border-color5-70 { border-color: var(--color5-70); }
.border-color5-80 { border-color: var(--color5-80); }

.border-color6-10 { border-color: var(--color6-10); }
.border-color6-20 { border-color: var(--color6-20); }
.border-color6-30 { border-color: var(--color6-30); }
.border-color6-40 { border-color: var(--color6-40); }
.border-color6-50 { border-color: var(--color6-50); }
.border-color6-60 { border-color: var(--color6-60); }
.border-color6-70 { border-color: var(--color6-70); }
.border-color6-80 { border-color: var(--color6-80); }