:root {
  --bg-light: #f7f7f7;
  --bg-dark: #111;
  --space-xs: 0.5em;
  --space-s: 1em;
  --space-m: 1.5em;
  --space-l: 2em;
  --space-xl: 3em;
  --space-xxl: 4em;

  --box-shadow-1: 0 0 21px rgba(0, 0, 0, 0.1);
  --box-shadow-2: 0 0 21px rgba(0, 0, 0, 0.25);
  --box-shadow-3: 0 0 21px rgba(0, 0, 0, 0.5);

  --radius-xs: 0.5em;
  --radius-s: 1em;
  --radius-m: 1.5em;
  --radius-l: 2em;
  --radius-xl: 2.5em;
  --radius-xxl: 3em;
  --radius-50: 50%;
  --radius-circle: 50%;

  --space-xs: 1rem;
  --space-s: 1.5rem;
  --space-m: 2rem;
  --space-l: 3rem;
  --space-xl: 4rem;
  --space-xxl: 7rem;
}
.text-100 {
  font-weight: 100;
}
.text-200 {
  font-weight: 200;
}
.text-300 {
  font-weight: 300;
}
.text-400 {
  font-weight: 400;
}
.text-500 {
  font-weight: 500;
}
.text-600 {
  font-weight: 600;
}
.text-700 {
  font-weight: 700;
}
.text-800 {
  font-weight: 800;
}
.text-900 {
  font-weight: 900;
}
.text-bold {
  font-weight: bold;
}
.text-italic {
  font-style: italic;
}
.text-oblique {
  font-style: oblique;
}
.text-decoration-none {
  -webkit-text-decoration: none;
  text-decoration: none;
}
.text-underline {
  -webkit-text-decoration: underline;
  text-decoration: underline;
}
.text-underline-wavy {
  -webkit-text-decoration: underline wavy;
  text-decoration: underline wavy;
}
.text-underline-dotted {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}
.text-underline-double {
  -webkit-text-decoration: underline double;
  text-decoration: underline double;
}
.text-underline-dashed {
  -webkit-text-decoration: underline dashed;
  text-decoration: underline dashed;
}
.text-overline {
  -webkit-text-decoration: overline;
  text-decoration: overline;
}
.text-line-through {
  -webkit-text-decoration: line-through;
  text-decoration: line-through;
}
.text-transform-none {
  text-transform: none;
}
.text-uppercase {
  text-transform: uppercase;
}
.text-lowercase {
  text-transform: lowercase;
}
.text-capitalize {
  text-transform: capitalize;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.text-justify {
  text-align: justify;
}

input,
button,
textarea,
select {
  font: inherit;
}

.bg--light {
  background-color: var(--bg-light);
}
.bg--dark {
  background-color: var(--bg-dark);
}
.text--light {
  color: var(--text-light);
}
.text--dark {
  color: var(--text-dark);
}
.margin-top--none {
  margin-block-start: 0;
}
.margin-top--xs {
  margin-block-start: var(--space-xs);
}
.margin-top--s {
  margin-block-start: var(--space-s);
}
.margin-top--m {
  margin-block-start: var(--space-m);
}
.margin-top--l {
  margin-block-start: var(--space-l);
}
.margin-top--xl {
  margin-block-start: var(--space-xl);
}
.margin-top--xxl {
  margin-block-start: var(--space-xxl);
}
.margin-right--none {
  margin-inline-end: 0;
}
.margin-right--xs {
  margin-inline-end: var(--space-xs);
}
.margin-right--s {
  margin-inline-end: var(--space-s);
}
.margin-right--m {
  margin-inline-end: var(--space-m);
}
.margin-right--l {
  margin-inline-end: var(--space-l);
}
.margin-right--xl {
  margin-inline-end: var(--space-xl);
}
.margin-right--xxl {
  margin-inline-end: var(--space-xxl);
}
.margin-bottom--none {
  margin-block-end: 0;
}
.margin-bottom--xs {
  margin-block-end: var(--space-xs);
}
.margin-bottom--s {
  margin-block-end: var(--space-s);
}
.margin-bottom--m {
  margin-block-end: var(--space-m);
}
.margin-bottom--l {
  margin-block-end: var(--space-l);
}
.margin-bottom--xl {
  margin-block-end: var(--space-xl);
}
.margin-bottom--xxl {
  margin-block-end: var(--space-xxl);
}
.margin-left--none {
  margin-inline-start: 0;
}
.margin-left--xs {
  margin-inline-start: var(--space-xs);
}
.margin-left--s {
  margin-inline-start: var(--space-s);
}
.margin-left--m {
  margin-inline-start: var(--space-m);
}
.margin-left--l {
  margin-inline-start: var(--space-l);
}
.margin-left--xl {
  margin-inline-start: var(--space-xl);
}
.margin-left--xxl {
  margin-inline-start: var(--space-xxl);
}
.padding-top--none {
  padding-block-start: 0;
}
.padding-top--xs {
  padding-block-start: var(--space-xs);
}
.padding-top--s {
  padding-block-start: var(--space-s);
}
.padding-top--m {
  padding-block-start: var(--space-m);
}
.padding-top--l {
  padding-block-start: var(--space-l);
}
.padding-top--xl {
  padding-block-start: var(--space-xl);
}
.padding-top--xxl {
  padding-block-start: var(--space-xxl);
}
.padding-right--none {
  padding-inline-end: 0;
}
.padding-right--xs {
  padding-inline-end: var(--space-xs);
}
.padding-right--s {
  padding-inline-end: var(--space-s);
}
.padding-right--m {
  padding-inline-end: var(--space-m);
}
.padding-right--l {
  padding-inline-end: var(--space-l);
}
.padding-right--xl {
  padding-inline-end: var(--space-xl);
}
.padding-right--xxl {
  padding-inline-end: var(--space-xxl);
}
.padding-bottom--none {
  padding-block-end: 0;
}
.padding-bottom--xs {
  padding-block-end: var(--space-xs);
}
.padding-bottom--s {
  padding-block-end: var(--space-s);
}
.padding-bottom--m {
  padding-block-end: var(--space-m);
}
.padding-bottom--l {
  padding-block-end: var(--space-l);
}
.padding-bottom--xl {
  padding-block-end: var(--space-xl);
}
.padding-bottom--xxl {
  padding-block-end: var(--space-xxl);
}
.padding-left--none {
  padding-inline-start: 0;
}
.padding-left--xs {
  padding-inline-start: var(--space-xs);
}
.padding-left--s {
  padding-inline-start: var(--space-s);
}
.padding-left--m {
  padding-inline-start: var(--space-m);
}
.padding-left--l {
  padding-inline-start: var(--space-l);
}
.padding-left--xl {
  padding-inline-start: var(--space-xl);
}
.padding-left--xxl {
  padding-inline-start: var(--space-xxl);
}

/* .text--xs,
.text--xs > p,
.text--xs > ol li,
.text--xs > ul li {
  font-size: var(--text-xs);
  line-height: var(--text-xs-lh);
  max-inline-size: var(--text-xs-length);
}
.text--s,
.text--s > p,
.text--s > ol li,
.text--s > ul li {
  font-size: var(--text-s);
  line-height: var(--text-s-lh);
  max-inline-size: var(--text-s-length);
}
.text--m,
.text--m > p,
.text--m > ol li,
.text--m > ul li {
  font-size: var(--text-m);
  line-height: var(--text-m-lh);
  max-inline-size: var(--text-m-length);
}
.text--l,
.text--l > p,
.text--l > ol li,
.text--l > ul li {
  font-size: var(--text-l);
  line-height: var(--text-l-lh);
  max-inline-size: var(--text-l-length);
}
.text--xl,
.text--xl > p,
.text--xl > ol li,
.text--xl > ul li {
  font-size: var(--text-xl);
  line-height: var(--text-xl-lh);
  max-inline-size: var(--text-xl-length);
}
.text--xxl,
.text--xxl > p,
.text--xxl > ol li,
.text--xxl > ul li {
  font-size: var(--text-xxl);
  line-height: var(--text-xxl-lh);
  max-inline-size: var(--text-xxl-length);
} */

.opacity--5 {
  opacity: 0.05;
}
.opacity--10 {
  opacity: 0.1;
}
.opacity--20 {
  opacity: 0.2;
}
.opacity--30 {
  opacity: 0.3;
}
.opacity--40 {
  opacity: 0.4;
}
.opacity--50 {
  opacity: 0.5;
}
.opacity--60 {
  opacity: 0.6;
}
.opacity--70 {
  opacity: 0.7;
}
.opacity--80 {
  opacity: 0.8;
}
.opacity--90 {
  opacity: 0.9;
}
.opacity--95 {
  opacity: 0.95;
}
.box-shadow--m {
  box-shadow: var(--box-shadow-1);
}
.box-shadow--l {
  box-shadow: var(--box-shadow-2);
}
.box-shadow--xl {
  box-shadow: var(--box-shadow-3);
}

.relative {
  position: relative;
}
.sticky {
  position: -webkit-sticky;
  position: sticky;
  inset-block-start: 0rem;
}
.sticky-top--s {
  inset-block-start: 2.5%;
}
.sticky-top--m {
  inset-block-start: 5%;
}
.sticky-top--l {
  inset-block-start: 10%;
}

.center--self {
  margin-left: auto;
  margin-right: auto;
}
.flip--x,
.flip--x > div {
  transform: scaleX(-1);
}
.flip--y,
.flip--y > div {
  transform: scaleY(-1);
}
.flip--xy,
.flip--xy > div {
  transform: scale(-1, -1);
}
.flip--both,
.flip--both > div {
  transform: scale(-1, -1);
}

img.object-fit--cover,
.object-fit--cover img {
  -o-object-fit: cover;
  object-fit: cover;
}
img.object-fit--contain,
.object-fit--contain img {
  -o-object-fit: contain;
  object-fit: contain;
}
img.object-fit--top-left,
.object-fit--top-left img {
  -o-object-position: 10% 10%;
  object-position: 10% 10%;
}
img.object-fit--top-center,
.object-fit--top-center img {
  -o-object-position: 50% 10%;
  object-position: 50% 10%;
}
img.object-fit--top-right,
.object-fit--top-right img {
  -o-object-position: 90% 10%;
  object-position: 90% 10%;
}
img.object-fit--center-left,
.object-fit--center-left img {
  -o-object-position: 10% 50%;
  object-position: 10% 50%;
}
img.object-fit--center-right,
.object-fit--center-right img {
  -o-object-position: 90% 50%;
  object-position: 90% 50%;
}
img.object-fit--bottom-left,
.object-fit--bottom-left img {
  -o-object-position: 10% 90%;
  object-position: 10% 90%;
}
img.object-fit--bottom-center,
.object-fit--bottom-center img {
  -o-object-position: 50% 90%;
  object-position: 50% 90%;
}
img.object-fit--bottom-right,
.object-fit--bottom-right img {
  -o-object-position: 90% 90%;
  object-position: 90% 90%;
}
.height--20 {
  min-block-size: 20vh;
}
.height--30 {
  min-block-size: 30vh;
}
.height--40 {
  min-block-size: 40vh;
}
.height--50 {
  min-block-size: 50vh;
}
.height--60 {
  min-block-size: 60vh;
}
.height--70 {
  min-block-size: 70vh;
}
.height--80 {
  min-block-size: 80vh;
}
.height--90 {
  min-block-size: 90vh;
}
.height--100 {
  min-block-size: 100vh;
}
.height--full {
  min-block-size: 100vh;
}

.max-height--20 {
  max-block-size: 20vh;
}
.max-height--30 {
  max-block-size: 30vh;
}
.max-height--40 {
  max-block-size: 40vh;
}
.max-height--50 {
  max-block-size: 50vh;
}
.max-height--60 {
  max-block-size: 60vh;
}
.max-height--70 {
  max-block-size: 70vh;
}
.max-height--80 {
  max-block-size: 80vh;
}
.max-height--90 {
  max-block-size: 90vh;
}
.max-height--100 {
  max-block-size: 100vh;
}
.max-height--full {
  max-block-size: 100vh;
}

.col-count--1 {
  -moz-column-count: 1;
  column-count: 1;
}
.col-count--2 {
  -moz-column-count: 2;
  column-count: 2;
}
.col-count--3 {
  -moz-column-count: 3;
  column-count: 3;
}
.col-count--4 {
  -moz-column-count: 4;
  column-count: 4;
}
.col-count--5 {
  -moz-column-count: 5;
  column-count: 5;
}

.radius--xs {
  border-radius: var(--radius-xs);
}
.radius--s {
  border-radius: var(--radius-s);
}
.radius--m {
  border-radius: var(--radius-m);
}
.radius--l {
  border-radius: var(--radius-l);
}
.radius--xl {
  border-radius: var(--radius-xl);
}
.radius--xxl {
  border-radius: var(--radius-xxl);
}
.radius--50 {
  border-radius: var(--radius-50);
}
.radius--circle {
  border-radius: var(--radius-circle);
}
.rounded--xs {
  border-radius: var(--radius-xs);
}
.rounded--s {
  border-radius: var(--radius-s);
}
.rounded--m {
  border-radius: var(--radius-m);
}
.rounded--l {
  border-radius: var(--radius-l);
}
.rounded--xl {
  border-radius: var(--radius-xl);
}
.rounded--xxl {
  border-radius: var(--radius-xxl);
}
.rounded--50 {
  border-radius: var(--radius-50);
}
.rounded--circle {
  border-radius: var(--radius-circle);
}
.aspect--1-1 {
  aspect-ratio: 1 / 1;
}
img.aspect--1-1 {
  -o-object-fit: cover;
  object-fit: cover;
}
figure.aspect--1-1 img {
  inline-size: 100%;
  block-size: 100%;
}
.aspect--1-1 iframe {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
}
.aspect--1-2 {
  aspect-ratio: 1 / 2;
}
img.aspect--1-2 {
  -o-object-fit: cover;
  object-fit: cover;
}
figure.aspect--1-2 img {
  inline-size: 100%;
  block-size: 100%;
}
.aspect--1-2 iframe {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 2;
}
.aspect--2-1 {
  aspect-ratio: 2 / 1;
}
img.aspect--2-1 {
  -o-object-fit: cover;
  object-fit: cover;
}
figure.aspect--2-1 img {
  inline-size: 100%;
  block-size: 100%;
}
.aspect--2-1 iframe {
  width: 100%;
  height: 100%;
  aspect-ratio: 2 / 1;
}
.aspect--2-3 {
  aspect-ratio: 2 / 3;
}
img.aspect--2-3 {
  -o-object-fit: cover;
  object-fit: cover;
}
figure.aspect--2-3 img {
  inline-size: 100%;
  block-size: 100%;
}
.aspect--2-3 iframe {
  width: 100%;
  height: 100%;
  aspect-ratio: 2 / 3;
}
.aspect--3-2 {
  aspect-ratio: 3 / 2;
}
img.aspect--3-2 {
  -o-object-fit: cover;
  object-fit: cover;
}
figure.aspect--3-2 img {
  inline-size: 100%;
  block-size: 100%;
}
.aspect--3-2 iframe {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
}
.aspect--3-4 {
  aspect-ratio: 3 / 4;
}
img.aspect--3-4 {
  -o-object-fit: cover;
  object-fit: cover;
}
figure.aspect--3-4 img {
  inline-size: 100%;
  block-size: 100%;
}
.aspect--3-4 iframe {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 4;
}
.aspect--4-3 {
  aspect-ratio: 4 / 3;
}
img.aspect--4-3 {
  -o-object-fit: cover;
  object-fit: cover;
}
figure.aspect--4-3 img {
  inline-size: 100%;
  block-size: 100%;
}
.aspect--4-3 iframe {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
}
.aspect--16-9 {
  aspect-ratio: 16 / 9;
}
img.aspect--16-9 {
  -o-object-fit: cover;
  object-fit: cover;
}
figure.aspect--16-9 img {
  inline-size: 100%;
  block-size: 100%;
}
.aspect--16-9 iframe {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
}
.aspect--9-16 {
  aspect-ratio: 9 / 16;
}
img.aspect--9-16 {
  -o-object-fit: cover;
  object-fit: cover;
}
figure.aspect--9-16 img {
  inline-size: 100%;
  block-size: 100%;
}
.aspect--9-16 iframe {
  width: 100%;
  height: 100%;
  aspect-ratio: 9 / 16;
}
.z--bottom {
  z-index: -1;
}
.z--0 {
  z-index: 0;
}
.z--10 {
  z-index: 10;
}
.z--20 {
  z-index: 20;
}
.z--30 {
  z-index: 30;
}
.z--40 {
  z-index: 40;
}
.z--50 {
  z-index: 50;
}
.z--60 {
  z-index: 60;
}
.z--70 {
  z-index: 70;
}
.z--80 {
  z-index: 80;
}
.z--90 {
  z-index: 90;
}
.z--top {
  z-index: 9999;
}
ul.list--none,
ol.list--none,
.list--none > ul,
.list--none > ol {
  list-style: none;
  padding-inline-start: 0;
  list-style-type: none;
  -webkit-margin-before: 0em;
  margin-block-start: 0em;
  margin-block-end: 0;
}
.visibility--hidden {
  visibility: hidden;
}
.visibility--visible {
  visibility: visible;
}
.gap--xs {
  gap: var(--space-xs);
  --row-gap: var(--space-xs);
  --col-gap: var(--space-xs);
}
.gap--s {
  gap: var(--space-s);
  --row-gap: var(--space-s);
  --col-gap: var(--space-s);
}
.gap--m {
  gap: var(--space-m);
  --row-gap: var(--space-m);
  --col-gap: var(--space-m);
}
.gap--l {
  gap: var(--space-l);
  --row-gap: var(--space-l);
  --col-gap: var(--space-l);
}
.gap--xl {
  gap: var(--space-xl);
  --row-gap: var(--space-xl);
  --col-gap: var(--space-xl);
}
.gap--xxl {
  gap: var(--space-xxl);
  --row-gap: var(--space-xxl);
  --col-gap: var(--space-xxl);
}
.col-gap--xs {
  column-gap: var(--space-xs);
  --col-gap: var(--space-xs);
}
.col-gap--s {
  column-gap: var(--space-s);
  --col-gap: var(--space-s);
}
.col-gap--m {
  column-gap: var(--space-m);
  --col-gap: var(--space-m);
}
.col-gap--l {
  column-gap: var(--space-l);
  --col-gap: var(--space-l);
}
.col-gap--xl {
  column-gap: var(--space-xl);
  --col-gap: var(--space-xl);
}
.col-gap--xxl {
  column-gap: var(--space-xxl);
  --col-gap: var(--space-xxl);
}
.row-gap--xs {
  row-gap: var(--space-xs);
  --row-gap: var(--space-xs);
}
.row-gap--s {
  row-gap: var(--space-s);
  --row-gap: var(--space-s);
}
.row-gap--m {
  row-gap: var(--space-m);
  --row-gap: var(--space-m);
}
.row-gap--l {
  row-gap: var(--space-l);
  --row-gap: var(--space-l);
}
.row-gap--xl {
  row-gap: var(--space-xl);
  --row-gap: var(--space-xl);
}
.row-gap--xxl {
  row-gap: var(--space-xxl);
  --row-gap: var(--space-xxl);
}

@media (max-width: 1280px) {
  .max-height--xl-20 {
    max-block-size: 20vh;
  }
  .max-height--xl-30 {
    max-block-size: 30vh;
  }
  .max-height--xl-40 {
    max-block-size: 40vh;
  }
  .max-height--xl-50 {
    max-block-size: 50vh;
  }
  .max-height--xl-60 {
    max-block-size: 60vh;
  }
  .max-height--xl-70 {
    max-block-size: 70vh;
  }
  .max-height--xl-80 {
    max-block-size: 80vh;
  }
  .max-height--xl-90 {
    max-block-size: 90vh;
  }
  .max-height--xl-100 {
    max-block-size: 100vh;
  }
  .max-height--xl-full {
    max-block-size: 100vh;
  }
  .height--xl-20 {
    min-block-size: 20vh;
  }
  .height--xl-30 {
    min-block-size: 30vh;
  }
  .height--xl-40 {
    min-block-size: 40vh;
  }
  .height--xl-50 {
    min-block-size: 50vh;
  }
  .height--xl-60 {
    min-block-size: 60vh;
  }
  .height--xl-70 {
    min-block-size: 70vh;
  }
  .height--xl-80 {
    min-block-size: 80vh;
  }
  .height--xl-90 {
    min-block-size: 90vh;
  }
  .height--xl-100 {
    min-block-size: 100vh;
  }
  .height--xl-full {
    min-block-size: 100vh;
  }
  .col-count--xl-1 {
    -moz-column-count: 1;
    column-count: 1;
  }
  .col-count--xl-2 {
    -moz-column-count: 2;
    column-count: 2;
  }
  .col-count--xl-3 {
    -moz-column-count: 3;
    column-count: 3;
  }
  .col-count--xl-4 {
    -moz-column-count: 4;
    column-count: 4;
  }
  .col-count--xl-5 {
    -moz-column-count: 5;
    column-count: 5;
  }
  .aspect--xl-1-1 {
    aspect-ratio: 1 / 1;
  }
  img.aspect--xl-1-1 {
    -o-object-fit: cover;
    object-fit: cover;
  }
  .aspect--xl-1-1 iframe {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
  }
  .aspect--xl-1-2 {
    aspect-ratio: 1 / 2;
  }
  img.aspect--xl-1-2 {
    -o-object-fit: cover;
    object-fit: cover;
  }
  .aspect--xl-1-2 iframe {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 2;
  }
  .aspect--xl-2-1 {
    aspect-ratio: 2 / 1;
  }
  img.aspect--xl-2-1 {
    -o-object-fit: cover;
    object-fit: cover;
  }
  .aspect--xl-2-1 iframe {
    width: 100%;
    height: 100%;
    aspect-ratio: 2 / 1;
  }
  .aspect--xl-2-3 {
    aspect-ratio: 2 / 3;
  }
  img.aspect--xl-2-3 {
    -o-object-fit: cover;
    object-fit: cover;
  }
  .aspect--xl-2-3 iframe {
    width: 100%;
    height: 100%;
    aspect-ratio: 2 / 3;
  }
  .aspect--xl-3-2 {
    aspect-ratio: 3 / 2;
  }
  img.aspect--xl-3-2 {
    -o-object-fit: cover;
    object-fit: cover;
  }
  .aspect--xl-3-2 iframe {
    width: 100%;
    height: 100%;
    aspect-ratio: 3 / 2;
  }
  .aspect--xl-3-4 {
    aspect-ratio: 3 / 4;
  }
  img.aspect--xl-3-4 {
    -o-object-fit: cover;
    object-fit: cover;
  }
  .aspect--xl-3-4 iframe {
    width: 100%;
    height: 100%;
    aspect-ratio: 3 / 4;
  }
  .aspect--xl-4-3 {
    aspect-ratio: 4 / 3;
  }
  img.aspect--xl-4-3 {
    -o-object-fit: cover;
    object-fit: cover;
  }
  .aspect--xl-4-3 iframe {
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
  }
  .aspect--xl-16-9 {
    aspect-ratio: 16 / 9;
  }
  img.aspect--xl-16-9 {
    -o-object-fit: cover;
    object-fit: cover;
  }
  .aspect--xl-16-9 iframe {
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
  }
  .aspect--xl-9-16 {
    aspect-ratio: 9 / 16;
  }
  img.aspect--xl-9-16 {
    -o-object-fit: cover;
    object-fit: cover;
  }
  .aspect--xl-9-16 iframe {
    width: 100%;
    height: 100%;
    aspect-ratio: 9 / 16;
  }
  .visibility--xl-hidden {
    visibility: hidden;
  }
  .visibility--xl-visible {
    visibility: visible;
  }
  .gap--xl-xs {
    gap: var(--space-xs);
    --row-gap: var(--space-xs);
    --col-gap: var(--space-xs);
  }
  .gap--xl-s {
    gap: var(--space-s);
    --row-gap: var(--space-s);
    --col-gap: var(--space-s);
  }
  .gap--xl-m {
    gap: var(--space-m);
    --row-gap: var(--space-m);
    --col-gap: var(--space-m);
  }
  .gap--xl-l {
    gap: var(--space-l);
    --row-gap: var(--space-l);
    --col-gap: var(--space-l);
  }
  .gap--xl-xl {
    gap: var(--space-xl);
    --row-gap: var(--space-xl);
    --col-gap: var(--space-xl);
  }
  .gap--xl-xxl {
    gap: var(--space-xxl);
    --row-gap: var(--space-xxl);
    --col-gap: var(--space-xxl);
  }
  .col-gap--xl-xs {
    column-gap: var(--space-xs);
    --col-gap: var(--space-xs);
  }
  .col-gap--xl-s {
    column-gap: var(--space-s);
    --col-gap: var(--space-s);
  }
  .col-gap--xl-m {
    column-gap: var(--space-m);
    --col-gap: var(--space-m);
  }
  .col-gap--xl-l {
    column-gap: var(--space-l);
    --col-gap: var(--space-l);
  }
  .col-gap--xl-xl {
    column-gap: var(--space-xl);
    --col-gap: var(--space-xl);
  }
  .col-gap--xl-xxl {
    column-gap: var(--space-xxl);
    --col-gap: var(--space-xxl);
  }
  .row-gap--xl-xs {
    row-gap: var(--space-xs);
    --row-gap: var(--space-xs);
  }
  .row-gap--xl-s {
    row-gap: var(--space-s);
    --row-gap: var(--space-s);
  }
  .row-gap--xl-m {
    row-gap: var(--space-m);
    --row-gap: var(--space-m);
  }
  .row-gap--xl-l {
    row-gap: var(--space-l);
    --row-gap: var(--space-l);
  }
  .row-gap--xl-xl {
    row-gap: var(--space-xl);
    --row-gap: var(--space-xl);
  }
  .row-gap--xl-xxl {
    row-gap: var(--space-xxl);
    --row-gap: var(--space-xxl);
  }
}
@media (max-width: 992px) {
  /* Medium Margin Classes */
.margin-top-m-none {
  margin-block-start: 0;
}
.margin-top-m-xs {
  margin-block-start: var(--space-xs);
}
.margin-top-m-s {
  margin-block-start: var(--space-s);
}
.margin-top-m-m {
  margin-block-start: var(--space-m);
}
.margin-top-m-l {
  margin-block-start: var(--space-l);
}
.margin-top-m-xl {
  margin-block-start: var(--space-xl);
}
.margin-top-m-xxl {
  margin-block-start: var(--space-xxl);
}

.margin-right-m-none {
  margin-inline-end: 0;
}
.margin-right-m-xs {
  margin-inline-end: var(--space-xs);
}
.margin-right-m-s {
  margin-inline-end: var(--space-s);
}
.margin-right-m-m {
  margin-inline-end: var(--space-m);
}
.margin-right-m-l {
  margin-inline-end: var(--space-l);
}
.margin-right-m-xl {
  margin-inline-end: var(--space-xl);
}
.margin-right-m-xxl {
  margin-inline-end: var(--space-xxl);
}

.margin-bottom-m-none {
  margin-block-end: 0;
}
.margin-bottom-m-xs {
  margin-block-end: var(--space-xs);
}
.margin-bottom-m-s {
  margin-block-end: var(--space-s);
}
.margin-bottom-m-m {
  margin-block-end: var(--space-m);
}
.margin-bottom-m-l {
  margin-block-end: var(--space-l);
}
.margin-bottom-m-xl {
  margin-block-end: var(--space-xl);
}
.margin-bottom-m-xxl {
  margin-block-end: var(--space-xxl);
}

.margin-left-m-none {
  margin-inline-start: 0;
}
.margin-left-m-xs {
  margin-inline-start: var(--space-xs);
}
.margin-left-m-s {
  margin-inline-start: var(--space-s);
}
.margin-left-m-m {
  margin-inline-start: var(--space-m);
}
.margin-left-m-l {
  margin-inline-start: var(--space-l);
}
.margin-left-m-xl {
  margin-inline-start: var(--space-xl);
}
.margin-left-m-xxl {
  margin-inline-start: var(--space-xxl);
}

/* Medium Padding Classes */
.padding-top-m-none {
  padding-block-start: 0;
}
.padding-top-m-xs {
  padding-block-start: var(--space-xs);
}
.padding-top-m-s {
  padding-block-start: var(--space-s);
}
.padding-top-m-m {
  padding-block-start: var(--space-m);
}
.padding-top-m-l {
  padding-block-start: var(--space-l);
}
.padding-top-m-xl {
  padding-block-start: var(--space-xl);
}
.padding-top-m-xxl {
  padding-block-start: var(--space-xxl);
}

.padding-right-m-none {
  padding-inline-end: 0;
}
.padding-right-m-xs {
  padding-inline-end: var(--space-xs);
}
.padding-right-m-s {
  padding-inline-end: var(--space-s);
}
.padding-right-m-m {
  padding-inline-end: var(--space-m);
}
.padding-right-m-l {
  padding-inline-end: var(--space-l);
}
.padding-right-m-xl {
  padding-inline-end: var(--space-xl);
}
.padding-right-m-xxl {
  padding-inline-end: var(--space-xxl);
}

.padding-bottom-m-none {
  padding-block-end: 0;
}
.padding-bottom-m-xs {
  padding-block-end: var(--space-xs);
}
.padding-bottom-m-s {
  padding-block-end: var(--space-s);
}
.padding-bottom-m-m {
  padding-block-end: var(--space-m);
}
.padding-bottom-m-l {
  padding-block-end: var(--space-l);
}
.padding-bottom-m-xl {
  padding-block-end: var(--space-xl);
}
.padding-bottom-m-xxl {
  padding-block-end: var(--space-xxl);
}

.padding-left-m-none {
  padding-inline-start: 0;
}
.padding-left-m-xs {
  padding-inline-start: var(--space-xs);
}
.padding-left-m-s {
  padding-inline-start: var(--space-s);
}
.padding-left-m-m {
  padding-inline-start: var(--space-m);
}
.padding-left-m-l {
  padding-inline-start: var(--space-l);
}
.padding-left-m-xl {
  padding-inline-start: var(--space-xl);
}
.padding-left-m-xxl {
  padding-inline-start: var(--space-xxl);
}

  .max-height--l-20 {
    max-block-size: 20vh;
  }
  .max-height--l-30 {
    max-block-size: 30vh;
  }
  .max-height--l-40 {
    max-block-size: 40vh;
  }
  .max-height--l-50 {
    max-block-size: 50vh;
  }
  .max-height--l-60 {
    max-block-size: 60vh;
  }
  .max-height--l-70 {
    max-block-size: 70vh;
  }
  .max-height--l-80 {
    max-block-size: 80vh;
  }
  .max-height--l-90 {
    max-block-size: 90vh;
  }
  .max-height--l-100 {
    max-block-size: 100vh;
  }
  .max-height--l-full {
    max-block-size: 100vh;
  }
  .height--l-20 {
    min-block-size: 20vh;
  }
  .height--l-30 {
    min-block-size: 30vh;
  }
  .height--l-40 {
    min-block-size: 40vh;
  }
  .height--l-50 {
    min-block-size: 50vh;
  }
  .height--l-60 {
    min-block-size: 60vh;
  }
  .height--l-70 {
    min-block-size: 70vh;
  }
  .height--l-80 {
    min-block-size: 80vh;
  }
  .height--l-90 {
    min-block-size: 90vh;
  }
  .height--l-100 {
    min-block-size: 100vh;
  }
  .height--l-full {
    min-block-size: 100vh;
  }
  .col-count--l-1 {
    -moz-column-count: 1;
    column-count: 1;
  }
  .col-count--l-2 {
    -moz-column-count: 2;
    column-count: 2;
  }
  .col-count--l-3 {
    -moz-column-count: 3;
    column-count: 3;
  }
  .col-count--l-4 {
    -moz-column-count: 4;
    column-count: 4;
  }
  .col-count--l-5 {
    -moz-column-count: 5;
    column-count: 5;
  }
  .aspect--l-1-1 {
    aspect-ratio: 1 / 1;
  }
  img.aspect--l-1-1 {
    -o-object-fit: cover;
    object-fit: cover;
  }
  .aspect--l-1-1 iframe {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
  }
  .aspect--l-1-2 {
    aspect-ratio: 1 / 2;
  }
  img.aspect--l-1-2 {
    -o-object-fit: cover;
    object-fit: cover;
  }
  .aspect--l-1-2 iframe {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 2;
  }
  .aspect--l-2-1 {
    aspect-ratio: 2 / 1;
  }
  img.aspect--l-2-1 {
    -o-object-fit: cover;
    object-fit: cover;
  }
  .aspect--l-2-1 iframe {
    width: 100%;
    height: 100%;
    aspect-ratio: 2 / 1;
  }
  .aspect--l-2-3 {
    aspect-ratio: 2 / 3;
  }
  img.aspect--l-2-3 {
    -o-object-fit: cover;
    object-fit: cover;
  }
  .aspect--l-2-3 iframe {
    width: 100%;
    height: 100%;
    aspect-ratio: 2 / 3;
  }
  .aspect--l-3-2 {
    aspect-ratio: 3 / 2;
  }
  img.aspect--l-3-2 {
    -o-object-fit: cover;
    object-fit: cover;
  }
  .aspect--l-3-2 iframe {
    width: 100%;
    height: 100%;
    aspect-ratio: 3 / 2;
  }
  .aspect--l-3-4 {
    aspect-ratio: 3 / 4;
  }
  img.aspect--l-3-4 {
    -o-object-fit: cover;
    object-fit: cover;
  }
  .aspect--l-3-4 iframe {
    width: 100%;
    height: 100%;
    aspect-ratio: 3 / 4;
  }
  .aspect--l-4-3 {
    aspect-ratio: 4 / 3;
  }
  img.aspect--l-4-3 {
    -o-object-fit: cover;
    object-fit: cover;
  }
  .aspect--l-4-3 iframe {
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
  }
  .aspect--l-16-9 {
    aspect-ratio: 16 / 9;
  }
  img.aspect--l-16-9 {
    -o-object-fit: cover;
    object-fit: cover;
  }
  .aspect--l-16-9 iframe {
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
  }
  .aspect--l-9-16 {
    aspect-ratio: 9 / 16;
  }
  img.aspect--l-9-16 {
    -o-object-fit: cover;
    object-fit: cover;
  }
  .aspect--l-9-16 iframe {
    width: 100%;
    height: 100%;
    aspect-ratio: 9 / 16;
  }
  .visibility--l-hidden {
    visibility: hidden;
  }
  .visibility--l-visible {
    visibility: visible;
  }
  .gap--l-xs {
    gap: var(--space-xs);
    --row-gap: var(--space-xs);
    --col-gap: var(--space-xs);
  }
  .gap--l-s {
    gap: var(--space-s);
    --row-gap: var(--space-s);
    --col-gap: var(--space-s);
  }
  .gap--l-m {
    gap: var(--space-m);
    --row-gap: var(--space-m);
    --col-gap: var(--space-m);
  }
  .gap--l-l {
    gap: var(--space-l);
    --row-gap: var(--space-l);
    --col-gap: var(--space-l);
  }
  .gap--l-xl {
    gap: var(--space-xl);
    --row-gap: var(--space-xl);
    --col-gap: var(--space-xl);
  }
  .gap--l-xxl {
    gap: var(--space-xxl);
    --row-gap: var(--space-xxl);
    --col-gap: var(--space-xxl);
  }
  .col-gap--l-xs {
    column-gap: var(--space-xs);
    --col-gap: var(--space-xs);
  }
  .col-gap--l-s {
    column-gap: var(--space-s);
    --col-gap: var(--space-s);
  }
  .col-gap--l-m {
    column-gap: var(--space-m);
    --col-gap: var(--space-m);
  }
  .col-gap--l-l {
    column-gap: var(--space-l);
    --col-gap: var(--space-l);
  }
  .col-gap--l-xl {
    column-gap: var(--space-xl);
    --col-gap: var(--space-xl);
  }
  .col-gap--l-xxl {
    column-gap: var(--space-xxl);
    --col-gap: var(--space-xxl);
  }
  .row-gap--l-xs {
    row-gap: var(--space-xs);
    --row-gap: var(--space-xs);
  }
  .row-gap--l-s {
    row-gap: var(--space-s);
    --row-gap: var(--space-s);
  }
  .row-gap--l-m {
    row-gap: var(--space-m);
    --row-gap: var(--space-m);
  }
  .row-gap--l-l {
    row-gap: var(--space-l);
    --row-gap: var(--space-l);
  }
  .row-gap--l-xl {
    row-gap: var(--space-xl);
    --row-gap: var(--space-xl);
  }
  .row-gap--l-xxl {
    row-gap: var(--space-xxl);
    --row-gap: var(--space-xxl);
  }
}
@media (max-width: 768px) {
  /* Small Margin Classes */
.margin-top-s-none {
  margin-block-start: 0;
}
.margin-top-s-xs {
  margin-block-start: var(--space-xs);
}
.margin-top-s-s {
  margin-block-start: var(--space-s);
}
.margin-top-s-m {
  margin-block-start: var(--space-m);
}
.margin-top-s-l {
  margin-block-start: var(--space-l);
}
.margin-top-s-xl {
  margin-block-start: var(--space-xl);
}
.margin-top-s-xxl {
  margin-block-start: var(--space-xxl);
}

.margin-right-s-none {
  margin-inline-end: 0;
}
.margin-right-s-xs {
  margin-inline-end: var(--space-xs);
}
.margin-right-s-s {
  margin-inline-end: var(--space-s);
}
.margin-right-s-m {
  margin-inline-end: var(--space-m);
}
.margin-right-s-l {
  margin-inline-end: var(--space-l);
}
.margin-right-s-xl {
  margin-inline-end: var(--space-xl);
}
.margin-right-s-xxl {
  margin-inline-end: var(--space-xxl);
}

.margin-bottom-s-none {
  margin-block-end: 0;
}
.margin-bottom-s-xs {
  margin-block-end: var(--space-xs);
}
.margin-bottom-s-s {
  margin-block-end: var(--space-s);
}
.margin-bottom-s-m {
  margin-block-end: var(--space-m);
}
.margin-bottom-s-l {
  margin-block-end: var(--space-l);
}
.margin-bottom-s-xl {
  margin-block-end: var(--space-xl);
}
.margin-bottom-s-xxl {
  margin-block-end: var(--space-xxl);
}

.margin-left-s-none {
  margin-inline-start: 0;
}
.margin-left-s-xs {
  margin-inline-start: var(--space-xs);
}
.margin-left-s-s {
  margin-inline-start: var(--space-s);
}
.margin-left-s-m {
  margin-inline-start: var(--space-m);
}
.margin-left-s-l {
  margin-inline-start: var(--space-l);
}
.margin-left-s-xl {
  margin-inline-start: var(--space-xl);
}
.margin-left-s-xxl {
  margin-inline-start: var(--space-xxl);
}

/* Small Padding Classes */
.padding-top-s-none {
  padding-block-start: 0;
}
.padding-top-s-xs {
  padding-block-start: var(--space-xs);
}
.padding-top-s-s {
  padding-block-start: var(--space-s);
}
.padding-top-s-m {
  padding-block-start: var(--space-m);
}
.padding-top-s-l {
  padding-block-start: var(--space-l);
}
.padding-top-s-xl {
  padding-block-start: var(--space-xl);
}
.padding-top-s-xxl {
  padding-block-start: var(--space-xxl);
}

.padding-right-s-none {
  padding-inline-end: 0;
}
.padding-right-s-xs {
  padding-inline-end: var(--space-xs);
}
.padding-right-s-s {
  padding-inline-end: var(--space-s);
}
.padding-right-s-m {
  padding-inline-end: var(--space-m);
}
.padding-right-s-l {
  padding-inline-end: var(--space-l);
}
.padding-right-s-xl {
  padding-inline-end: var(--space-xl);
}
.padding-right-s-xxl {
  padding-inline-end: var(--space-xxl);
}

.padding-bottom-s-none {
  padding-block-end: 0;
}
.padding-bottom-s-xs {
  padding-block-end: var(--space-xs);
}
.padding-bottom-s-s {
  padding-block-end: var(--space-s);
}
.padding-bottom-s-m {
  padding-block-end: var(--space-m);
}
.padding-bottom-s-l {
  padding-block-end: var(--space-l);
}
.padding-bottom-s-xl {
  padding-block-end: var(--space-xl);
}
.padding-bottom-s-xxl {
  padding-block-end: var(--space-xxl);
}

.padding-left-s-none {
  padding-inline-start: 0;
}
.padding-left-s-xs {
  padding-inline-start: var(--space-xs);
}
.padding-left-s-s {
  padding-inline-start: var(--space-s);
}
.padding-left-s-m {
  padding-inline-start: var(--space-m);
}
.padding-left-s-l {
  padding-inline-start: var(--space-l);
}
.padding-left-s-xl {
  padding-inline-start: var(--space-xl);
}
.padding-left-s-xxl {
  padding-inline-start: var(--space-xxl);
}

  .max-height--m-20 {
    max-block-size: 20vh;
  }
  .max-height--m-30 {
    max-block-size: 30vh;
  }
  .max-height--m-40 {
    max-block-size: 40vh;
  }
  .max-height--m-50 {
    max-block-size: 50vh;
  }
  .max-height--m-60 {
    max-block-size: 60vh;
  }
  .max-height--m-70 {
    max-block-size: 70vh;
  }
  .max-height--m-80 {
    max-block-size: 80vh;
  }
  .max-height--m-90 {
    max-block-size: 90vh;
  }
  .max-height--m-100 {
    max-block-size: 100vh;
  }
  .max-height--m-full {
    max-block-size: 100vh;
  }
  .height--m-20 {
    min-block-size: 20vh;
  }
  .height--m-30 {
    min-block-size: 30vh;
  }
  .height--m-40 {
    min-block-size: 40vh;
  }
  .height--m-50 {
    min-block-size: 50vh;
  }
  .height--m-60 {
    min-block-size: 60vh;
  }
  .height--m-70 {
    min-block-size: 70vh;
  }
  .height--m-80 {
    min-block-size: 80vh;
  }
  .height--m-90 {
    min-block-size: 90vh;
  }
  .height--m-100 {
    min-block-size: 100vh;
  }
  .height--m-full {
    min-block-size: 100vh;
  }
  .col-count--m-1 {
    -moz-column-count: 1;
    column-count: 1;
  }
  .col-count--m-2 {
    -moz-column-count: 2;
    column-count: 2;
  }
  .col-count--m-3 {
    -moz-column-count: 3;
    column-count: 3;
  }
  .col-count--m-4 {
    -moz-column-count: 4;
    column-count: 4;
  }
  .col-count--m-5 {
    -moz-column-count: 5;
    column-count: 5;
  }
  .aspect--m-1-1 {
    aspect-ratio: 1 / 1;
  }
  img.aspect--m-1-1 {
    -o-object-fit: cover;
    object-fit: cover;
  }
  .aspect--m-1-1 iframe {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
  }
  .aspect--m-1-2 {
    aspect-ratio: 1 / 2;
  }
  img.aspect--m-1-2 {
    -o-object-fit: cover;
    object-fit: cover;
  }
  .aspect--m-1-2 iframe {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 2;
  }
  .aspect--m-2-1 {
    aspect-ratio: 2 / 1;
  }
  img.aspect--m-2-1 {
    -o-object-fit: cover;
    object-fit: cover;
  }
  .aspect--m-2-1 iframe {
    width: 100%;
    height: 100%;
    aspect-ratio: 2 / 1;
  }
  .aspect--m-2-3 {
    aspect-ratio: 2 / 3;
  }
  img.aspect--m-2-3 {
    -o-object-fit: cover;
    object-fit: cover;
  }
  .aspect--m-2-3 iframe {
    width: 100%;
    height: 100%;
    aspect-ratio: 2 / 3;
  }
  .aspect--m-3-2 {
    aspect-ratio: 3 / 2;
  }
  img.aspect--m-3-2 {
    -o-object-fit: cover;
    object-fit: cover;
  }
  .aspect--m-3-2 iframe {
    width: 100%;
    height: 100%;
    aspect-ratio: 3 / 2;
  }
  .aspect--m-3-4 {
    aspect-ratio: 3 / 4;
  }
  img.aspect--m-3-4 {
    -o-object-fit: cover;
    object-fit: cover;
  }
  .aspect--m-3-4 iframe {
    width: 100%;
    height: 100%;
    aspect-ratio: 3 / 4;
  }
  .aspect--m-4-3 {
    aspect-ratio: 4 / 3;
  }
  img.aspect--m-4-3 {
    -o-object-fit: cover;
    object-fit: cover;
  }
  .aspect--m-4-3 iframe {
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
  }
  .aspect--m-16-9 {
    aspect-ratio: 16 / 9;
  }
  img.aspect--m-16-9 {
    -o-object-fit: cover;
    object-fit: cover;
  }
  .aspect--m-16-9 iframe {
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
  }
  .aspect--m-9-16 {
    aspect-ratio: 9 / 16;
  }
  img.aspect--m-9-16 {
    -o-object-fit: cover;
    object-fit: cover;
  }
  .aspect--m-9-16 iframe {
    width: 100%;
    height: 100%;
    aspect-ratio: 9 / 16;
  }
  .visibility--m-hidden {
    visibility: hidden;
  }
  .visibility--m-visible {
    visibility: visible;
  }
  .gap--m-xs {
    gap: var(--space-xs);
    --row-gap: var(--space-xs);
    --col-gap: var(--space-xs);
  }
  .gap--m-s {
    gap: var(--space-s);
    --row-gap: var(--space-s);
    --col-gap: var(--space-s);
  }
  .gap--m-m {
    gap: var(--space-m);
    --row-gap: var(--space-m);
    --col-gap: var(--space-m);
  }
  .gap--m-l {
    gap: var(--space-l);
    --row-gap: var(--space-l);
    --col-gap: var(--space-l);
  }
  .gap--m-xl {
    gap: var(--space-xl);
    --row-gap: var(--space-xl);
    --col-gap: var(--space-xl);
  }
  .gap--m-xxl {
    gap: var(--space-xxl);
    --row-gap: var(--space-xxl);
    --col-gap: var(--space-xxl);
  }
  .col-gap--m-xs {
    column-gap: var(--space-xs);
    --col-gap: var(--space-xs);
  }
  .col-gap--m-s {
    column-gap: var(--space-s);
    --col-gap: var(--space-s);
  }
  .col-gap--m-m {
    column-gap: var(--space-m);
    --col-gap: var(--space-m);
  }
  .col-gap--m-l {
    column-gap: var(--space-l);
    --col-gap: var(--space-l);
  }
  .col-gap--m-xl {
    column-gap: var(--space-xl);
    --col-gap: var(--space-xl);
  }
  .col-gap--m-xxl {
    column-gap: var(--space-xxl);
    --col-gap: var(--space-xxl);
  }
  .row-gap--m-xs {
    row-gap: var(--space-xs);
    --row-gap: var(--space-xs);
  }
  .row-gap--m-s {
    row-gap: var(--space-s);
    --row-gap: var(--space-s);
  }
  .row-gap--m-m {
    row-gap: var(--space-m);
    --row-gap: var(--space-m);
  }
  .row-gap--m-l {
    row-gap: var(--space-l);
    --row-gap: var(--space-l);
  }
  .row-gap--m-xl {
    row-gap: var(--space-xl);
    --row-gap: var(--space-xl);
  }
  .row-gap--m-xxl {
    row-gap: var(--space-xxl);
    --row-gap: var(--space-xxl);
  }
}
@media (max-width: 480px) {
  /* Extra Small Margin Classes */
.margin-top-xs-none {
  margin-block-start: 0;
}
.margin-top-xs-xs {
  margin-block-start: var(--space-xs);
}
.margin-top-xs-s {
  margin-block-start: var(--space-s);
}
.margin-top-xs-m {
  margin-block-start: var(--space-m);
}
.margin-top-xs-l {
  margin-block-start: var(--space-l);
}
.margin-top-xs-xl {
  margin-block-start: var(--space-xl);
}
.margin-top-xs-xxl {
  margin-block-start: var(--space-xxl);
}

.margin-right-xs-none {
  margin-inline-end: 0;
}
.margin-right-xs-xs {
  margin-inline-end: var(--space-xs);
}
.margin-right-xs-s {
  margin-inline-end: var(--space-s);
}
.margin-right-xs-m {
  margin-inline-end: var(--space-m);
}
.margin-right-xs-l {
  margin-inline-end: var(--space-l);
}
.margin-right-xs-xl {
  margin-inline-end: var(--space-xl);
}
.margin-right-xs-xxl {
  margin-inline-end: var(--space-xxl);
}

.margin-bottom-xs-none {
  margin-block-end: 0;
}
.margin-bottom-xs-xs {
  margin-block-end: var(--space-xs);
}
.margin-bottom-xs-s {
  margin-block-end: var(--space-s);
}
.margin-bottom-xs-m {
  margin-block-end: var(--space-m);
}
.margin-bottom-xs-l {
  margin-block-end: var(--space-l);
}
.margin-bottom-xs-xl {
  margin-block-end: var(--space-xl);
}
.margin-bottom-xs-xxl {
  margin-block-end: var(--space-xxl);
}

.margin-left-xs-none {
  margin-inline-start: 0;
}
.margin-left-xs-xs {
  margin-inline-start: var(--space-xs);
}
.margin-left-xs-s {
  margin-inline-start: var(--space-s);
}
.margin-left-xs-m {
  margin-inline-start: var(--space-m);
}
.margin-left-xs-l {
  margin-inline-start: var(--space-l);
}
.margin-left-xs-xl {
  margin-inline-start: var(--space-xl);
}
.margin-left-xs-xxl {
  margin-inline-start: var(--space-xxl);
}

/* Extra Small Padding Classes */
.padding-top-xs-none {
  padding-block-start: 0;
}
.padding-top-xs-xs {
  padding-block-start: var(--space-xs);
}
.padding-top-xs-s {
  padding-block-start: var(--space-s);
}
.padding-top-xs-m {
  padding-block-start: var(--space-m);
}
.padding-top-xs-l {
  padding-block-start: var(--space-l);
}
.padding-top-xs-xl {
  padding-block-start: var(--space-xl);
}
.padding-top-xs-xxl {
  padding-block-start: var(--space-xxl);
}

.padding-right-xs-none {
  padding-inline-end: 0;
}
.padding-right-xs-xs {
  padding-inline-end: var(--space-xs);
}
.padding-right-xs-s {
  padding-inline-end: var(--space-s);
}
.padding-right-xs-m {
  padding-inline-end: var(--space-m);
}
.padding-right-xs-l {
  padding-inline-end: var(--space-l);
}
.padding-right-xs-xl {
  padding-inline-end: var(--space-xl);
}
.padding-right-xs-xxl {
  padding-inline-end: var(--space-xxl);
}

.padding-bottom-xs-none {
  padding-block-end: 0;
}
.padding-bottom-xs-xs {
  padding-block-end: var(--space-xs);
}
.padding-bottom-xs-s {
  padding-block-end: var(--space-s);
}
.padding-bottom-xs-m {
  padding-block-end: var(--space-m);
}
.padding-bottom-xs-l {
  padding-block-end: var(--space-l);
}
.padding-bottom-xs-xl {
  padding-block-end: var(--space-xl);
}
.padding-bottom-xs-xxl {
  padding-block-end: var(--space-xxl);
}

.padding-left-xs-none {
  padding-inline-start: 0;
}
.padding-left-xs-xs {
  padding-inline-start: var(--space-xs);
}
.padding-left-xs-s {
  padding-inline-start: var(--space-s);
}
.padding-left-xs-m {
  padding-inline-start: var(--space-m);
}
.padding-left-xs-l {
  padding-inline-start: var(--space-l);
}
.padding-left-xs-xl {
  padding-inline-start: var(--space-xl);
}
.padding-left-xs-xxl {
  padding-inline-start: var(--space-xxl);
}

  .max-height--s-20 {
    max-block-size: 20vh;
  }
  .max-height--s-30 {
    max-block-size: 30vh;
  }
  .max-height--s-40 {
    max-block-size: 40vh;
  }
  .max-height--s-50 {
    max-block-size: 50vh;
  }
  .max-height--s-60 {
    max-block-size: 60vh;
  }
  .max-height--s-70 {
    max-block-size: 70vh;
  }
  .max-height--s-80 {
    max-block-size: 80vh;
  }
  .max-height--s-90 {
    max-block-size: 90vh;
  }
  .max-height--s-100 {
    max-block-size: 100vh;
  }
  .max-height--s-full {
    max-block-size: 100vh;
  }
  .height--s-20 {
    min-block-size: 20vh;
  }
  .height--s-30 {
    min-block-size: 30vh;
  }
  .height--s-40 {
    min-block-size: 40vh;
  }
  .height--s-50 {
    min-block-size: 50vh;
  }
  .height--s-60 {
    min-block-size: 60vh;
  }
  .height--s-70 {
    min-block-size: 70vh;
  }
  .height--s-80 {
    min-block-size: 80vh;
  }
  .height--s-90 {
    min-block-size: 90vh;
  }
  .height--s-100 {
    min-block-size: 100vh;
  }
  .height--s-full {
    min-block-size: 100vh;
  }
  .col-count--s-1 {
    -moz-column-count: 1;
    column-count: 1;
  }
  .col-count--s-2 {
    -moz-column-count: 2;
    column-count: 2;
  }
  .col-count--s-3 {
    -moz-column-count: 3;
    column-count: 3;
  }
  .col-count--s-4 {
    -moz-column-count: 4;
    column-count: 4;
  }
  .col-count--s-5 {
    -moz-column-count: 5;
    column-count: 5;
  }
  .aspect--s-1-1 {
    aspect-ratio: 1 / 1;
  }
  img.aspect--s-1-1 {
    -o-object-fit: cover;
    object-fit: cover;
  }
  .aspect--s-1-1 iframe {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
  }
  .aspect--s-1-2 {
    aspect-ratio: 1 / 2;
  }
  img.aspect--s-1-2 {
    -o-object-fit: cover;
    object-fit: cover;
  }
  .aspect--s-1-2 iframe {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 2;
  }
  .aspect--s-2-1 {
    aspect-ratio: 2 / 1;
  }
  img.aspect--s-2-1 {
    -o-object-fit: cover;
    object-fit: cover;
  }
  .aspect--s-2-1 iframe {
    width: 100%;
    height: 100%;
    aspect-ratio: 2 / 1;
  }
  .aspect--s-2-3 {
    aspect-ratio: 2 / 3;
  }
  img.aspect--s-2-3 {
    -o-object-fit: cover;
    object-fit: cover;
  }
  .aspect--s-2-3 iframe {
    width: 100%;
    height: 100%;
    aspect-ratio: 2 / 3;
  }
  .aspect--s-3-2 {
    aspect-ratio: 3 / 2;
  }
  img.aspect--s-3-2 {
    -o-object-fit: cover;
    object-fit: cover;
  }
  .aspect--s-3-2 iframe {
    width: 100%;
    height: 100%;
    aspect-ratio: 3 / 2;
  }
  .aspect--s-3-4 {
    aspect-ratio: 3 / 4;
  }
  img.aspect--s-3-4 {
    -o-object-fit: cover;
    object-fit: cover;
  }
  .aspect--s-3-4 iframe {
    width: 100%;
    height: 100%;
    aspect-ratio: 3 / 4;
  }
  .aspect--s-4-3 {
    aspect-ratio: 4 / 3;
  }
  img.aspect--s-4-3 {
    -o-object-fit: cover;
    object-fit: cover;
  }
  .aspect--s-4-3 iframe {
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
  }
  .aspect--s-16-9 {
    aspect-ratio: 16 / 9;
  }
  img.aspect--s-16-9 {
    -o-object-fit: cover;
    object-fit: cover;
  }
  .aspect--s-16-9 iframe {
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
  }
  .aspect--s-9-16 {
    aspect-ratio: 9 / 16;
  }
  img.aspect--s-9-16 {
    -o-object-fit: cover;
    object-fit: cover;
  }
  .aspect--s-9-16 iframe {
    width: 100%;
    height: 100%;
    aspect-ratio: 9 / 16;
  }
  .visibility--s-hidden {
    visibility: hidden;
  }
  .visibility--s-visible {
    visibility: visible;
  }
  .gap--s-xs {
    gap: var(--space-xs);
    --row-gap: var(--space-xs);
    --col-gap: var(--space-xs);
  }
  .gap--s-s {
    gap: var(--space-s);
    --row-gap: var(--space-s);
    --col-gap: var(--space-s);
  }
  .gap--s-m {
    gap: var(--space-m);
    --row-gap: var(--space-m);
    --col-gap: var(--space-m);
  }
  .gap--s-l {
    gap: var(--space-l);
    --row-gap: var(--space-l);
    --col-gap: var(--space-l);
  }
  .gap--s-xl {
    gap: var(--space-xl);
    --row-gap: var(--space-xl);
    --col-gap: var(--space-xl);
  }
  .gap--s-xxl {
    gap: var(--space-xxl);
    --row-gap: var(--space-xxl);
    --col-gap: var(--space-xxl);
  }
  .col-gap--s-xs {
    column-gap: var(--space-xs);
    --col-gap: var(--space-xs);
  }
  .col-gap--s-s {
    column-gap: var(--space-s);
    --col-gap: var(--space-s);
  }
  .col-gap--s-m {
    column-gap: var(--space-m);
    --col-gap: var(--space-m);
  }
  .col-gap--s-l {
    column-gap: var(--space-l);
    --col-gap: var(--space-l);
  }
  .col-gap--s-xl {
    column-gap: var(--space-xl);
    --col-gap: var(--space-xl);
  }
  .col-gap--s-xxl {
    column-gap: var(--space-xxl);
    --col-gap: var(--space-xxl);
  }
  .row-gap--s-xs {
    row-gap: var(--space-xs);
    --row-gap: var(--space-xs);
  }
  .row-gap--s-s {
    row-gap: var(--space-s);
    --row-gap: var(--space-s);
  }
  .row-gap--s-m {
    row-gap: var(--space-m);
    --row-gap: var(--space-m);
  }
  .row-gap--s-l {
    row-gap: var(--space-l);
    --row-gap: var(--space-l);
  }
  .row-gap--s-xl {
    row-gap: var(--space-xl);
    --row-gap: var(--space-xl);
  }
  .row-gap--s-xxl {
    row-gap: var(--space-xxl);
    --row-gap: var(--space-xxl);
  }
}