@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap");
:root {
  --breakpoint-phone: 640px;
  --breakpoint-tablet: 821px;
  --breakpoint-large-tablet: 1200px;
  --breakpoint-laptop: 1400px;
}

/** 
General variables used in the sass.

Structured with each section having a `:root{}` element and then the sass variables for the content
of that `:root{}` element.

01. Breakpoints
02. Design variables
03. Typography variables
04. Layout variables
0X. Other
*/
/** Source Sans 3 */
/* ==========================================================================
   01. BREAKPOINTS
   ========================================================================== */
/**
Breakpoint variables are declared in general/breakpoints.scss
This is because there are some breakpoint mixins used in this variables file that need to be
declared before this file is read.
  */
/* ==========================================================================
   02. DESIGN VARIABLES
   ========================================================================== */
:root {
  /** Primary colour */
  --primary-100: #ffe6cc;
  --primary-100-rgb: 255, 230, 204;
  --primary-200: #a8d4f9;
  --primary-200-rgb: 168, 213, 249;
  --primary-300: #004285;
  --primary-300-rgb: 0, 67, 133;
  --primary-400: #162f3f;
  --primary-400-rgb: 22, 47, 63;
  --primary-500: #b34700;
  --primary-500-rgb: 179, 71, 0;
  /** Secondary colour */
  --secondary-100: #dfe8ee;
  --secondary-100-rgb: 223, 232, 238;
  --secondary-200: #ccfff8;
  --secondary-200-rgb: 204, 255, 248;
  --secondary-300: #ffdf7f;
  --secondary-300-rgb: 255, 223, 127;
  --secondary-400: #97ddf4;
  --secondary-400-rgb: 151, 221, 244;
  --secondary-500: #001329;
  --secondary-500-rgb: 0, 19, 41;
  /** Light colour */
  --light-200: #ffffff;
  --light-200-rgb: 255, 255, 255;
  --light-300: #d9d9d9;
  --light-300-rgb: 217, 217, 217;
  --light-400: #f9f9f9;
  --light-400-rgb: 249, 249, 249;
  --light-500: #f5f5f5;
  --light-500-rgb: 245, 245, 245;
  --light-600: #939495;
  --light-600-rgb: 147, 148, 149;
  /** Dark colour */
  --dark-200: #2e2d2d;
  --dark-200-rgb: 46, 45, 45;
  --dark-300: #1e1e1e;
  --dark-300-rgb: 30, 30, 30;
  --dark-400: #000000;
  --dark-400-rgb: 0, 0, 0;
  /** Success colour */
  --success-200: #22946e;
  --success-200-rgb: 34, 148, 110;
  --success-300: #5ba989;
  --success-300-rgb: 91, 169, 137;
  --success-400: #86bfa6;
  --success-400-rgb: 134, 191, 166;
  /** Warning colour */
  --warning-200: #fe7435;
  --warning-200-rgb: 254, 116, 53;
  --warning-300: #ba945a;
  --warning-300-rgb: 186, 148, 90;
  --warning-400: #cbae84;
  --warning-400-rgb: 203, 174, 132;
  /** Danger colour */
  --danger-100: #ff0000;
  --danger-100-rgb: 255, 0, 0;
  --danger-200: #9c2121;
  --danger-200-rgb: 156, 33, 33;
  --danger-300: #b4544c;
  --danger-300-rgb: 180, 84, 76;
  --danger-400: #ca7f77;
  --danger-400-rgb: 202, 127, 119;
  /** Info colour */
  --info-200: #21498a;
  --info-200-rgb: 33, 73, 138;
  --info-300: #99afc6;
  --info-300-rgb: 153, 175, 198;
  --info-400: #ccd7e2;
  --info-400-rgb: 204, 215, 226;
  /** False colour */
  --false-200: #e6ebf1;
  --false-200-rgb: 230, 235, 241;
  --false-300: #808080;
  --false-300-rgb: 128, 128, 128;
  --bg-opacity: 1;
  --text-opacity: 1;
}

/** Primary Colours */
/* ==========================================================================
   03. TYPOGRAPHY VARIABLES
   ========================================================================== */
:root {
  --font-primary: 'Source Sans 3', sans-serif;
  --font-secondary: 'Montserrat', sans-serif;
  --font-weight-header: 700;
  --font-weight-body: 400;
  --font-weight-bold: 800;
  --font-weight-light: 300;
}

/* ==========================================================================
   04. LAYOUT VARIABLES
   ========================================================================== */
:root {
  --spacing-0: 0;
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-5: 1.25rem;
  --spacing-6: 1.5rem;
  --spacing-7: 1.75rem;
  --spacing-8: 2rem;
  --spacing-9: 2.25rem;
  --spacing-10: 2.5rem;
  --spacing-11: 2.75rem;
  --spacing-12: 3rem;
  --spacing-14: 3.5rem;
  --spacing-16: 4rem;
  --spacing-20: 5rem;
  --spacing-24: 6rem;
  --footer-height: 370px;
  /** Borders */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 18px;
  --radius-2xl: 24px;
  --radius-full: 100%;
}

/** Heights */
/* ==========================================================================
   0X. OTHER VARIABLES
   ========================================================================== */
/** 
General typography class styling.

!!!
Should include element styling.
These classes should only include general classes/mixin like `.weight--bold`, `.text-center`, etc.
Any component general classes/mixins like `.short-link`, etc, should be in the
`scss/custom/typography.scss` file which will be declared after all the general files.
!!!

The only file this file should rely on to be called before (as it uses variables from it) it is the
`scss/general/variables.scss` file.

01. Elements
02. Colour
03. Weight
04. Style
0X. Other
*/
/* ==========================================================================
   01. ELEMENTS
   ========================================================================== */
html,
body {
  font-family: 'Public Sans', sans-serif;
}

h1 {
  font-size: 40px;
  line-height: 47px;
  margin: 0.5rem 0;
}

@media (max-width: 640px) {
  h1 {
    font-size: 30px;
    line-height: 35px;
  }
}

h2 {
  font-size: 30px;
  line-height: 35px;
  margin-bottom: 1rem;
}

h3 {
  font-size: 25px;
  line-height: 30px;
}

h4 {
  font-size: 20px;
  line-height: 24px;
}

/* ==========================================================================
   02. COLOUR
   ========================================================================== */
.text-pri {
  color: rgba(var(--primary-300-rgb), var(--text-opacity));
}

.text-pri--100 {
  color: rgba(var(--primary-100-rgb), var(--text-opacity));
}

.text-pri--200 {
  color: rgba(var(--primary-200-rgb), var(--text-opacity));
}

.text-pri--300 {
  color: rgba(var(--primary-300-rgb), var(--text-opacity));
}

.text-pri--400 {
  color: rgba(var(--primary-400-rgb), var(--text-opacity));
}

.text-pri--500 {
  color: rgba(var(--primary-500-rgb), var(--text-opacity));
}

.text-sec {
  color: rgba(var(--secondary-300-rgb), var(--text-opacity));
}

.text-sec--100 {
  color: rgba(var(--secondary-100-rgb), var(--text-opacity));
}

.text-sec--200 {
  color: rgba(var(--secondary-200-rgb), var(--text-opacity));
}

.text-sec--300 {
  color: rgba(var(--secondary-300-rgb), var(--text-opacity));
}

.text-sec--400 {
  color: rgba(var(--secondary-400-rgb), var(--text-opacity));
}

.text-sec--500 {
  color: rgba(var(--secondary-500-rgb), var(--text-opacity));
}

.text-dark {
  color: rgba(var(--dark-400-rgb), var(--text-opacity));
}

.text-dark--400 {
  color: rgba(var(--dark-400-rgb), var(--text-opacity));
}

.text-dark--300 {
  color: rgba(var(--dark-300-rgb), var(--text-opacity));
}

.text-dark--200 {
  color: rgba(var(--dark-200-rgb), var(--text-opacity));
}

.text-light {
  color: rgba(var(--light-200-rgb), var(--text-opacity));
}

.text-light--200 {
  color: rgba(var(--light-200-rgb), var(--text-opacity));
}

.text-light--300 {
  color: rgba(var(--light-300-rgb), var(--text-opacity));
}

.text-light--400 {
  color: rgba(var(--light-400-rgb), var(--text-opacity));
}

.text-light--500 {
  color: rgba(var(--light-500-rgb), var(--text-opacity));
}

.text-light--600 {
  color: rgba(var(--light-600-rgb), var(--text-opacity));
}

/* ==========================================================================
   03. WEIGHT
   ========================================================================== */
.weight--100 {
  font-weight: 100;
}

.weight--normal {
  font-weight: normal;
}

.weight--bold {
  font-weight: bold;
}

/* ==========================================================================
   04. STYLE
   ========================================================================== */
.text--italics {
  font-style: italic;
}

.text--no-decoration {
  text-decoration: none;
}

.text--underline {
  text-decoration: underline;
}

.font-12 {
  font-size: 12px;
}

.font-14 {
  font-size: 14px;
}

.font-16 {
  font-size: 16px;
}

p:empty {
  margin: 0;
}

/* ==========================================================================
   05. SIZE
   ========================================================================== */
.font--h1 {
  font-size: 40px;
  line-height: 47px;
}

@media (max-width: 640px) {
  .font--h1 {
    font-size: 30px;
    line-height: 35px;
  }
}

.font--h2 {
  font-size: 30px;
  line-height: 35px;
}

.font--h3 {
  font-size: 25px;
  line-height: 30px;
}

.font--h4 {
  font-size: 20px;
  line-height: 24px;
}

/* ==========================================================================
   0X. OTHER
   ========================================================================== */
/** 
General layout class styling.

!!!
These classes should only include general classes/mixin like `.align--center`, `.w--full`, etc.
Any component general classes/mixins like `.key-value-pair`, etc, should be in the
`scss/custom/layout.scss` file which will be declared after all the general files.
!!!

The only file this file should rely on to be called before (as it uses variables from it) it is the
`scss/general/variables.scss` file.


01. Variables
02. Width/height
03. Padding/margin/gap
04. Flex
05. Grid
06. Position
0X. Other
*/
/* ==========================================================================
   01. VARIABLES
   ========================================================================== */
/* ==========================================================================
   02. HEIGHT / WIDTH
   ========================================================================== */
.w {
  width: var(--spacing-1);
}

.w--0 {
  width: var(--spacing-0);
}

.w--1 {
  width: var(--spacing-1);
}

.w--2 {
  width: var(--spacing-2);
}

.w--3 {
  width: var(--spacing-3);
}

.w--4 {
  width: var(--spacing-4);
}

.w--5 {
  width: var(--spacing-5);
}

.w--6 {
  width: var(--spacing-6);
}

.w--7 {
  width: var(--spacing-7);
}

.w--8 {
  width: var(--spacing-8);
}

.w--9 {
  width: var(--spacing-9);
}

.w--10 {
  width: var(--spacing-10);
}

.w--11 {
  width: var(--spacing-11);
}

.w--12 {
  width: var(--spacing-12);
}

.w--14 {
  width: var(--spacing-14);
}

.w--16 {
  width: var(--spacing-16);
}

.w--20 {
  width: var(--spacing-20);
}

.w--24 {
  width: var(--spacing-24);
}

@media (max-width: 640px) {
  .w--mobile.w--mobile {
    width: var(--spacing-1);
  }
}

@media (max-width: 640px) {
  .w--0--mobile.w--0--mobile {
    width: var(--spacing-0);
  }
}

@media (max-width: 640px) {
  .w--1--mobile.w--1--mobile {
    width: var(--spacing-1);
  }
}

@media (max-width: 640px) {
  .w--2--mobile.w--2--mobile {
    width: var(--spacing-2);
  }
}

@media (max-width: 640px) {
  .w--3--mobile.w--3--mobile {
    width: var(--spacing-3);
  }
}

@media (max-width: 640px) {
  .w--4--mobile.w--4--mobile {
    width: var(--spacing-4);
  }
}

@media (max-width: 640px) {
  .w--5--mobile.w--5--mobile {
    width: var(--spacing-5);
  }
}

@media (max-width: 640px) {
  .w--6--mobile.w--6--mobile {
    width: var(--spacing-6);
  }
}

@media (max-width: 640px) {
  .w--7--mobile.w--7--mobile {
    width: var(--spacing-7);
  }
}

@media (max-width: 640px) {
  .w--8--mobile.w--8--mobile {
    width: var(--spacing-8);
  }
}

@media (max-width: 640px) {
  .w--9--mobile.w--9--mobile {
    width: var(--spacing-9);
  }
}

@media (max-width: 640px) {
  .w--10--mobile.w--10--mobile {
    width: var(--spacing-10);
  }
}

@media (max-width: 640px) {
  .w--11--mobile.w--11--mobile {
    width: var(--spacing-11);
  }
}

@media (max-width: 640px) {
  .w--12--mobile.w--12--mobile {
    width: var(--spacing-12);
  }
}

@media (max-width: 640px) {
  .w--14--mobile.w--14--mobile {
    width: var(--spacing-14);
  }
}

@media (max-width: 640px) {
  .w--16--mobile.w--16--mobile {
    width: var(--spacing-16);
  }
}

@media (max-width: 640px) {
  .w--20--mobile.w--20--mobile {
    width: var(--spacing-20);
  }
}

@media (max-width: 640px) {
  .w--24--mobile.w--24--mobile {
    width: var(--spacing-24);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .w--tablet.w--tablet {
    width: var(--spacing-1);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .w--0--tablet.w--0--tablet {
    width: var(--spacing-0);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .w--1--tablet.w--1--tablet {
    width: var(--spacing-1);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .w--2--tablet.w--2--tablet {
    width: var(--spacing-2);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .w--3--tablet.w--3--tablet {
    width: var(--spacing-3);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .w--4--tablet.w--4--tablet {
    width: var(--spacing-4);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .w--5--tablet.w--5--tablet {
    width: var(--spacing-5);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .w--6--tablet.w--6--tablet {
    width: var(--spacing-6);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .w--7--tablet.w--7--tablet {
    width: var(--spacing-7);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .w--8--tablet.w--8--tablet {
    width: var(--spacing-8);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .w--9--tablet.w--9--tablet {
    width: var(--spacing-9);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .w--10--tablet.w--10--tablet {
    width: var(--spacing-10);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .w--11--tablet.w--11--tablet {
    width: var(--spacing-11);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .w--12--tablet.w--12--tablet {
    width: var(--spacing-12);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .w--14--tablet.w--14--tablet {
    width: var(--spacing-14);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .w--16--tablet.w--16--tablet {
    width: var(--spacing-16);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .w--20--tablet.w--20--tablet {
    width: var(--spacing-20);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .w--24--tablet.w--24--tablet {
    width: var(--spacing-24);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .w--large-tablet.w--large-tablet {
    width: var(--spacing-1);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .w--0--large-tablet.w--0--large-tablet {
    width: var(--spacing-0);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .w--1--large-tablet.w--1--large-tablet {
    width: var(--spacing-1);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .w--2--large-tablet.w--2--large-tablet {
    width: var(--spacing-2);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .w--3--large-tablet.w--3--large-tablet {
    width: var(--spacing-3);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .w--4--large-tablet.w--4--large-tablet {
    width: var(--spacing-4);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .w--5--large-tablet.w--5--large-tablet {
    width: var(--spacing-5);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .w--6--large-tablet.w--6--large-tablet {
    width: var(--spacing-6);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .w--7--large-tablet.w--7--large-tablet {
    width: var(--spacing-7);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .w--8--large-tablet.w--8--large-tablet {
    width: var(--spacing-8);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .w--9--large-tablet.w--9--large-tablet {
    width: var(--spacing-9);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .w--10--large-tablet.w--10--large-tablet {
    width: var(--spacing-10);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .w--11--large-tablet.w--11--large-tablet {
    width: var(--spacing-11);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .w--12--large-tablet.w--12--large-tablet {
    width: var(--spacing-12);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .w--14--large-tablet.w--14--large-tablet {
    width: var(--spacing-14);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .w--16--large-tablet.w--16--large-tablet {
    width: var(--spacing-16);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .w--20--large-tablet.w--20--large-tablet {
    width: var(--spacing-20);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .w--24--large-tablet.w--24--large-tablet {
    width: var(--spacing-24);
  }
}

@media (min-width: 1201px) {
  .w--laptop.w--laptop {
    width: var(--spacing-1);
  }
}

@media (min-width: 1201px) {
  .w--0--laptop.w--0--laptop {
    width: var(--spacing-0);
  }
}

@media (min-width: 1201px) {
  .w--1--laptop.w--1--laptop {
    width: var(--spacing-1);
  }
}

@media (min-width: 1201px) {
  .w--2--laptop.w--2--laptop {
    width: var(--spacing-2);
  }
}

@media (min-width: 1201px) {
  .w--3--laptop.w--3--laptop {
    width: var(--spacing-3);
  }
}

@media (min-width: 1201px) {
  .w--4--laptop.w--4--laptop {
    width: var(--spacing-4);
  }
}

@media (min-width: 1201px) {
  .w--5--laptop.w--5--laptop {
    width: var(--spacing-5);
  }
}

@media (min-width: 1201px) {
  .w--6--laptop.w--6--laptop {
    width: var(--spacing-6);
  }
}

@media (min-width: 1201px) {
  .w--7--laptop.w--7--laptop {
    width: var(--spacing-7);
  }
}

@media (min-width: 1201px) {
  .w--8--laptop.w--8--laptop {
    width: var(--spacing-8);
  }
}

@media (min-width: 1201px) {
  .w--9--laptop.w--9--laptop {
    width: var(--spacing-9);
  }
}

@media (min-width: 1201px) {
  .w--10--laptop.w--10--laptop {
    width: var(--spacing-10);
  }
}

@media (min-width: 1201px) {
  .w--11--laptop.w--11--laptop {
    width: var(--spacing-11);
  }
}

@media (min-width: 1201px) {
  .w--12--laptop.w--12--laptop {
    width: var(--spacing-12);
  }
}

@media (min-width: 1201px) {
  .w--14--laptop.w--14--laptop {
    width: var(--spacing-14);
  }
}

@media (min-width: 1201px) {
  .w--16--laptop.w--16--laptop {
    width: var(--spacing-16);
  }
}

@media (min-width: 1201px) {
  .w--20--laptop.w--20--laptop {
    width: var(--spacing-20);
  }
}

@media (min-width: 1201px) {
  .w--24--laptop.w--24--laptop {
    width: var(--spacing-24);
  }
}

.w--1\/4 {
  width: 25%;
}

.w--1\/3 {
  width: 33%;
}

.w--1\/2 {
  width: 50%;
}

.w--2\/3 {
  width: 66%;
}

.w--3\/4 {
  width: 75%;
}

.w--auto {
  width: auto;
}

.w--full {
  width: 100%;
}

.w--unset {
  width: unset;
}

.w--fit {
  width: fit-content;
}

@media (max-width: 640px) {
  .w--1\/4--mobile.w--1\/4--mobile {
    width: 25%;
  }
}

@media (max-width: 640px) {
  .w--1\/3--mobile.w--1\/3--mobile {
    width: 33%;
  }
}

@media (max-width: 640px) {
  .w--1\/2--mobile.w--1\/2--mobile {
    width: 50%;
  }
}

@media (max-width: 640px) {
  .w--2\/3--mobile.w--2\/3--mobile {
    width: 66%;
  }
}

@media (max-width: 640px) {
  .w--3\/4--mobile.w--3\/4--mobile {
    width: 75%;
  }
}

@media (max-width: 640px) {
  .w--auto--mobile.w--auto--mobile {
    width: auto;
  }
}

@media (max-width: 640px) {
  .w--full--mobile.w--full--mobile {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .w--unset--mobile.w--unset--mobile {
    width: unset;
  }
}

@media (max-width: 640px) {
  .w--fit--mobile.w--fit--mobile {
    width: fit-content;
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .w--1\/4--tablet.w--1\/4--tablet {
    width: 25%;
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .w--1\/3--tablet.w--1\/3--tablet {
    width: 33%;
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .w--1\/2--tablet.w--1\/2--tablet {
    width: 50%;
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .w--2\/3--tablet.w--2\/3--tablet {
    width: 66%;
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .w--3\/4--tablet.w--3\/4--tablet {
    width: 75%;
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .w--auto--tablet.w--auto--tablet {
    width: auto;
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .w--full--tablet.w--full--tablet {
    width: 100%;
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .w--unset--tablet.w--unset--tablet {
    width: unset;
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .w--fit--tablet.w--fit--tablet {
    width: fit-content;
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .w--1\/4--large-tablet.w--1\/4--large-tablet {
    width: 25%;
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .w--1\/3--large-tablet.w--1\/3--large-tablet {
    width: 33%;
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .w--1\/2--large-tablet.w--1\/2--large-tablet {
    width: 50%;
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .w--2\/3--large-tablet.w--2\/3--large-tablet {
    width: 66%;
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .w--3\/4--large-tablet.w--3\/4--large-tablet {
    width: 75%;
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .w--auto--large-tablet.w--auto--large-tablet {
    width: auto;
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .w--full--large-tablet.w--full--large-tablet {
    width: 100%;
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .w--unset--large-tablet.w--unset--large-tablet {
    width: unset;
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .w--fit--large-tablet.w--fit--large-tablet {
    width: fit-content;
  }
}

@media (min-width: 1201px) {
  .w--1\/4--laptop.w--1\/4--laptop {
    width: 25%;
  }
}

@media (min-width: 1201px) {
  .w--1\/3--laptop.w--1\/3--laptop {
    width: 33%;
  }
}

@media (min-width: 1201px) {
  .w--1\/2--laptop.w--1\/2--laptop {
    width: 50%;
  }
}

@media (min-width: 1201px) {
  .w--2\/3--laptop.w--2\/3--laptop {
    width: 66%;
  }
}

@media (min-width: 1201px) {
  .w--3\/4--laptop.w--3\/4--laptop {
    width: 75%;
  }
}

@media (min-width: 1201px) {
  .w--auto--laptop.w--auto--laptop {
    width: auto;
  }
}

@media (min-width: 1201px) {
  .w--full--laptop.w--full--laptop {
    width: 100%;
  }
}

@media (min-width: 1201px) {
  .w--unset--laptop.w--unset--laptop {
    width: unset;
  }
}

@media (min-width: 1201px) {
  .w--fit--laptop.w--fit--laptop {
    width: fit-content;
  }
}

.w--1\/4-screen {
  width: 25vw;
}

.w--1\/3-screen {
  width: 33vw;
}

.w--1\/2-screen {
  width: 50vw;
}

.w--2\/3-screen {
  width: 66vw;
}

.w--3\/4-screen {
  width: 75vw;
}

@media (max-width: 640px) {
  .w--1\/4-screen--mobile.w--1\/4-screen--mobile {
    width: 25vw;
  }
}

@media (max-width: 640px) {
  .w--1\/3-screen--mobile.w--1\/3-screen--mobile {
    width: 33vw;
  }
}

@media (max-width: 640px) {
  .w--1\/2-screen--mobile.w--1\/2-screen--mobile {
    width: 50vw;
  }
}

@media (max-width: 640px) {
  .w--2\/3-screen--mobile.w--2\/3-screen--mobile {
    width: 66vw;
  }
}

@media (max-width: 640px) {
  .w--3\/4-screen--mobile.w--3\/4-screen--mobile {
    width: 75vw;
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .w--1\/4-screen--tablet.w--1\/4-screen--tablet {
    width: 25vw;
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .w--1\/3-screen--tablet.w--1\/3-screen--tablet {
    width: 33vw;
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .w--1\/2-screen--tablet.w--1\/2-screen--tablet {
    width: 50vw;
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .w--2\/3-screen--tablet.w--2\/3-screen--tablet {
    width: 66vw;
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .w--3\/4-screen--tablet.w--3\/4-screen--tablet {
    width: 75vw;
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .w--1\/4-screen--large-tablet.w--1\/4-screen--large-tablet {
    width: 25vw;
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .w--1\/3-screen--large-tablet.w--1\/3-screen--large-tablet {
    width: 33vw;
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .w--1\/2-screen--large-tablet.w--1\/2-screen--large-tablet {
    width: 50vw;
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .w--2\/3-screen--large-tablet.w--2\/3-screen--large-tablet {
    width: 66vw;
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .w--3\/4-screen--large-tablet.w--3\/4-screen--large-tablet {
    width: 75vw;
  }
}

@media (min-width: 1201px) {
  .w--1\/4-screen--laptop.w--1\/4-screen--laptop {
    width: 25vw;
  }
}

@media (min-width: 1201px) {
  .w--1\/3-screen--laptop.w--1\/3-screen--laptop {
    width: 33vw;
  }
}

@media (min-width: 1201px) {
  .w--1\/2-screen--laptop.w--1\/2-screen--laptop {
    width: 50vw;
  }
}

@media (min-width: 1201px) {
  .w--2\/3-screen--laptop.w--2\/3-screen--laptop {
    width: 66vw;
  }
}

@media (min-width: 1201px) {
  .w--3\/4-screen--laptop.w--3\/4-screen--laptop {
    width: 75vw;
  }
}

.h {
  height: var(--spacing-1);
}

.h--0 {
  height: var(--spacing-0);
}

.h--1 {
  height: var(--spacing-1);
}

.h--2 {
  height: var(--spacing-2);
}

.h--3 {
  height: var(--spacing-3);
}

.h--4 {
  height: var(--spacing-4);
}

.h--5 {
  height: var(--spacing-5);
}

.h--6 {
  height: var(--spacing-6);
}

.h--7 {
  height: var(--spacing-7);
}

.h--8 {
  height: var(--spacing-8);
}

.h--9 {
  height: var(--spacing-9);
}

.h--10 {
  height: var(--spacing-10);
}

.h--11 {
  height: var(--spacing-11);
}

.h--12 {
  height: var(--spacing-12);
}

.h--14 {
  height: var(--spacing-14);
}

.h--16 {
  height: var(--spacing-16);
}

.h--20 {
  height: var(--spacing-20);
}

.h--24 {
  height: var(--spacing-24);
}

@media (max-width: 640px) {
  .h--mobile.h--mobile {
    height: var(--spacing-1);
  }
}

@media (max-width: 640px) {
  .h--0--mobile.h--0--mobile {
    height: var(--spacing-0);
  }
}

@media (max-width: 640px) {
  .h--1--mobile.h--1--mobile {
    height: var(--spacing-1);
  }
}

@media (max-width: 640px) {
  .h--2--mobile.h--2--mobile {
    height: var(--spacing-2);
  }
}

@media (max-width: 640px) {
  .h--3--mobile.h--3--mobile {
    height: var(--spacing-3);
  }
}

@media (max-width: 640px) {
  .h--4--mobile.h--4--mobile {
    height: var(--spacing-4);
  }
}

@media (max-width: 640px) {
  .h--5--mobile.h--5--mobile {
    height: var(--spacing-5);
  }
}

@media (max-width: 640px) {
  .h--6--mobile.h--6--mobile {
    height: var(--spacing-6);
  }
}

@media (max-width: 640px) {
  .h--7--mobile.h--7--mobile {
    height: var(--spacing-7);
  }
}

@media (max-width: 640px) {
  .h--8--mobile.h--8--mobile {
    height: var(--spacing-8);
  }
}

@media (max-width: 640px) {
  .h--9--mobile.h--9--mobile {
    height: var(--spacing-9);
  }
}

@media (max-width: 640px) {
  .h--10--mobile.h--10--mobile {
    height: var(--spacing-10);
  }
}

@media (max-width: 640px) {
  .h--11--mobile.h--11--mobile {
    height: var(--spacing-11);
  }
}

@media (max-width: 640px) {
  .h--12--mobile.h--12--mobile {
    height: var(--spacing-12);
  }
}

@media (max-width: 640px) {
  .h--14--mobile.h--14--mobile {
    height: var(--spacing-14);
  }
}

@media (max-width: 640px) {
  .h--16--mobile.h--16--mobile {
    height: var(--spacing-16);
  }
}

@media (max-width: 640px) {
  .h--20--mobile.h--20--mobile {
    height: var(--spacing-20);
  }
}

@media (max-width: 640px) {
  .h--24--mobile.h--24--mobile {
    height: var(--spacing-24);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .h--tablet.h--tablet {
    height: var(--spacing-1);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .h--0--tablet.h--0--tablet {
    height: var(--spacing-0);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .h--1--tablet.h--1--tablet {
    height: var(--spacing-1);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .h--2--tablet.h--2--tablet {
    height: var(--spacing-2);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .h--3--tablet.h--3--tablet {
    height: var(--spacing-3);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .h--4--tablet.h--4--tablet {
    height: var(--spacing-4);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .h--5--tablet.h--5--tablet {
    height: var(--spacing-5);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .h--6--tablet.h--6--tablet {
    height: var(--spacing-6);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .h--7--tablet.h--7--tablet {
    height: var(--spacing-7);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .h--8--tablet.h--8--tablet {
    height: var(--spacing-8);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .h--9--tablet.h--9--tablet {
    height: var(--spacing-9);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .h--10--tablet.h--10--tablet {
    height: var(--spacing-10);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .h--11--tablet.h--11--tablet {
    height: var(--spacing-11);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .h--12--tablet.h--12--tablet {
    height: var(--spacing-12);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .h--14--tablet.h--14--tablet {
    height: var(--spacing-14);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .h--16--tablet.h--16--tablet {
    height: var(--spacing-16);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .h--20--tablet.h--20--tablet {
    height: var(--spacing-20);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .h--24--tablet.h--24--tablet {
    height: var(--spacing-24);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .h--large-tablet.h--large-tablet {
    height: var(--spacing-1);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .h--0--large-tablet.h--0--large-tablet {
    height: var(--spacing-0);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .h--1--large-tablet.h--1--large-tablet {
    height: var(--spacing-1);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .h--2--large-tablet.h--2--large-tablet {
    height: var(--spacing-2);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .h--3--large-tablet.h--3--large-tablet {
    height: var(--spacing-3);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .h--4--large-tablet.h--4--large-tablet {
    height: var(--spacing-4);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .h--5--large-tablet.h--5--large-tablet {
    height: var(--spacing-5);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .h--6--large-tablet.h--6--large-tablet {
    height: var(--spacing-6);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .h--7--large-tablet.h--7--large-tablet {
    height: var(--spacing-7);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .h--8--large-tablet.h--8--large-tablet {
    height: var(--spacing-8);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .h--9--large-tablet.h--9--large-tablet {
    height: var(--spacing-9);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .h--10--large-tablet.h--10--large-tablet {
    height: var(--spacing-10);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .h--11--large-tablet.h--11--large-tablet {
    height: var(--spacing-11);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .h--12--large-tablet.h--12--large-tablet {
    height: var(--spacing-12);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .h--14--large-tablet.h--14--large-tablet {
    height: var(--spacing-14);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .h--16--large-tablet.h--16--large-tablet {
    height: var(--spacing-16);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .h--20--large-tablet.h--20--large-tablet {
    height: var(--spacing-20);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .h--24--large-tablet.h--24--large-tablet {
    height: var(--spacing-24);
  }
}

@media (min-width: 1201px) {
  .h--laptop.h--laptop {
    height: var(--spacing-1);
  }
}

@media (min-width: 1201px) {
  .h--0--laptop.h--0--laptop {
    height: var(--spacing-0);
  }
}

@media (min-width: 1201px) {
  .h--1--laptop.h--1--laptop {
    height: var(--spacing-1);
  }
}

@media (min-width: 1201px) {
  .h--2--laptop.h--2--laptop {
    height: var(--spacing-2);
  }
}

@media (min-width: 1201px) {
  .h--3--laptop.h--3--laptop {
    height: var(--spacing-3);
  }
}

@media (min-width: 1201px) {
  .h--4--laptop.h--4--laptop {
    height: var(--spacing-4);
  }
}

@media (min-width: 1201px) {
  .h--5--laptop.h--5--laptop {
    height: var(--spacing-5);
  }
}

@media (min-width: 1201px) {
  .h--6--laptop.h--6--laptop {
    height: var(--spacing-6);
  }
}

@media (min-width: 1201px) {
  .h--7--laptop.h--7--laptop {
    height: var(--spacing-7);
  }
}

@media (min-width: 1201px) {
  .h--8--laptop.h--8--laptop {
    height: var(--spacing-8);
  }
}

@media (min-width: 1201px) {
  .h--9--laptop.h--9--laptop {
    height: var(--spacing-9);
  }
}

@media (min-width: 1201px) {
  .h--10--laptop.h--10--laptop {
    height: var(--spacing-10);
  }
}

@media (min-width: 1201px) {
  .h--11--laptop.h--11--laptop {
    height: var(--spacing-11);
  }
}

@media (min-width: 1201px) {
  .h--12--laptop.h--12--laptop {
    height: var(--spacing-12);
  }
}

@media (min-width: 1201px) {
  .h--14--laptop.h--14--laptop {
    height: var(--spacing-14);
  }
}

@media (min-width: 1201px) {
  .h--16--laptop.h--16--laptop {
    height: var(--spacing-16);
  }
}

@media (min-width: 1201px) {
  .h--20--laptop.h--20--laptop {
    height: var(--spacing-20);
  }
}

@media (min-width: 1201px) {
  .h--24--laptop.h--24--laptop {
    height: var(--spacing-24);
  }
}

.h--1\/4 {
  height: 25%;
}

.h--1\/3 {
  height: 33%;
}

.h--1\/2 {
  height: 50%;
}

.h--2\/3 {
  height: 66%;
}

.h--3\/4 {
  height: 75%;
}

.h--auto {
  height: auto;
}

.h--full {
  height: 100%;
}

.h--unset {
  height: unset;
}

.h--fit {
  height: fit-content;
}

@media (max-width: 640px) {
  .h--1\/4--mobile.h--1\/4--mobile {
    height: 25%;
  }
}

@media (max-width: 640px) {
  .h--1\/3--mobile.h--1\/3--mobile {
    height: 33%;
  }
}

@media (max-width: 640px) {
  .h--1\/2--mobile.h--1\/2--mobile {
    height: 50%;
  }
}

@media (max-width: 640px) {
  .h--2\/3--mobile.h--2\/3--mobile {
    height: 66%;
  }
}

@media (max-width: 640px) {
  .h--3\/4--mobile.h--3\/4--mobile {
    height: 75%;
  }
}

@media (max-width: 640px) {
  .h--auto--mobile.h--auto--mobile {
    height: auto;
  }
}

@media (max-width: 640px) {
  .h--full--mobile.h--full--mobile {
    height: 100%;
  }
}

@media (max-width: 640px) {
  .h--unset--mobile.h--unset--mobile {
    height: unset;
  }
}

@media (max-width: 640px) {
  .h--fit--mobile.h--fit--mobile {
    height: fit-content;
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .h--1\/4--tablet.h--1\/4--tablet {
    height: 25%;
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .h--1\/3--tablet.h--1\/3--tablet {
    height: 33%;
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .h--1\/2--tablet.h--1\/2--tablet {
    height: 50%;
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .h--2\/3--tablet.h--2\/3--tablet {
    height: 66%;
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .h--3\/4--tablet.h--3\/4--tablet {
    height: 75%;
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .h--auto--tablet.h--auto--tablet {
    height: auto;
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .h--full--tablet.h--full--tablet {
    height: 100%;
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .h--unset--tablet.h--unset--tablet {
    height: unset;
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .h--fit--tablet.h--fit--tablet {
    height: fit-content;
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .h--1\/4--large-tablet.h--1\/4--large-tablet {
    height: 25%;
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .h--1\/3--large-tablet.h--1\/3--large-tablet {
    height: 33%;
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .h--1\/2--large-tablet.h--1\/2--large-tablet {
    height: 50%;
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .h--2\/3--large-tablet.h--2\/3--large-tablet {
    height: 66%;
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .h--3\/4--large-tablet.h--3\/4--large-tablet {
    height: 75%;
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .h--auto--large-tablet.h--auto--large-tablet {
    height: auto;
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .h--full--large-tablet.h--full--large-tablet {
    height: 100%;
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .h--unset--large-tablet.h--unset--large-tablet {
    height: unset;
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .h--fit--large-tablet.h--fit--large-tablet {
    height: fit-content;
  }
}

@media (min-width: 1201px) {
  .h--1\/4--laptop.h--1\/4--laptop {
    height: 25%;
  }
}

@media (min-width: 1201px) {
  .h--1\/3--laptop.h--1\/3--laptop {
    height: 33%;
  }
}

@media (min-width: 1201px) {
  .h--1\/2--laptop.h--1\/2--laptop {
    height: 50%;
  }
}

@media (min-width: 1201px) {
  .h--2\/3--laptop.h--2\/3--laptop {
    height: 66%;
  }
}

@media (min-width: 1201px) {
  .h--3\/4--laptop.h--3\/4--laptop {
    height: 75%;
  }
}

@media (min-width: 1201px) {
  .h--auto--laptop.h--auto--laptop {
    height: auto;
  }
}

@media (min-width: 1201px) {
  .h--full--laptop.h--full--laptop {
    height: 100%;
  }
}

@media (min-width: 1201px) {
  .h--unset--laptop.h--unset--laptop {
    height: unset;
  }
}

@media (min-width: 1201px) {
  .h--fit--laptop.h--fit--laptop {
    height: fit-content;
  }
}

.h--1\/4-screen {
  height: 25vh;
}

.h--1\/3-screen {
  height: 33vh;
}

.h--1\/2-screen {
  height: 50vh;
}

.h--2\/3-screen {
  height: 66vh;
}

.h--3\/4-screen {
  height: 75vh;
}

@media (max-width: 640px) {
  .h--1\/4-screen--mobile.h--1\/4-screen--mobile {
    height: 25vh;
  }
}

@media (max-width: 640px) {
  .h--1\/3-screen--mobile.h--1\/3-screen--mobile {
    height: 33vh;
  }
}

@media (max-width: 640px) {
  .h--1\/2-screen--mobile.h--1\/2-screen--mobile {
    height: 50vh;
  }
}

@media (max-width: 640px) {
  .h--2\/3-screen--mobile.h--2\/3-screen--mobile {
    height: 66vh;
  }
}

@media (max-width: 640px) {
  .h--3\/4-screen--mobile.h--3\/4-screen--mobile {
    height: 75vh;
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .h--1\/4-screen--tablet.h--1\/4-screen--tablet {
    height: 25vh;
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .h--1\/3-screen--tablet.h--1\/3-screen--tablet {
    height: 33vh;
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .h--1\/2-screen--tablet.h--1\/2-screen--tablet {
    height: 50vh;
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .h--2\/3-screen--tablet.h--2\/3-screen--tablet {
    height: 66vh;
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .h--3\/4-screen--tablet.h--3\/4-screen--tablet {
    height: 75vh;
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .h--1\/4-screen--large-tablet.h--1\/4-screen--large-tablet {
    height: 25vh;
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .h--1\/3-screen--large-tablet.h--1\/3-screen--large-tablet {
    height: 33vh;
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .h--1\/2-screen--large-tablet.h--1\/2-screen--large-tablet {
    height: 50vh;
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .h--2\/3-screen--large-tablet.h--2\/3-screen--large-tablet {
    height: 66vh;
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .h--3\/4-screen--large-tablet.h--3\/4-screen--large-tablet {
    height: 75vh;
  }
}

@media (min-width: 1201px) {
  .h--1\/4-screen--laptop.h--1\/4-screen--laptop {
    height: 25vh;
  }
}

@media (min-width: 1201px) {
  .h--1\/3-screen--laptop.h--1\/3-screen--laptop {
    height: 33vh;
  }
}

@media (min-width: 1201px) {
  .h--1\/2-screen--laptop.h--1\/2-screen--laptop {
    height: 50vh;
  }
}

@media (min-width: 1201px) {
  .h--2\/3-screen--laptop.h--2\/3-screen--laptop {
    height: 66vh;
  }
}

@media (min-width: 1201px) {
  .h--3\/4-screen--laptop.h--3\/4-screen--laptop {
    height: 75vh;
  }
}

.max-w {
  width: var(--spacing-1);
}

.max-w--0 {
  width: var(--spacing-0);
}

.max-w--1 {
  width: var(--spacing-1);
}

.max-w--2 {
  width: var(--spacing-2);
}

.max-w--3 {
  width: var(--spacing-3);
}

.max-w--4 {
  width: var(--spacing-4);
}

.max-w--5 {
  width: var(--spacing-5);
}

.max-w--6 {
  width: var(--spacing-6);
}

.max-w--7 {
  width: var(--spacing-7);
}

.max-w--8 {
  width: var(--spacing-8);
}

.max-w--9 {
  width: var(--spacing-9);
}

.max-w--10 {
  width: var(--spacing-10);
}

.max-w--11 {
  width: var(--spacing-11);
}

.max-w--12 {
  width: var(--spacing-12);
}

.max-w--14 {
  width: var(--spacing-14);
}

.max-w--16 {
  width: var(--spacing-16);
}

.max-w--20 {
  width: var(--spacing-20);
}

.max-w--24 {
  width: var(--spacing-24);
}

@media (max-width: 640px) {
  .max-w--mobile.max-w--mobile {
    width: var(--spacing-1);
  }
}

@media (max-width: 640px) {
  .max-w--0--mobile.max-w--0--mobile {
    width: var(--spacing-0);
  }
}

@media (max-width: 640px) {
  .max-w--1--mobile.max-w--1--mobile {
    width: var(--spacing-1);
  }
}

@media (max-width: 640px) {
  .max-w--2--mobile.max-w--2--mobile {
    width: var(--spacing-2);
  }
}

@media (max-width: 640px) {
  .max-w--3--mobile.max-w--3--mobile {
    width: var(--spacing-3);
  }
}

@media (max-width: 640px) {
  .max-w--4--mobile.max-w--4--mobile {
    width: var(--spacing-4);
  }
}

@media (max-width: 640px) {
  .max-w--5--mobile.max-w--5--mobile {
    width: var(--spacing-5);
  }
}

@media (max-width: 640px) {
  .max-w--6--mobile.max-w--6--mobile {
    width: var(--spacing-6);
  }
}

@media (max-width: 640px) {
  .max-w--7--mobile.max-w--7--mobile {
    width: var(--spacing-7);
  }
}

@media (max-width: 640px) {
  .max-w--8--mobile.max-w--8--mobile {
    width: var(--spacing-8);
  }
}

@media (max-width: 640px) {
  .max-w--9--mobile.max-w--9--mobile {
    width: var(--spacing-9);
  }
}

@media (max-width: 640px) {
  .max-w--10--mobile.max-w--10--mobile {
    width: var(--spacing-10);
  }
}

@media (max-width: 640px) {
  .max-w--11--mobile.max-w--11--mobile {
    width: var(--spacing-11);
  }
}

@media (max-width: 640px) {
  .max-w--12--mobile.max-w--12--mobile {
    width: var(--spacing-12);
  }
}

@media (max-width: 640px) {
  .max-w--14--mobile.max-w--14--mobile {
    width: var(--spacing-14);
  }
}

@media (max-width: 640px) {
  .max-w--16--mobile.max-w--16--mobile {
    width: var(--spacing-16);
  }
}

@media (max-width: 640px) {
  .max-w--20--mobile.max-w--20--mobile {
    width: var(--spacing-20);
  }
}

@media (max-width: 640px) {
  .max-w--24--mobile.max-w--24--mobile {
    width: var(--spacing-24);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .max-w--tablet.max-w--tablet {
    width: var(--spacing-1);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .max-w--0--tablet.max-w--0--tablet {
    width: var(--spacing-0);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .max-w--1--tablet.max-w--1--tablet {
    width: var(--spacing-1);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .max-w--2--tablet.max-w--2--tablet {
    width: var(--spacing-2);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .max-w--3--tablet.max-w--3--tablet {
    width: var(--spacing-3);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .max-w--4--tablet.max-w--4--tablet {
    width: var(--spacing-4);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .max-w--5--tablet.max-w--5--tablet {
    width: var(--spacing-5);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .max-w--6--tablet.max-w--6--tablet {
    width: var(--spacing-6);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .max-w--7--tablet.max-w--7--tablet {
    width: var(--spacing-7);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .max-w--8--tablet.max-w--8--tablet {
    width: var(--spacing-8);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .max-w--9--tablet.max-w--9--tablet {
    width: var(--spacing-9);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .max-w--10--tablet.max-w--10--tablet {
    width: var(--spacing-10);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .max-w--11--tablet.max-w--11--tablet {
    width: var(--spacing-11);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .max-w--12--tablet.max-w--12--tablet {
    width: var(--spacing-12);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .max-w--14--tablet.max-w--14--tablet {
    width: var(--spacing-14);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .max-w--16--tablet.max-w--16--tablet {
    width: var(--spacing-16);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .max-w--20--tablet.max-w--20--tablet {
    width: var(--spacing-20);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .max-w--24--tablet.max-w--24--tablet {
    width: var(--spacing-24);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .max-w--large-tablet.max-w--large-tablet {
    width: var(--spacing-1);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .max-w--0--large-tablet.max-w--0--large-tablet {
    width: var(--spacing-0);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .max-w--1--large-tablet.max-w--1--large-tablet {
    width: var(--spacing-1);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .max-w--2--large-tablet.max-w--2--large-tablet {
    width: var(--spacing-2);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .max-w--3--large-tablet.max-w--3--large-tablet {
    width: var(--spacing-3);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .max-w--4--large-tablet.max-w--4--large-tablet {
    width: var(--spacing-4);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .max-w--5--large-tablet.max-w--5--large-tablet {
    width: var(--spacing-5);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .max-w--6--large-tablet.max-w--6--large-tablet {
    width: var(--spacing-6);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .max-w--7--large-tablet.max-w--7--large-tablet {
    width: var(--spacing-7);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .max-w--8--large-tablet.max-w--8--large-tablet {
    width: var(--spacing-8);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .max-w--9--large-tablet.max-w--9--large-tablet {
    width: var(--spacing-9);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .max-w--10--large-tablet.max-w--10--large-tablet {
    width: var(--spacing-10);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .max-w--11--large-tablet.max-w--11--large-tablet {
    width: var(--spacing-11);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .max-w--12--large-tablet.max-w--12--large-tablet {
    width: var(--spacing-12);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .max-w--14--large-tablet.max-w--14--large-tablet {
    width: var(--spacing-14);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .max-w--16--large-tablet.max-w--16--large-tablet {
    width: var(--spacing-16);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .max-w--20--large-tablet.max-w--20--large-tablet {
    width: var(--spacing-20);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .max-w--24--large-tablet.max-w--24--large-tablet {
    width: var(--spacing-24);
  }
}

@media (min-width: 1201px) {
  .max-w--laptop.max-w--laptop {
    width: var(--spacing-1);
  }
}

@media (min-width: 1201px) {
  .max-w--0--laptop.max-w--0--laptop {
    width: var(--spacing-0);
  }
}

@media (min-width: 1201px) {
  .max-w--1--laptop.max-w--1--laptop {
    width: var(--spacing-1);
  }
}

@media (min-width: 1201px) {
  .max-w--2--laptop.max-w--2--laptop {
    width: var(--spacing-2);
  }
}

@media (min-width: 1201px) {
  .max-w--3--laptop.max-w--3--laptop {
    width: var(--spacing-3);
  }
}

@media (min-width: 1201px) {
  .max-w--4--laptop.max-w--4--laptop {
    width: var(--spacing-4);
  }
}

@media (min-width: 1201px) {
  .max-w--5--laptop.max-w--5--laptop {
    width: var(--spacing-5);
  }
}

@media (min-width: 1201px) {
  .max-w--6--laptop.max-w--6--laptop {
    width: var(--spacing-6);
  }
}

@media (min-width: 1201px) {
  .max-w--7--laptop.max-w--7--laptop {
    width: var(--spacing-7);
  }
}

@media (min-width: 1201px) {
  .max-w--8--laptop.max-w--8--laptop {
    width: var(--spacing-8);
  }
}

@media (min-width: 1201px) {
  .max-w--9--laptop.max-w--9--laptop {
    width: var(--spacing-9);
  }
}

@media (min-width: 1201px) {
  .max-w--10--laptop.max-w--10--laptop {
    width: var(--spacing-10);
  }
}

@media (min-width: 1201px) {
  .max-w--11--laptop.max-w--11--laptop {
    width: var(--spacing-11);
  }
}

@media (min-width: 1201px) {
  .max-w--12--laptop.max-w--12--laptop {
    width: var(--spacing-12);
  }
}

@media (min-width: 1201px) {
  .max-w--14--laptop.max-w--14--laptop {
    width: var(--spacing-14);
  }
}

@media (min-width: 1201px) {
  .max-w--16--laptop.max-w--16--laptop {
    width: var(--spacing-16);
  }
}

@media (min-width: 1201px) {
  .max-w--20--laptop.max-w--20--laptop {
    width: var(--spacing-20);
  }
}

@media (min-width: 1201px) {
  .max-w--24--laptop.max-w--24--laptop {
    width: var(--spacing-24);
  }
}

.max-w--1\/4 {
  width: 25%;
}

.max-w--1\/3 {
  width: 33%;
}

.max-w--1\/2 {
  width: 50%;
}

.max-w--2\/3 {
  width: 66%;
}

.max-w--3\/4 {
  width: 75%;
}

.max-w--auto {
  width: auto;
}

.max-w--full {
  width: 100%;
}

.max-w--unset {
  width: unset;
}

.max-w--fit {
  width: fit-content;
}

@media (max-width: 640px) {
  .max-w--1\/4--mobile.max-w--1\/4--mobile {
    width: 25%;
  }
}

@media (max-width: 640px) {
  .max-w--1\/3--mobile.max-w--1\/3--mobile {
    width: 33%;
  }
}

@media (max-width: 640px) {
  .max-w--1\/2--mobile.max-w--1\/2--mobile {
    width: 50%;
  }
}

@media (max-width: 640px) {
  .max-w--2\/3--mobile.max-w--2\/3--mobile {
    width: 66%;
  }
}

@media (max-width: 640px) {
  .max-w--3\/4--mobile.max-w--3\/4--mobile {
    width: 75%;
  }
}

@media (max-width: 640px) {
  .max-w--auto--mobile.max-w--auto--mobile {
    width: auto;
  }
}

@media (max-width: 640px) {
  .max-w--full--mobile.max-w--full--mobile {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .max-w--unset--mobile.max-w--unset--mobile {
    width: unset;
  }
}

@media (max-width: 640px) {
  .max-w--fit--mobile.max-w--fit--mobile {
    width: fit-content;
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .max-w--1\/4--tablet.max-w--1\/4--tablet {
    width: 25%;
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .max-w--1\/3--tablet.max-w--1\/3--tablet {
    width: 33%;
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .max-w--1\/2--tablet.max-w--1\/2--tablet {
    width: 50%;
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .max-w--2\/3--tablet.max-w--2\/3--tablet {
    width: 66%;
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .max-w--3\/4--tablet.max-w--3\/4--tablet {
    width: 75%;
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .max-w--auto--tablet.max-w--auto--tablet {
    width: auto;
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .max-w--full--tablet.max-w--full--tablet {
    width: 100%;
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .max-w--unset--tablet.max-w--unset--tablet {
    width: unset;
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .max-w--fit--tablet.max-w--fit--tablet {
    width: fit-content;
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .max-w--1\/4--large-tablet.max-w--1\/4--large-tablet {
    width: 25%;
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .max-w--1\/3--large-tablet.max-w--1\/3--large-tablet {
    width: 33%;
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .max-w--1\/2--large-tablet.max-w--1\/2--large-tablet {
    width: 50%;
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .max-w--2\/3--large-tablet.max-w--2\/3--large-tablet {
    width: 66%;
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .max-w--3\/4--large-tablet.max-w--3\/4--large-tablet {
    width: 75%;
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .max-w--auto--large-tablet.max-w--auto--large-tablet {
    width: auto;
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .max-w--full--large-tablet.max-w--full--large-tablet {
    width: 100%;
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .max-w--unset--large-tablet.max-w--unset--large-tablet {
    width: unset;
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .max-w--fit--large-tablet.max-w--fit--large-tablet {
    width: fit-content;
  }
}

@media (min-width: 1201px) {
  .max-w--1\/4--laptop.max-w--1\/4--laptop {
    width: 25%;
  }
}

@media (min-width: 1201px) {
  .max-w--1\/3--laptop.max-w--1\/3--laptop {
    width: 33%;
  }
}

@media (min-width: 1201px) {
  .max-w--1\/2--laptop.max-w--1\/2--laptop {
    width: 50%;
  }
}

@media (min-width: 1201px) {
  .max-w--2\/3--laptop.max-w--2\/3--laptop {
    width: 66%;
  }
}

@media (min-width: 1201px) {
  .max-w--3\/4--laptop.max-w--3\/4--laptop {
    width: 75%;
  }
}

@media (min-width: 1201px) {
  .max-w--auto--laptop.max-w--auto--laptop {
    width: auto;
  }
}

@media (min-width: 1201px) {
  .max-w--full--laptop.max-w--full--laptop {
    width: 100%;
  }
}

@media (min-width: 1201px) {
  .max-w--unset--laptop.max-w--unset--laptop {
    width: unset;
  }
}

@media (min-width: 1201px) {
  .max-w--fit--laptop.max-w--fit--laptop {
    width: fit-content;
  }
}

.max-w--1\/4-screen {
  width: 25vw;
}

.max-w--1\/3-screen {
  width: 33vw;
}

.max-w--1\/2-screen {
  width: 50vw;
}

.max-w--2\/3-screen {
  width: 66vw;
}

.max-w--3\/4-screen {
  width: 75vw;
}

@media (max-width: 640px) {
  .max-w--1\/4-screen--mobile.max-w--1\/4-screen--mobile {
    width: 25vw;
  }
}

@media (max-width: 640px) {
  .max-w--1\/3-screen--mobile.max-w--1\/3-screen--mobile {
    width: 33vw;
  }
}

@media (max-width: 640px) {
  .max-w--1\/2-screen--mobile.max-w--1\/2-screen--mobile {
    width: 50vw;
  }
}

@media (max-width: 640px) {
  .max-w--2\/3-screen--mobile.max-w--2\/3-screen--mobile {
    width: 66vw;
  }
}

@media (max-width: 640px) {
  .max-w--3\/4-screen--mobile.max-w--3\/4-screen--mobile {
    width: 75vw;
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .max-w--1\/4-screen--tablet.max-w--1\/4-screen--tablet {
    width: 25vw;
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .max-w--1\/3-screen--tablet.max-w--1\/3-screen--tablet {
    width: 33vw;
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .max-w--1\/2-screen--tablet.max-w--1\/2-screen--tablet {
    width: 50vw;
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .max-w--2\/3-screen--tablet.max-w--2\/3-screen--tablet {
    width: 66vw;
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .max-w--3\/4-screen--tablet.max-w--3\/4-screen--tablet {
    width: 75vw;
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .max-w--1\/4-screen--large-tablet.max-w--1\/4-screen--large-tablet {
    width: 25vw;
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .max-w--1\/3-screen--large-tablet.max-w--1\/3-screen--large-tablet {
    width: 33vw;
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .max-w--1\/2-screen--large-tablet.max-w--1\/2-screen--large-tablet {
    width: 50vw;
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .max-w--2\/3-screen--large-tablet.max-w--2\/3-screen--large-tablet {
    width: 66vw;
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .max-w--3\/4-screen--large-tablet.max-w--3\/4-screen--large-tablet {
    width: 75vw;
  }
}

@media (min-width: 1201px) {
  .max-w--1\/4-screen--laptop.max-w--1\/4-screen--laptop {
    width: 25vw;
  }
}

@media (min-width: 1201px) {
  .max-w--1\/3-screen--laptop.max-w--1\/3-screen--laptop {
    width: 33vw;
  }
}

@media (min-width: 1201px) {
  .max-w--1\/2-screen--laptop.max-w--1\/2-screen--laptop {
    width: 50vw;
  }
}

@media (min-width: 1201px) {
  .max-w--2\/3-screen--laptop.max-w--2\/3-screen--laptop {
    width: 66vw;
  }
}

@media (min-width: 1201px) {
  .max-w--3\/4-screen--laptop.max-w--3\/4-screen--laptop {
    width: 75vw;
  }
}

.max-h {
  height: var(--spacing-1);
}

.max-h--0 {
  height: var(--spacing-0);
}

.max-h--1 {
  height: var(--spacing-1);
}

.max-h--2 {
  height: var(--spacing-2);
}

.max-h--3 {
  height: var(--spacing-3);
}

.max-h--4 {
  height: var(--spacing-4);
}

.max-h--5 {
  height: var(--spacing-5);
}

.max-h--6 {
  height: var(--spacing-6);
}

.max-h--7 {
  height: var(--spacing-7);
}

.max-h--8 {
  height: var(--spacing-8);
}

.max-h--9 {
  height: var(--spacing-9);
}

.max-h--10 {
  height: var(--spacing-10);
}

.max-h--11 {
  height: var(--spacing-11);
}

.max-h--12 {
  height: var(--spacing-12);
}

.max-h--14 {
  height: var(--spacing-14);
}

.max-h--16 {
  height: var(--spacing-16);
}

.max-h--20 {
  height: var(--spacing-20);
}

.max-h--24 {
  height: var(--spacing-24);
}

@media (max-width: 640px) {
  .max-h--mobile.max-h--mobile {
    height: var(--spacing-1);
  }
}

@media (max-width: 640px) {
  .max-h--0--mobile.max-h--0--mobile {
    height: var(--spacing-0);
  }
}

@media (max-width: 640px) {
  .max-h--1--mobile.max-h--1--mobile {
    height: var(--spacing-1);
  }
}

@media (max-width: 640px) {
  .max-h--2--mobile.max-h--2--mobile {
    height: var(--spacing-2);
  }
}

@media (max-width: 640px) {
  .max-h--3--mobile.max-h--3--mobile {
    height: var(--spacing-3);
  }
}

@media (max-width: 640px) {
  .max-h--4--mobile.max-h--4--mobile {
    height: var(--spacing-4);
  }
}

@media (max-width: 640px) {
  .max-h--5--mobile.max-h--5--mobile {
    height: var(--spacing-5);
  }
}

@media (max-width: 640px) {
  .max-h--6--mobile.max-h--6--mobile {
    height: var(--spacing-6);
  }
}

@media (max-width: 640px) {
  .max-h--7--mobile.max-h--7--mobile {
    height: var(--spacing-7);
  }
}

@media (max-width: 640px) {
  .max-h--8--mobile.max-h--8--mobile {
    height: var(--spacing-8);
  }
}

@media (max-width: 640px) {
  .max-h--9--mobile.max-h--9--mobile {
    height: var(--spacing-9);
  }
}

@media (max-width: 640px) {
  .max-h--10--mobile.max-h--10--mobile {
    height: var(--spacing-10);
  }
}

@media (max-width: 640px) {
  .max-h--11--mobile.max-h--11--mobile {
    height: var(--spacing-11);
  }
}

@media (max-width: 640px) {
  .max-h--12--mobile.max-h--12--mobile {
    height: var(--spacing-12);
  }
}

@media (max-width: 640px) {
  .max-h--14--mobile.max-h--14--mobile {
    height: var(--spacing-14);
  }
}

@media (max-width: 640px) {
  .max-h--16--mobile.max-h--16--mobile {
    height: var(--spacing-16);
  }
}

@media (max-width: 640px) {
  .max-h--20--mobile.max-h--20--mobile {
    height: var(--spacing-20);
  }
}

@media (max-width: 640px) {
  .max-h--24--mobile.max-h--24--mobile {
    height: var(--spacing-24);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .max-h--tablet.max-h--tablet {
    height: var(--spacing-1);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .max-h--0--tablet.max-h--0--tablet {
    height: var(--spacing-0);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .max-h--1--tablet.max-h--1--tablet {
    height: var(--spacing-1);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .max-h--2--tablet.max-h--2--tablet {
    height: var(--spacing-2);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .max-h--3--tablet.max-h--3--tablet {
    height: var(--spacing-3);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .max-h--4--tablet.max-h--4--tablet {
    height: var(--spacing-4);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .max-h--5--tablet.max-h--5--tablet {
    height: var(--spacing-5);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .max-h--6--tablet.max-h--6--tablet {
    height: var(--spacing-6);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .max-h--7--tablet.max-h--7--tablet {
    height: var(--spacing-7);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .max-h--8--tablet.max-h--8--tablet {
    height: var(--spacing-8);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .max-h--9--tablet.max-h--9--tablet {
    height: var(--spacing-9);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .max-h--10--tablet.max-h--10--tablet {
    height: var(--spacing-10);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .max-h--11--tablet.max-h--11--tablet {
    height: var(--spacing-11);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .max-h--12--tablet.max-h--12--tablet {
    height: var(--spacing-12);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .max-h--14--tablet.max-h--14--tablet {
    height: var(--spacing-14);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .max-h--16--tablet.max-h--16--tablet {
    height: var(--spacing-16);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .max-h--20--tablet.max-h--20--tablet {
    height: var(--spacing-20);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .max-h--24--tablet.max-h--24--tablet {
    height: var(--spacing-24);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .max-h--large-tablet.max-h--large-tablet {
    height: var(--spacing-1);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .max-h--0--large-tablet.max-h--0--large-tablet {
    height: var(--spacing-0);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .max-h--1--large-tablet.max-h--1--large-tablet {
    height: var(--spacing-1);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .max-h--2--large-tablet.max-h--2--large-tablet {
    height: var(--spacing-2);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .max-h--3--large-tablet.max-h--3--large-tablet {
    height: var(--spacing-3);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .max-h--4--large-tablet.max-h--4--large-tablet {
    height: var(--spacing-4);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .max-h--5--large-tablet.max-h--5--large-tablet {
    height: var(--spacing-5);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .max-h--6--large-tablet.max-h--6--large-tablet {
    height: var(--spacing-6);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .max-h--7--large-tablet.max-h--7--large-tablet {
    height: var(--spacing-7);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .max-h--8--large-tablet.max-h--8--large-tablet {
    height: var(--spacing-8);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .max-h--9--large-tablet.max-h--9--large-tablet {
    height: var(--spacing-9);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .max-h--10--large-tablet.max-h--10--large-tablet {
    height: var(--spacing-10);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .max-h--11--large-tablet.max-h--11--large-tablet {
    height: var(--spacing-11);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .max-h--12--large-tablet.max-h--12--large-tablet {
    height: var(--spacing-12);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .max-h--14--large-tablet.max-h--14--large-tablet {
    height: var(--spacing-14);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .max-h--16--large-tablet.max-h--16--large-tablet {
    height: var(--spacing-16);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .max-h--20--large-tablet.max-h--20--large-tablet {
    height: var(--spacing-20);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .max-h--24--large-tablet.max-h--24--large-tablet {
    height: var(--spacing-24);
  }
}

@media (min-width: 1201px) {
  .max-h--laptop.max-h--laptop {
    height: var(--spacing-1);
  }
}

@media (min-width: 1201px) {
  .max-h--0--laptop.max-h--0--laptop {
    height: var(--spacing-0);
  }
}

@media (min-width: 1201px) {
  .max-h--1--laptop.max-h--1--laptop {
    height: var(--spacing-1);
  }
}

@media (min-width: 1201px) {
  .max-h--2--laptop.max-h--2--laptop {
    height: var(--spacing-2);
  }
}

@media (min-width: 1201px) {
  .max-h--3--laptop.max-h--3--laptop {
    height: var(--spacing-3);
  }
}

@media (min-width: 1201px) {
  .max-h--4--laptop.max-h--4--laptop {
    height: var(--spacing-4);
  }
}

@media (min-width: 1201px) {
  .max-h--5--laptop.max-h--5--laptop {
    height: var(--spacing-5);
  }
}

@media (min-width: 1201px) {
  .max-h--6--laptop.max-h--6--laptop {
    height: var(--spacing-6);
  }
}

@media (min-width: 1201px) {
  .max-h--7--laptop.max-h--7--laptop {
    height: var(--spacing-7);
  }
}

@media (min-width: 1201px) {
  .max-h--8--laptop.max-h--8--laptop {
    height: var(--spacing-8);
  }
}

@media (min-width: 1201px) {
  .max-h--9--laptop.max-h--9--laptop {
    height: var(--spacing-9);
  }
}

@media (min-width: 1201px) {
  .max-h--10--laptop.max-h--10--laptop {
    height: var(--spacing-10);
  }
}

@media (min-width: 1201px) {
  .max-h--11--laptop.max-h--11--laptop {
    height: var(--spacing-11);
  }
}

@media (min-width: 1201px) {
  .max-h--12--laptop.max-h--12--laptop {
    height: var(--spacing-12);
  }
}

@media (min-width: 1201px) {
  .max-h--14--laptop.max-h--14--laptop {
    height: var(--spacing-14);
  }
}

@media (min-width: 1201px) {
  .max-h--16--laptop.max-h--16--laptop {
    height: var(--spacing-16);
  }
}

@media (min-width: 1201px) {
  .max-h--20--laptop.max-h--20--laptop {
    height: var(--spacing-20);
  }
}

@media (min-width: 1201px) {
  .max-h--24--laptop.max-h--24--laptop {
    height: var(--spacing-24);
  }
}

.max-h--1\/4 {
  height: 25%;
}

.max-h--1\/3 {
  height: 33%;
}

.max-h--1\/2 {
  height: 50%;
}

.max-h--2\/3 {
  height: 66%;
}

.max-h--3\/4 {
  height: 75%;
}

.max-h--auto {
  height: auto;
}

.max-h--full {
  height: 100%;
}

.max-h--unset {
  height: unset;
}

.max-h--fit {
  height: fit-content;
}

@media (max-width: 640px) {
  .max-h--1\/4--mobile.max-h--1\/4--mobile {
    height: 25%;
  }
}

@media (max-width: 640px) {
  .max-h--1\/3--mobile.max-h--1\/3--mobile {
    height: 33%;
  }
}

@media (max-width: 640px) {
  .max-h--1\/2--mobile.max-h--1\/2--mobile {
    height: 50%;
  }
}

@media (max-width: 640px) {
  .max-h--2\/3--mobile.max-h--2\/3--mobile {
    height: 66%;
  }
}

@media (max-width: 640px) {
  .max-h--3\/4--mobile.max-h--3\/4--mobile {
    height: 75%;
  }
}

@media (max-width: 640px) {
  .max-h--auto--mobile.max-h--auto--mobile {
    height: auto;
  }
}

@media (max-width: 640px) {
  .max-h--full--mobile.max-h--full--mobile {
    height: 100%;
  }
}

@media (max-width: 640px) {
  .max-h--unset--mobile.max-h--unset--mobile {
    height: unset;
  }
}

@media (max-width: 640px) {
  .max-h--fit--mobile.max-h--fit--mobile {
    height: fit-content;
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .max-h--1\/4--tablet.max-h--1\/4--tablet {
    height: 25%;
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .max-h--1\/3--tablet.max-h--1\/3--tablet {
    height: 33%;
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .max-h--1\/2--tablet.max-h--1\/2--tablet {
    height: 50%;
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .max-h--2\/3--tablet.max-h--2\/3--tablet {
    height: 66%;
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .max-h--3\/4--tablet.max-h--3\/4--tablet {
    height: 75%;
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .max-h--auto--tablet.max-h--auto--tablet {
    height: auto;
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .max-h--full--tablet.max-h--full--tablet {
    height: 100%;
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .max-h--unset--tablet.max-h--unset--tablet {
    height: unset;
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .max-h--fit--tablet.max-h--fit--tablet {
    height: fit-content;
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .max-h--1\/4--large-tablet.max-h--1\/4--large-tablet {
    height: 25%;
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .max-h--1\/3--large-tablet.max-h--1\/3--large-tablet {
    height: 33%;
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .max-h--1\/2--large-tablet.max-h--1\/2--large-tablet {
    height: 50%;
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .max-h--2\/3--large-tablet.max-h--2\/3--large-tablet {
    height: 66%;
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .max-h--3\/4--large-tablet.max-h--3\/4--large-tablet {
    height: 75%;
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .max-h--auto--large-tablet.max-h--auto--large-tablet {
    height: auto;
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .max-h--full--large-tablet.max-h--full--large-tablet {
    height: 100%;
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .max-h--unset--large-tablet.max-h--unset--large-tablet {
    height: unset;
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .max-h--fit--large-tablet.max-h--fit--large-tablet {
    height: fit-content;
  }
}

@media (min-width: 1201px) {
  .max-h--1\/4--laptop.max-h--1\/4--laptop {
    height: 25%;
  }
}

@media (min-width: 1201px) {
  .max-h--1\/3--laptop.max-h--1\/3--laptop {
    height: 33%;
  }
}

@media (min-width: 1201px) {
  .max-h--1\/2--laptop.max-h--1\/2--laptop {
    height: 50%;
  }
}

@media (min-width: 1201px) {
  .max-h--2\/3--laptop.max-h--2\/3--laptop {
    height: 66%;
  }
}

@media (min-width: 1201px) {
  .max-h--3\/4--laptop.max-h--3\/4--laptop {
    height: 75%;
  }
}

@media (min-width: 1201px) {
  .max-h--auto--laptop.max-h--auto--laptop {
    height: auto;
  }
}

@media (min-width: 1201px) {
  .max-h--full--laptop.max-h--full--laptop {
    height: 100%;
  }
}

@media (min-width: 1201px) {
  .max-h--unset--laptop.max-h--unset--laptop {
    height: unset;
  }
}

@media (min-width: 1201px) {
  .max-h--fit--laptop.max-h--fit--laptop {
    height: fit-content;
  }
}

.max-h--1\/4-screen {
  height: 25vh;
}

.max-h--1\/3-screen {
  height: 33vh;
}

.max-h--1\/2-screen {
  height: 50vh;
}

.max-h--2\/3-screen {
  height: 66vh;
}

.max-h--3\/4-screen {
  height: 75vh;
}

@media (max-width: 640px) {
  .max-h--1\/4-screen--mobile.max-h--1\/4-screen--mobile {
    height: 25vh;
  }
}

@media (max-width: 640px) {
  .max-h--1\/3-screen--mobile.max-h--1\/3-screen--mobile {
    height: 33vh;
  }
}

@media (max-width: 640px) {
  .max-h--1\/2-screen--mobile.max-h--1\/2-screen--mobile {
    height: 50vh;
  }
}

@media (max-width: 640px) {
  .max-h--2\/3-screen--mobile.max-h--2\/3-screen--mobile {
    height: 66vh;
  }
}

@media (max-width: 640px) {
  .max-h--3\/4-screen--mobile.max-h--3\/4-screen--mobile {
    height: 75vh;
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .max-h--1\/4-screen--tablet.max-h--1\/4-screen--tablet {
    height: 25vh;
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .max-h--1\/3-screen--tablet.max-h--1\/3-screen--tablet {
    height: 33vh;
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .max-h--1\/2-screen--tablet.max-h--1\/2-screen--tablet {
    height: 50vh;
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .max-h--2\/3-screen--tablet.max-h--2\/3-screen--tablet {
    height: 66vh;
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .max-h--3\/4-screen--tablet.max-h--3\/4-screen--tablet {
    height: 75vh;
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .max-h--1\/4-screen--large-tablet.max-h--1\/4-screen--large-tablet {
    height: 25vh;
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .max-h--1\/3-screen--large-tablet.max-h--1\/3-screen--large-tablet {
    height: 33vh;
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .max-h--1\/2-screen--large-tablet.max-h--1\/2-screen--large-tablet {
    height: 50vh;
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .max-h--2\/3-screen--large-tablet.max-h--2\/3-screen--large-tablet {
    height: 66vh;
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .max-h--3\/4-screen--large-tablet.max-h--3\/4-screen--large-tablet {
    height: 75vh;
  }
}

@media (min-width: 1201px) {
  .max-h--1\/4-screen--laptop.max-h--1\/4-screen--laptop {
    height: 25vh;
  }
}

@media (min-width: 1201px) {
  .max-h--1\/3-screen--laptop.max-h--1\/3-screen--laptop {
    height: 33vh;
  }
}

@media (min-width: 1201px) {
  .max-h--1\/2-screen--laptop.max-h--1\/2-screen--laptop {
    height: 50vh;
  }
}

@media (min-width: 1201px) {
  .max-h--2\/3-screen--laptop.max-h--2\/3-screen--laptop {
    height: 66vh;
  }
}

@media (min-width: 1201px) {
  .max-h--3\/4-screen--laptop.max-h--3\/4-screen--laptop {
    height: 75vh;
  }
}

/* ==========================================================================
   03. PADDING / MARGIN / GAP
   ========================================================================== */
/* ===================================
  Padding
  =================================== */
.pd {
  padding-top: var(--spacing-1);
  padding-bottom: var(--spacing-1);
  padding-left: var(--spacing-1);
  padding-right: var(--spacing-1);
}

.pd--0 {
  padding-top: var(--spacing-0);
  padding-bottom: var(--spacing-0);
  padding-left: var(--spacing-0);
  padding-right: var(--spacing-0);
}

.pd--1 {
  padding-top: var(--spacing-1);
  padding-bottom: var(--spacing-1);
  padding-left: var(--spacing-1);
  padding-right: var(--spacing-1);
}

.pd--2 {
  padding-top: var(--spacing-2);
  padding-bottom: var(--spacing-2);
  padding-left: var(--spacing-2);
  padding-right: var(--spacing-2);
}

.pd--3 {
  padding-top: var(--spacing-3);
  padding-bottom: var(--spacing-3);
  padding-left: var(--spacing-3);
  padding-right: var(--spacing-3);
}

.pd--4 {
  padding-top: var(--spacing-4);
  padding-bottom: var(--spacing-4);
  padding-left: var(--spacing-4);
  padding-right: var(--spacing-4);
}

.pd--5 {
  padding-top: var(--spacing-5);
  padding-bottom: var(--spacing-5);
  padding-left: var(--spacing-5);
  padding-right: var(--spacing-5);
}

.pd--6 {
  padding-top: var(--spacing-6);
  padding-bottom: var(--spacing-6);
  padding-left: var(--spacing-6);
  padding-right: var(--spacing-6);
}

.pd--7 {
  padding-top: var(--spacing-7);
  padding-bottom: var(--spacing-7);
  padding-left: var(--spacing-7);
  padding-right: var(--spacing-7);
}

.pd--8 {
  padding-top: var(--spacing-8);
  padding-bottom: var(--spacing-8);
  padding-left: var(--spacing-8);
  padding-right: var(--spacing-8);
}

.pd--9 {
  padding-top: var(--spacing-9);
  padding-bottom: var(--spacing-9);
  padding-left: var(--spacing-9);
  padding-right: var(--spacing-9);
}

.pd--10 {
  padding-top: var(--spacing-10);
  padding-bottom: var(--spacing-10);
  padding-left: var(--spacing-10);
  padding-right: var(--spacing-10);
}

.pd--11 {
  padding-top: var(--spacing-11);
  padding-bottom: var(--spacing-11);
  padding-left: var(--spacing-11);
  padding-right: var(--spacing-11);
}

.pd--12 {
  padding-top: var(--spacing-12);
  padding-bottom: var(--spacing-12);
  padding-left: var(--spacing-12);
  padding-right: var(--spacing-12);
}

.pd--14 {
  padding-top: var(--spacing-14);
  padding-bottom: var(--spacing-14);
  padding-left: var(--spacing-14);
  padding-right: var(--spacing-14);
}

.pd--16 {
  padding-top: var(--spacing-16);
  padding-bottom: var(--spacing-16);
  padding-left: var(--spacing-16);
  padding-right: var(--spacing-16);
}

.pd--20 {
  padding-top: var(--spacing-20);
  padding-bottom: var(--spacing-20);
  padding-left: var(--spacing-20);
  padding-right: var(--spacing-20);
}

.pd--24 {
  padding-top: var(--spacing-24);
  padding-bottom: var(--spacing-24);
  padding-left: var(--spacing-24);
  padding-right: var(--spacing-24);
}

.pd-t {
  padding-top: var(--spacing-1);
}

.pd-t--0 {
  padding-top: var(--spacing-0);
}

.pd-t--1 {
  padding-top: var(--spacing-1);
}

.pd-t--2 {
  padding-top: var(--spacing-2);
}

.pd-t--3 {
  padding-top: var(--spacing-3);
}

.pd-t--4 {
  padding-top: var(--spacing-4);
}

.pd-t--5 {
  padding-top: var(--spacing-5);
}

.pd-t--6 {
  padding-top: var(--spacing-6);
}

.pd-t--7 {
  padding-top: var(--spacing-7);
}

.pd-t--8 {
  padding-top: var(--spacing-8);
}

.pd-t--9 {
  padding-top: var(--spacing-9);
}

.pd-t--10 {
  padding-top: var(--spacing-10);
}

.pd-t--11 {
  padding-top: var(--spacing-11);
}

.pd-t--12 {
  padding-top: var(--spacing-12);
}

.pd-t--14 {
  padding-top: var(--spacing-14);
}

.pd-t--16 {
  padding-top: var(--spacing-16);
}

.pd-t--20 {
  padding-top: var(--spacing-20);
}

.pd-t--24 {
  padding-top: var(--spacing-24);
}

.pd-b {
  padding-bottom: var(--spacing-1);
}

.pd-b--0 {
  padding-bottom: var(--spacing-0);
}

.pd-b--1 {
  padding-bottom: var(--spacing-1);
}

.pd-b--2 {
  padding-bottom: var(--spacing-2);
}

.pd-b--3 {
  padding-bottom: var(--spacing-3);
}

.pd-b--4 {
  padding-bottom: var(--spacing-4);
}

.pd-b--5 {
  padding-bottom: var(--spacing-5);
}

.pd-b--6 {
  padding-bottom: var(--spacing-6);
}

.pd-b--7 {
  padding-bottom: var(--spacing-7);
}

.pd-b--8 {
  padding-bottom: var(--spacing-8);
}

.pd-b--9 {
  padding-bottom: var(--spacing-9);
}

.pd-b--10 {
  padding-bottom: var(--spacing-10);
}

.pd-b--11 {
  padding-bottom: var(--spacing-11);
}

.pd-b--12 {
  padding-bottom: var(--spacing-12);
}

.pd-b--14 {
  padding-bottom: var(--spacing-14);
}

.pd-b--16 {
  padding-bottom: var(--spacing-16);
}

.pd-b--20 {
  padding-bottom: var(--spacing-20);
}

.pd-b--24 {
  padding-bottom: var(--spacing-24);
}

.pd-l {
  padding-left: var(--spacing-1);
}

.pd-l--0 {
  padding-left: var(--spacing-0);
}

.pd-l--1 {
  padding-left: var(--spacing-1);
}

.pd-l--2 {
  padding-left: var(--spacing-2);
}

.pd-l--3 {
  padding-left: var(--spacing-3);
}

.pd-l--4 {
  padding-left: var(--spacing-4);
}

.pd-l--5 {
  padding-left: var(--spacing-5);
}

.pd-l--6 {
  padding-left: var(--spacing-6);
}

.pd-l--7 {
  padding-left: var(--spacing-7);
}

.pd-l--8 {
  padding-left: var(--spacing-8);
}

.pd-l--9 {
  padding-left: var(--spacing-9);
}

.pd-l--10 {
  padding-left: var(--spacing-10);
}

.pd-l--11 {
  padding-left: var(--spacing-11);
}

.pd-l--12 {
  padding-left: var(--spacing-12);
}

.pd-l--14 {
  padding-left: var(--spacing-14);
}

.pd-l--16 {
  padding-left: var(--spacing-16);
}

.pd-l--20 {
  padding-left: var(--spacing-20);
}

.pd-l--24 {
  padding-left: var(--spacing-24);
}

.pd-r {
  padding-right: var(--spacing-1);
}

.pd-r--0 {
  padding-right: var(--spacing-0);
}

.pd-r--1 {
  padding-right: var(--spacing-1);
}

.pd-r--2 {
  padding-right: var(--spacing-2);
}

.pd-r--3 {
  padding-right: var(--spacing-3);
}

.pd-r--4 {
  padding-right: var(--spacing-4);
}

.pd-r--5 {
  padding-right: var(--spacing-5);
}

.pd-r--6 {
  padding-right: var(--spacing-6);
}

.pd-r--7 {
  padding-right: var(--spacing-7);
}

.pd-r--8 {
  padding-right: var(--spacing-8);
}

.pd-r--9 {
  padding-right: var(--spacing-9);
}

.pd-r--10 {
  padding-right: var(--spacing-10);
}

.pd-r--11 {
  padding-right: var(--spacing-11);
}

.pd-r--12 {
  padding-right: var(--spacing-12);
}

.pd-r--14 {
  padding-right: var(--spacing-14);
}

.pd-r--16 {
  padding-right: var(--spacing-16);
}

.pd-r--20 {
  padding-right: var(--spacing-20);
}

.pd-r--24 {
  padding-right: var(--spacing-24);
}

.pd-x {
  padding-left: var(--spacing-1);
  padding-right: var(--spacing-1);
}

.pd-x--0 {
  padding-left: var(--spacing-0);
  padding-right: var(--spacing-0);
}

.pd-x--1 {
  padding-left: var(--spacing-1);
  padding-right: var(--spacing-1);
}

.pd-x--2 {
  padding-left: var(--spacing-2);
  padding-right: var(--spacing-2);
}

.pd-x--3 {
  padding-left: var(--spacing-3);
  padding-right: var(--spacing-3);
}

.pd-x--4 {
  padding-left: var(--spacing-4);
  padding-right: var(--spacing-4);
}

.pd-x--5 {
  padding-left: var(--spacing-5);
  padding-right: var(--spacing-5);
}

.pd-x--6 {
  padding-left: var(--spacing-6);
  padding-right: var(--spacing-6);
}

.pd-x--7 {
  padding-left: var(--spacing-7);
  padding-right: var(--spacing-7);
}

.pd-x--8 {
  padding-left: var(--spacing-8);
  padding-right: var(--spacing-8);
}

.pd-x--9 {
  padding-left: var(--spacing-9);
  padding-right: var(--spacing-9);
}

.pd-x--10 {
  padding-left: var(--spacing-10);
  padding-right: var(--spacing-10);
}

.pd-x--11 {
  padding-left: var(--spacing-11);
  padding-right: var(--spacing-11);
}

.pd-x--12 {
  padding-left: var(--spacing-12);
  padding-right: var(--spacing-12);
}

.pd-x--14 {
  padding-left: var(--spacing-14);
  padding-right: var(--spacing-14);
}

.pd-x--16 {
  padding-left: var(--spacing-16);
  padding-right: var(--spacing-16);
}

.pd-x--20 {
  padding-left: var(--spacing-20);
  padding-right: var(--spacing-20);
}

.pd-x--24 {
  padding-left: var(--spacing-24);
  padding-right: var(--spacing-24);
}

.pd-y {
  padding-top: var(--spacing-1);
  padding-bottom: var(--spacing-1);
}

.pd-y--0 {
  padding-top: var(--spacing-0);
  padding-bottom: var(--spacing-0);
}

.pd-y--1 {
  padding-top: var(--spacing-1);
  padding-bottom: var(--spacing-1);
}

.pd-y--2 {
  padding-top: var(--spacing-2);
  padding-bottom: var(--spacing-2);
}

.pd-y--3 {
  padding-top: var(--spacing-3);
  padding-bottom: var(--spacing-3);
}

.pd-y--4 {
  padding-top: var(--spacing-4);
  padding-bottom: var(--spacing-4);
}

.pd-y--5 {
  padding-top: var(--spacing-5);
  padding-bottom: var(--spacing-5);
}

.pd-y--6 {
  padding-top: var(--spacing-6);
  padding-bottom: var(--spacing-6);
}

.pd-y--7 {
  padding-top: var(--spacing-7);
  padding-bottom: var(--spacing-7);
}

.pd-y--8 {
  padding-top: var(--spacing-8);
  padding-bottom: var(--spacing-8);
}

.pd-y--9 {
  padding-top: var(--spacing-9);
  padding-bottom: var(--spacing-9);
}

.pd-y--10 {
  padding-top: var(--spacing-10);
  padding-bottom: var(--spacing-10);
}

.pd-y--11 {
  padding-top: var(--spacing-11);
  padding-bottom: var(--spacing-11);
}

.pd-y--12 {
  padding-top: var(--spacing-12);
  padding-bottom: var(--spacing-12);
}

.pd-y--14 {
  padding-top: var(--spacing-14);
  padding-bottom: var(--spacing-14);
}

.pd-y--16 {
  padding-top: var(--spacing-16);
  padding-bottom: var(--spacing-16);
}

.pd-y--20 {
  padding-top: var(--spacing-20);
  padding-bottom: var(--spacing-20);
}

.pd-y--24 {
  padding-top: var(--spacing-24);
  padding-bottom: var(--spacing-24);
}

@media (max-width: 640px) {
  .pd--mobile.pd--mobile {
    padding-top: var(--spacing-1);
    padding-bottom: var(--spacing-1);
    padding-left: var(--spacing-1);
    padding-right: var(--spacing-1);
  }
}

@media (max-width: 640px) {
  .pd--0--mobile.pd--0--mobile {
    padding-top: var(--spacing-0);
    padding-bottom: var(--spacing-0);
    padding-left: var(--spacing-0);
    padding-right: var(--spacing-0);
  }
}

@media (max-width: 640px) {
  .pd--1--mobile.pd--1--mobile {
    padding-top: var(--spacing-1);
    padding-bottom: var(--spacing-1);
    padding-left: var(--spacing-1);
    padding-right: var(--spacing-1);
  }
}

@media (max-width: 640px) {
  .pd--2--mobile.pd--2--mobile {
    padding-top: var(--spacing-2);
    padding-bottom: var(--spacing-2);
    padding-left: var(--spacing-2);
    padding-right: var(--spacing-2);
  }
}

@media (max-width: 640px) {
  .pd--3--mobile.pd--3--mobile {
    padding-top: var(--spacing-3);
    padding-bottom: var(--spacing-3);
    padding-left: var(--spacing-3);
    padding-right: var(--spacing-3);
  }
}

@media (max-width: 640px) {
  .pd--4--mobile.pd--4--mobile {
    padding-top: var(--spacing-4);
    padding-bottom: var(--spacing-4);
    padding-left: var(--spacing-4);
    padding-right: var(--spacing-4);
  }
}

@media (max-width: 640px) {
  .pd--5--mobile.pd--5--mobile {
    padding-top: var(--spacing-5);
    padding-bottom: var(--spacing-5);
    padding-left: var(--spacing-5);
    padding-right: var(--spacing-5);
  }
}

@media (max-width: 640px) {
  .pd--6--mobile.pd--6--mobile {
    padding-top: var(--spacing-6);
    padding-bottom: var(--spacing-6);
    padding-left: var(--spacing-6);
    padding-right: var(--spacing-6);
  }
}

@media (max-width: 640px) {
  .pd--7--mobile.pd--7--mobile {
    padding-top: var(--spacing-7);
    padding-bottom: var(--spacing-7);
    padding-left: var(--spacing-7);
    padding-right: var(--spacing-7);
  }
}

@media (max-width: 640px) {
  .pd--8--mobile.pd--8--mobile {
    padding-top: var(--spacing-8);
    padding-bottom: var(--spacing-8);
    padding-left: var(--spacing-8);
    padding-right: var(--spacing-8);
  }
}

@media (max-width: 640px) {
  .pd--9--mobile.pd--9--mobile {
    padding-top: var(--spacing-9);
    padding-bottom: var(--spacing-9);
    padding-left: var(--spacing-9);
    padding-right: var(--spacing-9);
  }
}

@media (max-width: 640px) {
  .pd--10--mobile.pd--10--mobile {
    padding-top: var(--spacing-10);
    padding-bottom: var(--spacing-10);
    padding-left: var(--spacing-10);
    padding-right: var(--spacing-10);
  }
}

@media (max-width: 640px) {
  .pd--11--mobile.pd--11--mobile {
    padding-top: var(--spacing-11);
    padding-bottom: var(--spacing-11);
    padding-left: var(--spacing-11);
    padding-right: var(--spacing-11);
  }
}

@media (max-width: 640px) {
  .pd--12--mobile.pd--12--mobile {
    padding-top: var(--spacing-12);
    padding-bottom: var(--spacing-12);
    padding-left: var(--spacing-12);
    padding-right: var(--spacing-12);
  }
}

@media (max-width: 640px) {
  .pd--14--mobile.pd--14--mobile {
    padding-top: var(--spacing-14);
    padding-bottom: var(--spacing-14);
    padding-left: var(--spacing-14);
    padding-right: var(--spacing-14);
  }
}

@media (max-width: 640px) {
  .pd--16--mobile.pd--16--mobile {
    padding-top: var(--spacing-16);
    padding-bottom: var(--spacing-16);
    padding-left: var(--spacing-16);
    padding-right: var(--spacing-16);
  }
}

@media (max-width: 640px) {
  .pd--20--mobile.pd--20--mobile {
    padding-top: var(--spacing-20);
    padding-bottom: var(--spacing-20);
    padding-left: var(--spacing-20);
    padding-right: var(--spacing-20);
  }
}

@media (max-width: 640px) {
  .pd--24--mobile.pd--24--mobile {
    padding-top: var(--spacing-24);
    padding-bottom: var(--spacing-24);
    padding-left: var(--spacing-24);
    padding-right: var(--spacing-24);
  }
}

@media (max-width: 640px) {
  .pd-t--mobile.pd-t--mobile {
    padding-top: var(--spacing-1);
  }
}

@media (max-width: 640px) {
  .pd-t--0--mobile.pd-t--0--mobile {
    padding-top: var(--spacing-0);
  }
}

@media (max-width: 640px) {
  .pd-t--1--mobile.pd-t--1--mobile {
    padding-top: var(--spacing-1);
  }
}

@media (max-width: 640px) {
  .pd-t--2--mobile.pd-t--2--mobile {
    padding-top: var(--spacing-2);
  }
}

@media (max-width: 640px) {
  .pd-t--3--mobile.pd-t--3--mobile {
    padding-top: var(--spacing-3);
  }
}

@media (max-width: 640px) {
  .pd-t--4--mobile.pd-t--4--mobile {
    padding-top: var(--spacing-4);
  }
}

@media (max-width: 640px) {
  .pd-t--5--mobile.pd-t--5--mobile {
    padding-top: var(--spacing-5);
  }
}

@media (max-width: 640px) {
  .pd-t--6--mobile.pd-t--6--mobile {
    padding-top: var(--spacing-6);
  }
}

@media (max-width: 640px) {
  .pd-t--7--mobile.pd-t--7--mobile {
    padding-top: var(--spacing-7);
  }
}

@media (max-width: 640px) {
  .pd-t--8--mobile.pd-t--8--mobile {
    padding-top: var(--spacing-8);
  }
}

@media (max-width: 640px) {
  .pd-t--9--mobile.pd-t--9--mobile {
    padding-top: var(--spacing-9);
  }
}

@media (max-width: 640px) {
  .pd-t--10--mobile.pd-t--10--mobile {
    padding-top: var(--spacing-10);
  }
}

@media (max-width: 640px) {
  .pd-t--11--mobile.pd-t--11--mobile {
    padding-top: var(--spacing-11);
  }
}

@media (max-width: 640px) {
  .pd-t--12--mobile.pd-t--12--mobile {
    padding-top: var(--spacing-12);
  }
}

@media (max-width: 640px) {
  .pd-t--14--mobile.pd-t--14--mobile {
    padding-top: var(--spacing-14);
  }
}

@media (max-width: 640px) {
  .pd-t--16--mobile.pd-t--16--mobile {
    padding-top: var(--spacing-16);
  }
}

@media (max-width: 640px) {
  .pd-t--20--mobile.pd-t--20--mobile {
    padding-top: var(--spacing-20);
  }
}

@media (max-width: 640px) {
  .pd-t--24--mobile.pd-t--24--mobile {
    padding-top: var(--spacing-24);
  }
}

@media (max-width: 640px) {
  .pd-b--mobile.pd-b--mobile {
    padding-bottom: var(--spacing-1);
  }
}

@media (max-width: 640px) {
  .pd-b--0--mobile.pd-b--0--mobile {
    padding-bottom: var(--spacing-0);
  }
}

@media (max-width: 640px) {
  .pd-b--1--mobile.pd-b--1--mobile {
    padding-bottom: var(--spacing-1);
  }
}

@media (max-width: 640px) {
  .pd-b--2--mobile.pd-b--2--mobile {
    padding-bottom: var(--spacing-2);
  }
}

@media (max-width: 640px) {
  .pd-b--3--mobile.pd-b--3--mobile {
    padding-bottom: var(--spacing-3);
  }
}

@media (max-width: 640px) {
  .pd-b--4--mobile.pd-b--4--mobile {
    padding-bottom: var(--spacing-4);
  }
}

@media (max-width: 640px) {
  .pd-b--5--mobile.pd-b--5--mobile {
    padding-bottom: var(--spacing-5);
  }
}

@media (max-width: 640px) {
  .pd-b--6--mobile.pd-b--6--mobile {
    padding-bottom: var(--spacing-6);
  }
}

@media (max-width: 640px) {
  .pd-b--7--mobile.pd-b--7--mobile {
    padding-bottom: var(--spacing-7);
  }
}

@media (max-width: 640px) {
  .pd-b--8--mobile.pd-b--8--mobile {
    padding-bottom: var(--spacing-8);
  }
}

@media (max-width: 640px) {
  .pd-b--9--mobile.pd-b--9--mobile {
    padding-bottom: var(--spacing-9);
  }
}

@media (max-width: 640px) {
  .pd-b--10--mobile.pd-b--10--mobile {
    padding-bottom: var(--spacing-10);
  }
}

@media (max-width: 640px) {
  .pd-b--11--mobile.pd-b--11--mobile {
    padding-bottom: var(--spacing-11);
  }
}

@media (max-width: 640px) {
  .pd-b--12--mobile.pd-b--12--mobile {
    padding-bottom: var(--spacing-12);
  }
}

@media (max-width: 640px) {
  .pd-b--14--mobile.pd-b--14--mobile {
    padding-bottom: var(--spacing-14);
  }
}

@media (max-width: 640px) {
  .pd-b--16--mobile.pd-b--16--mobile {
    padding-bottom: var(--spacing-16);
  }
}

@media (max-width: 640px) {
  .pd-b--20--mobile.pd-b--20--mobile {
    padding-bottom: var(--spacing-20);
  }
}

@media (max-width: 640px) {
  .pd-b--24--mobile.pd-b--24--mobile {
    padding-bottom: var(--spacing-24);
  }
}

@media (max-width: 640px) {
  .pd-l--mobile.pd-l--mobile {
    padding-left: var(--spacing-1);
  }
}

@media (max-width: 640px) {
  .pd-l--0--mobile.pd-l--0--mobile {
    padding-left: var(--spacing-0);
  }
}

@media (max-width: 640px) {
  .pd-l--1--mobile.pd-l--1--mobile {
    padding-left: var(--spacing-1);
  }
}

@media (max-width: 640px) {
  .pd-l--2--mobile.pd-l--2--mobile {
    padding-left: var(--spacing-2);
  }
}

@media (max-width: 640px) {
  .pd-l--3--mobile.pd-l--3--mobile {
    padding-left: var(--spacing-3);
  }
}

@media (max-width: 640px) {
  .pd-l--4--mobile.pd-l--4--mobile {
    padding-left: var(--spacing-4);
  }
}

@media (max-width: 640px) {
  .pd-l--5--mobile.pd-l--5--mobile {
    padding-left: var(--spacing-5);
  }
}

@media (max-width: 640px) {
  .pd-l--6--mobile.pd-l--6--mobile {
    padding-left: var(--spacing-6);
  }
}

@media (max-width: 640px) {
  .pd-l--7--mobile.pd-l--7--mobile {
    padding-left: var(--spacing-7);
  }
}

@media (max-width: 640px) {
  .pd-l--8--mobile.pd-l--8--mobile {
    padding-left: var(--spacing-8);
  }
}

@media (max-width: 640px) {
  .pd-l--9--mobile.pd-l--9--mobile {
    padding-left: var(--spacing-9);
  }
}

@media (max-width: 640px) {
  .pd-l--10--mobile.pd-l--10--mobile {
    padding-left: var(--spacing-10);
  }
}

@media (max-width: 640px) {
  .pd-l--11--mobile.pd-l--11--mobile {
    padding-left: var(--spacing-11);
  }
}

@media (max-width: 640px) {
  .pd-l--12--mobile.pd-l--12--mobile {
    padding-left: var(--spacing-12);
  }
}

@media (max-width: 640px) {
  .pd-l--14--mobile.pd-l--14--mobile {
    padding-left: var(--spacing-14);
  }
}

@media (max-width: 640px) {
  .pd-l--16--mobile.pd-l--16--mobile {
    padding-left: var(--spacing-16);
  }
}

@media (max-width: 640px) {
  .pd-l--20--mobile.pd-l--20--mobile {
    padding-left: var(--spacing-20);
  }
}

@media (max-width: 640px) {
  .pd-l--24--mobile.pd-l--24--mobile {
    padding-left: var(--spacing-24);
  }
}

@media (max-width: 640px) {
  .pd-r--mobile.pd-r--mobile {
    padding-right: var(--spacing-1);
  }
}

@media (max-width: 640px) {
  .pd-r--0--mobile.pd-r--0--mobile {
    padding-right: var(--spacing-0);
  }
}

@media (max-width: 640px) {
  .pd-r--1--mobile.pd-r--1--mobile {
    padding-right: var(--spacing-1);
  }
}

@media (max-width: 640px) {
  .pd-r--2--mobile.pd-r--2--mobile {
    padding-right: var(--spacing-2);
  }
}

@media (max-width: 640px) {
  .pd-r--3--mobile.pd-r--3--mobile {
    padding-right: var(--spacing-3);
  }
}

@media (max-width: 640px) {
  .pd-r--4--mobile.pd-r--4--mobile {
    padding-right: var(--spacing-4);
  }
}

@media (max-width: 640px) {
  .pd-r--5--mobile.pd-r--5--mobile {
    padding-right: var(--spacing-5);
  }
}

@media (max-width: 640px) {
  .pd-r--6--mobile.pd-r--6--mobile {
    padding-right: var(--spacing-6);
  }
}

@media (max-width: 640px) {
  .pd-r--7--mobile.pd-r--7--mobile {
    padding-right: var(--spacing-7);
  }
}

@media (max-width: 640px) {
  .pd-r--8--mobile.pd-r--8--mobile {
    padding-right: var(--spacing-8);
  }
}

@media (max-width: 640px) {
  .pd-r--9--mobile.pd-r--9--mobile {
    padding-right: var(--spacing-9);
  }
}

@media (max-width: 640px) {
  .pd-r--10--mobile.pd-r--10--mobile {
    padding-right: var(--spacing-10);
  }
}

@media (max-width: 640px) {
  .pd-r--11--mobile.pd-r--11--mobile {
    padding-right: var(--spacing-11);
  }
}

@media (max-width: 640px) {
  .pd-r--12--mobile.pd-r--12--mobile {
    padding-right: var(--spacing-12);
  }
}

@media (max-width: 640px) {
  .pd-r--14--mobile.pd-r--14--mobile {
    padding-right: var(--spacing-14);
  }
}

@media (max-width: 640px) {
  .pd-r--16--mobile.pd-r--16--mobile {
    padding-right: var(--spacing-16);
  }
}

@media (max-width: 640px) {
  .pd-r--20--mobile.pd-r--20--mobile {
    padding-right: var(--spacing-20);
  }
}

@media (max-width: 640px) {
  .pd-r--24--mobile.pd-r--24--mobile {
    padding-right: var(--spacing-24);
  }
}

@media (max-width: 640px) {
  .pd-x--mobile.pd-x--mobile {
    padding-left: var(--spacing-1);
    padding-right: var(--spacing-1);
  }
}

@media (max-width: 640px) {
  .pd-x--0--mobile.pd-x--0--mobile {
    padding-left: var(--spacing-0);
    padding-right: var(--spacing-0);
  }
}

@media (max-width: 640px) {
  .pd-x--1--mobile.pd-x--1--mobile {
    padding-left: var(--spacing-1);
    padding-right: var(--spacing-1);
  }
}

@media (max-width: 640px) {
  .pd-x--2--mobile.pd-x--2--mobile {
    padding-left: var(--spacing-2);
    padding-right: var(--spacing-2);
  }
}

@media (max-width: 640px) {
  .pd-x--3--mobile.pd-x--3--mobile {
    padding-left: var(--spacing-3);
    padding-right: var(--spacing-3);
  }
}

@media (max-width: 640px) {
  .pd-x--4--mobile.pd-x--4--mobile {
    padding-left: var(--spacing-4);
    padding-right: var(--spacing-4);
  }
}

@media (max-width: 640px) {
  .pd-x--5--mobile.pd-x--5--mobile {
    padding-left: var(--spacing-5);
    padding-right: var(--spacing-5);
  }
}

@media (max-width: 640px) {
  .pd-x--6--mobile.pd-x--6--mobile {
    padding-left: var(--spacing-6);
    padding-right: var(--spacing-6);
  }
}

@media (max-width: 640px) {
  .pd-x--7--mobile.pd-x--7--mobile {
    padding-left: var(--spacing-7);
    padding-right: var(--spacing-7);
  }
}

@media (max-width: 640px) {
  .pd-x--8--mobile.pd-x--8--mobile {
    padding-left: var(--spacing-8);
    padding-right: var(--spacing-8);
  }
}

@media (max-width: 640px) {
  .pd-x--9--mobile.pd-x--9--mobile {
    padding-left: var(--spacing-9);
    padding-right: var(--spacing-9);
  }
}

@media (max-width: 640px) {
  .pd-x--10--mobile.pd-x--10--mobile {
    padding-left: var(--spacing-10);
    padding-right: var(--spacing-10);
  }
}

@media (max-width: 640px) {
  .pd-x--11--mobile.pd-x--11--mobile {
    padding-left: var(--spacing-11);
    padding-right: var(--spacing-11);
  }
}

@media (max-width: 640px) {
  .pd-x--12--mobile.pd-x--12--mobile {
    padding-left: var(--spacing-12);
    padding-right: var(--spacing-12);
  }
}

@media (max-width: 640px) {
  .pd-x--14--mobile.pd-x--14--mobile {
    padding-left: var(--spacing-14);
    padding-right: var(--spacing-14);
  }
}

@media (max-width: 640px) {
  .pd-x--16--mobile.pd-x--16--mobile {
    padding-left: var(--spacing-16);
    padding-right: var(--spacing-16);
  }
}

@media (max-width: 640px) {
  .pd-x--20--mobile.pd-x--20--mobile {
    padding-left: var(--spacing-20);
    padding-right: var(--spacing-20);
  }
}

@media (max-width: 640px) {
  .pd-x--24--mobile.pd-x--24--mobile {
    padding-left: var(--spacing-24);
    padding-right: var(--spacing-24);
  }
}

@media (max-width: 640px) {
  .pd-y--mobile.pd-y--mobile {
    padding-top: var(--spacing-1);
    padding-bottom: var(--spacing-1);
  }
}

@media (max-width: 640px) {
  .pd-y--0--mobile.pd-y--0--mobile {
    padding-top: var(--spacing-0);
    padding-bottom: var(--spacing-0);
  }
}

@media (max-width: 640px) {
  .pd-y--1--mobile.pd-y--1--mobile {
    padding-top: var(--spacing-1);
    padding-bottom: var(--spacing-1);
  }
}

@media (max-width: 640px) {
  .pd-y--2--mobile.pd-y--2--mobile {
    padding-top: var(--spacing-2);
    padding-bottom: var(--spacing-2);
  }
}

@media (max-width: 640px) {
  .pd-y--3--mobile.pd-y--3--mobile {
    padding-top: var(--spacing-3);
    padding-bottom: var(--spacing-3);
  }
}

@media (max-width: 640px) {
  .pd-y--4--mobile.pd-y--4--mobile {
    padding-top: var(--spacing-4);
    padding-bottom: var(--spacing-4);
  }
}

@media (max-width: 640px) {
  .pd-y--5--mobile.pd-y--5--mobile {
    padding-top: var(--spacing-5);
    padding-bottom: var(--spacing-5);
  }
}

@media (max-width: 640px) {
  .pd-y--6--mobile.pd-y--6--mobile {
    padding-top: var(--spacing-6);
    padding-bottom: var(--spacing-6);
  }
}

@media (max-width: 640px) {
  .pd-y--7--mobile.pd-y--7--mobile {
    padding-top: var(--spacing-7);
    padding-bottom: var(--spacing-7);
  }
}

@media (max-width: 640px) {
  .pd-y--8--mobile.pd-y--8--mobile {
    padding-top: var(--spacing-8);
    padding-bottom: var(--spacing-8);
  }
}

@media (max-width: 640px) {
  .pd-y--9--mobile.pd-y--9--mobile {
    padding-top: var(--spacing-9);
    padding-bottom: var(--spacing-9);
  }
}

@media (max-width: 640px) {
  .pd-y--10--mobile.pd-y--10--mobile {
    padding-top: var(--spacing-10);
    padding-bottom: var(--spacing-10);
  }
}

@media (max-width: 640px) {
  .pd-y--11--mobile.pd-y--11--mobile {
    padding-top: var(--spacing-11);
    padding-bottom: var(--spacing-11);
  }
}

@media (max-width: 640px) {
  .pd-y--12--mobile.pd-y--12--mobile {
    padding-top: var(--spacing-12);
    padding-bottom: var(--spacing-12);
  }
}

@media (max-width: 640px) {
  .pd-y--14--mobile.pd-y--14--mobile {
    padding-top: var(--spacing-14);
    padding-bottom: var(--spacing-14);
  }
}

@media (max-width: 640px) {
  .pd-y--16--mobile.pd-y--16--mobile {
    padding-top: var(--spacing-16);
    padding-bottom: var(--spacing-16);
  }
}

@media (max-width: 640px) {
  .pd-y--20--mobile.pd-y--20--mobile {
    padding-top: var(--spacing-20);
    padding-bottom: var(--spacing-20);
  }
}

@media (max-width: 640px) {
  .pd-y--24--mobile.pd-y--24--mobile {
    padding-top: var(--spacing-24);
    padding-bottom: var(--spacing-24);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd--tablet.pd--tablet {
    padding-top: var(--spacing-1);
    padding-bottom: var(--spacing-1);
    padding-left: var(--spacing-1);
    padding-right: var(--spacing-1);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd--0--tablet.pd--0--tablet {
    padding-top: var(--spacing-0);
    padding-bottom: var(--spacing-0);
    padding-left: var(--spacing-0);
    padding-right: var(--spacing-0);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd--1--tablet.pd--1--tablet {
    padding-top: var(--spacing-1);
    padding-bottom: var(--spacing-1);
    padding-left: var(--spacing-1);
    padding-right: var(--spacing-1);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd--2--tablet.pd--2--tablet {
    padding-top: var(--spacing-2);
    padding-bottom: var(--spacing-2);
    padding-left: var(--spacing-2);
    padding-right: var(--spacing-2);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd--3--tablet.pd--3--tablet {
    padding-top: var(--spacing-3);
    padding-bottom: var(--spacing-3);
    padding-left: var(--spacing-3);
    padding-right: var(--spacing-3);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd--4--tablet.pd--4--tablet {
    padding-top: var(--spacing-4);
    padding-bottom: var(--spacing-4);
    padding-left: var(--spacing-4);
    padding-right: var(--spacing-4);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd--5--tablet.pd--5--tablet {
    padding-top: var(--spacing-5);
    padding-bottom: var(--spacing-5);
    padding-left: var(--spacing-5);
    padding-right: var(--spacing-5);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd--6--tablet.pd--6--tablet {
    padding-top: var(--spacing-6);
    padding-bottom: var(--spacing-6);
    padding-left: var(--spacing-6);
    padding-right: var(--spacing-6);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd--7--tablet.pd--7--tablet {
    padding-top: var(--spacing-7);
    padding-bottom: var(--spacing-7);
    padding-left: var(--spacing-7);
    padding-right: var(--spacing-7);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd--8--tablet.pd--8--tablet {
    padding-top: var(--spacing-8);
    padding-bottom: var(--spacing-8);
    padding-left: var(--spacing-8);
    padding-right: var(--spacing-8);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd--9--tablet.pd--9--tablet {
    padding-top: var(--spacing-9);
    padding-bottom: var(--spacing-9);
    padding-left: var(--spacing-9);
    padding-right: var(--spacing-9);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd--10--tablet.pd--10--tablet {
    padding-top: var(--spacing-10);
    padding-bottom: var(--spacing-10);
    padding-left: var(--spacing-10);
    padding-right: var(--spacing-10);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd--11--tablet.pd--11--tablet {
    padding-top: var(--spacing-11);
    padding-bottom: var(--spacing-11);
    padding-left: var(--spacing-11);
    padding-right: var(--spacing-11);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd--12--tablet.pd--12--tablet {
    padding-top: var(--spacing-12);
    padding-bottom: var(--spacing-12);
    padding-left: var(--spacing-12);
    padding-right: var(--spacing-12);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd--14--tablet.pd--14--tablet {
    padding-top: var(--spacing-14);
    padding-bottom: var(--spacing-14);
    padding-left: var(--spacing-14);
    padding-right: var(--spacing-14);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd--16--tablet.pd--16--tablet {
    padding-top: var(--spacing-16);
    padding-bottom: var(--spacing-16);
    padding-left: var(--spacing-16);
    padding-right: var(--spacing-16);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd--20--tablet.pd--20--tablet {
    padding-top: var(--spacing-20);
    padding-bottom: var(--spacing-20);
    padding-left: var(--spacing-20);
    padding-right: var(--spacing-20);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd--24--tablet.pd--24--tablet {
    padding-top: var(--spacing-24);
    padding-bottom: var(--spacing-24);
    padding-left: var(--spacing-24);
    padding-right: var(--spacing-24);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-t--tablet.pd-t--tablet {
    padding-top: var(--spacing-1);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-t--0--tablet.pd-t--0--tablet {
    padding-top: var(--spacing-0);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-t--1--tablet.pd-t--1--tablet {
    padding-top: var(--spacing-1);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-t--2--tablet.pd-t--2--tablet {
    padding-top: var(--spacing-2);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-t--3--tablet.pd-t--3--tablet {
    padding-top: var(--spacing-3);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-t--4--tablet.pd-t--4--tablet {
    padding-top: var(--spacing-4);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-t--5--tablet.pd-t--5--tablet {
    padding-top: var(--spacing-5);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-t--6--tablet.pd-t--6--tablet {
    padding-top: var(--spacing-6);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-t--7--tablet.pd-t--7--tablet {
    padding-top: var(--spacing-7);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-t--8--tablet.pd-t--8--tablet {
    padding-top: var(--spacing-8);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-t--9--tablet.pd-t--9--tablet {
    padding-top: var(--spacing-9);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-t--10--tablet.pd-t--10--tablet {
    padding-top: var(--spacing-10);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-t--11--tablet.pd-t--11--tablet {
    padding-top: var(--spacing-11);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-t--12--tablet.pd-t--12--tablet {
    padding-top: var(--spacing-12);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-t--14--tablet.pd-t--14--tablet {
    padding-top: var(--spacing-14);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-t--16--tablet.pd-t--16--tablet {
    padding-top: var(--spacing-16);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-t--20--tablet.pd-t--20--tablet {
    padding-top: var(--spacing-20);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-t--24--tablet.pd-t--24--tablet {
    padding-top: var(--spacing-24);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-b--tablet.pd-b--tablet {
    padding-bottom: var(--spacing-1);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-b--0--tablet.pd-b--0--tablet {
    padding-bottom: var(--spacing-0);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-b--1--tablet.pd-b--1--tablet {
    padding-bottom: var(--spacing-1);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-b--2--tablet.pd-b--2--tablet {
    padding-bottom: var(--spacing-2);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-b--3--tablet.pd-b--3--tablet {
    padding-bottom: var(--spacing-3);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-b--4--tablet.pd-b--4--tablet {
    padding-bottom: var(--spacing-4);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-b--5--tablet.pd-b--5--tablet {
    padding-bottom: var(--spacing-5);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-b--6--tablet.pd-b--6--tablet {
    padding-bottom: var(--spacing-6);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-b--7--tablet.pd-b--7--tablet {
    padding-bottom: var(--spacing-7);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-b--8--tablet.pd-b--8--tablet {
    padding-bottom: var(--spacing-8);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-b--9--tablet.pd-b--9--tablet {
    padding-bottom: var(--spacing-9);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-b--10--tablet.pd-b--10--tablet {
    padding-bottom: var(--spacing-10);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-b--11--tablet.pd-b--11--tablet {
    padding-bottom: var(--spacing-11);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-b--12--tablet.pd-b--12--tablet {
    padding-bottom: var(--spacing-12);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-b--14--tablet.pd-b--14--tablet {
    padding-bottom: var(--spacing-14);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-b--16--tablet.pd-b--16--tablet {
    padding-bottom: var(--spacing-16);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-b--20--tablet.pd-b--20--tablet {
    padding-bottom: var(--spacing-20);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-b--24--tablet.pd-b--24--tablet {
    padding-bottom: var(--spacing-24);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-l--tablet.pd-l--tablet {
    padding-left: var(--spacing-1);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-l--0--tablet.pd-l--0--tablet {
    padding-left: var(--spacing-0);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-l--1--tablet.pd-l--1--tablet {
    padding-left: var(--spacing-1);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-l--2--tablet.pd-l--2--tablet {
    padding-left: var(--spacing-2);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-l--3--tablet.pd-l--3--tablet {
    padding-left: var(--spacing-3);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-l--4--tablet.pd-l--4--tablet {
    padding-left: var(--spacing-4);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-l--5--tablet.pd-l--5--tablet {
    padding-left: var(--spacing-5);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-l--6--tablet.pd-l--6--tablet {
    padding-left: var(--spacing-6);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-l--7--tablet.pd-l--7--tablet {
    padding-left: var(--spacing-7);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-l--8--tablet.pd-l--8--tablet {
    padding-left: var(--spacing-8);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-l--9--tablet.pd-l--9--tablet {
    padding-left: var(--spacing-9);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-l--10--tablet.pd-l--10--tablet {
    padding-left: var(--spacing-10);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-l--11--tablet.pd-l--11--tablet {
    padding-left: var(--spacing-11);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-l--12--tablet.pd-l--12--tablet {
    padding-left: var(--spacing-12);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-l--14--tablet.pd-l--14--tablet {
    padding-left: var(--spacing-14);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-l--16--tablet.pd-l--16--tablet {
    padding-left: var(--spacing-16);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-l--20--tablet.pd-l--20--tablet {
    padding-left: var(--spacing-20);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-l--24--tablet.pd-l--24--tablet {
    padding-left: var(--spacing-24);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-r--tablet.pd-r--tablet {
    padding-right: var(--spacing-1);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-r--0--tablet.pd-r--0--tablet {
    padding-right: var(--spacing-0);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-r--1--tablet.pd-r--1--tablet {
    padding-right: var(--spacing-1);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-r--2--tablet.pd-r--2--tablet {
    padding-right: var(--spacing-2);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-r--3--tablet.pd-r--3--tablet {
    padding-right: var(--spacing-3);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-r--4--tablet.pd-r--4--tablet {
    padding-right: var(--spacing-4);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-r--5--tablet.pd-r--5--tablet {
    padding-right: var(--spacing-5);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-r--6--tablet.pd-r--6--tablet {
    padding-right: var(--spacing-6);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-r--7--tablet.pd-r--7--tablet {
    padding-right: var(--spacing-7);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-r--8--tablet.pd-r--8--tablet {
    padding-right: var(--spacing-8);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-r--9--tablet.pd-r--9--tablet {
    padding-right: var(--spacing-9);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-r--10--tablet.pd-r--10--tablet {
    padding-right: var(--spacing-10);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-r--11--tablet.pd-r--11--tablet {
    padding-right: var(--spacing-11);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-r--12--tablet.pd-r--12--tablet {
    padding-right: var(--spacing-12);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-r--14--tablet.pd-r--14--tablet {
    padding-right: var(--spacing-14);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-r--16--tablet.pd-r--16--tablet {
    padding-right: var(--spacing-16);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-r--20--tablet.pd-r--20--tablet {
    padding-right: var(--spacing-20);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-r--24--tablet.pd-r--24--tablet {
    padding-right: var(--spacing-24);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-x--tablet.pd-x--tablet {
    padding-left: var(--spacing-1);
    padding-right: var(--spacing-1);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-x--0--tablet.pd-x--0--tablet {
    padding-left: var(--spacing-0);
    padding-right: var(--spacing-0);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-x--1--tablet.pd-x--1--tablet {
    padding-left: var(--spacing-1);
    padding-right: var(--spacing-1);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-x--2--tablet.pd-x--2--tablet {
    padding-left: var(--spacing-2);
    padding-right: var(--spacing-2);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-x--3--tablet.pd-x--3--tablet {
    padding-left: var(--spacing-3);
    padding-right: var(--spacing-3);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-x--4--tablet.pd-x--4--tablet {
    padding-left: var(--spacing-4);
    padding-right: var(--spacing-4);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-x--5--tablet.pd-x--5--tablet {
    padding-left: var(--spacing-5);
    padding-right: var(--spacing-5);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-x--6--tablet.pd-x--6--tablet {
    padding-left: var(--spacing-6);
    padding-right: var(--spacing-6);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-x--7--tablet.pd-x--7--tablet {
    padding-left: var(--spacing-7);
    padding-right: var(--spacing-7);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-x--8--tablet.pd-x--8--tablet {
    padding-left: var(--spacing-8);
    padding-right: var(--spacing-8);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-x--9--tablet.pd-x--9--tablet {
    padding-left: var(--spacing-9);
    padding-right: var(--spacing-9);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-x--10--tablet.pd-x--10--tablet {
    padding-left: var(--spacing-10);
    padding-right: var(--spacing-10);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-x--11--tablet.pd-x--11--tablet {
    padding-left: var(--spacing-11);
    padding-right: var(--spacing-11);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-x--12--tablet.pd-x--12--tablet {
    padding-left: var(--spacing-12);
    padding-right: var(--spacing-12);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-x--14--tablet.pd-x--14--tablet {
    padding-left: var(--spacing-14);
    padding-right: var(--spacing-14);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-x--16--tablet.pd-x--16--tablet {
    padding-left: var(--spacing-16);
    padding-right: var(--spacing-16);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-x--20--tablet.pd-x--20--tablet {
    padding-left: var(--spacing-20);
    padding-right: var(--spacing-20);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-x--24--tablet.pd-x--24--tablet {
    padding-left: var(--spacing-24);
    padding-right: var(--spacing-24);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-y--tablet.pd-y--tablet {
    padding-top: var(--spacing-1);
    padding-bottom: var(--spacing-1);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-y--0--tablet.pd-y--0--tablet {
    padding-top: var(--spacing-0);
    padding-bottom: var(--spacing-0);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-y--1--tablet.pd-y--1--tablet {
    padding-top: var(--spacing-1);
    padding-bottom: var(--spacing-1);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-y--2--tablet.pd-y--2--tablet {
    padding-top: var(--spacing-2);
    padding-bottom: var(--spacing-2);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-y--3--tablet.pd-y--3--tablet {
    padding-top: var(--spacing-3);
    padding-bottom: var(--spacing-3);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-y--4--tablet.pd-y--4--tablet {
    padding-top: var(--spacing-4);
    padding-bottom: var(--spacing-4);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-y--5--tablet.pd-y--5--tablet {
    padding-top: var(--spacing-5);
    padding-bottom: var(--spacing-5);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-y--6--tablet.pd-y--6--tablet {
    padding-top: var(--spacing-6);
    padding-bottom: var(--spacing-6);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-y--7--tablet.pd-y--7--tablet {
    padding-top: var(--spacing-7);
    padding-bottom: var(--spacing-7);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-y--8--tablet.pd-y--8--tablet {
    padding-top: var(--spacing-8);
    padding-bottom: var(--spacing-8);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-y--9--tablet.pd-y--9--tablet {
    padding-top: var(--spacing-9);
    padding-bottom: var(--spacing-9);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-y--10--tablet.pd-y--10--tablet {
    padding-top: var(--spacing-10);
    padding-bottom: var(--spacing-10);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-y--11--tablet.pd-y--11--tablet {
    padding-top: var(--spacing-11);
    padding-bottom: var(--spacing-11);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-y--12--tablet.pd-y--12--tablet {
    padding-top: var(--spacing-12);
    padding-bottom: var(--spacing-12);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-y--14--tablet.pd-y--14--tablet {
    padding-top: var(--spacing-14);
    padding-bottom: var(--spacing-14);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-y--16--tablet.pd-y--16--tablet {
    padding-top: var(--spacing-16);
    padding-bottom: var(--spacing-16);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-y--20--tablet.pd-y--20--tablet {
    padding-top: var(--spacing-20);
    padding-bottom: var(--spacing-20);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .pd-y--24--tablet.pd-y--24--tablet {
    padding-top: var(--spacing-24);
    padding-bottom: var(--spacing-24);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd--large-tablet.pd--large-tablet {
    padding-top: var(--spacing-1);
    padding-bottom: var(--spacing-1);
    padding-left: var(--spacing-1);
    padding-right: var(--spacing-1);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd--0--large-tablet.pd--0--large-tablet {
    padding-top: var(--spacing-0);
    padding-bottom: var(--spacing-0);
    padding-left: var(--spacing-0);
    padding-right: var(--spacing-0);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd--1--large-tablet.pd--1--large-tablet {
    padding-top: var(--spacing-1);
    padding-bottom: var(--spacing-1);
    padding-left: var(--spacing-1);
    padding-right: var(--spacing-1);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd--2--large-tablet.pd--2--large-tablet {
    padding-top: var(--spacing-2);
    padding-bottom: var(--spacing-2);
    padding-left: var(--spacing-2);
    padding-right: var(--spacing-2);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd--3--large-tablet.pd--3--large-tablet {
    padding-top: var(--spacing-3);
    padding-bottom: var(--spacing-3);
    padding-left: var(--spacing-3);
    padding-right: var(--spacing-3);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd--4--large-tablet.pd--4--large-tablet {
    padding-top: var(--spacing-4);
    padding-bottom: var(--spacing-4);
    padding-left: var(--spacing-4);
    padding-right: var(--spacing-4);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd--5--large-tablet.pd--5--large-tablet {
    padding-top: var(--spacing-5);
    padding-bottom: var(--spacing-5);
    padding-left: var(--spacing-5);
    padding-right: var(--spacing-5);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd--6--large-tablet.pd--6--large-tablet {
    padding-top: var(--spacing-6);
    padding-bottom: var(--spacing-6);
    padding-left: var(--spacing-6);
    padding-right: var(--spacing-6);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd--7--large-tablet.pd--7--large-tablet {
    padding-top: var(--spacing-7);
    padding-bottom: var(--spacing-7);
    padding-left: var(--spacing-7);
    padding-right: var(--spacing-7);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd--8--large-tablet.pd--8--large-tablet {
    padding-top: var(--spacing-8);
    padding-bottom: var(--spacing-8);
    padding-left: var(--spacing-8);
    padding-right: var(--spacing-8);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd--9--large-tablet.pd--9--large-tablet {
    padding-top: var(--spacing-9);
    padding-bottom: var(--spacing-9);
    padding-left: var(--spacing-9);
    padding-right: var(--spacing-9);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd--10--large-tablet.pd--10--large-tablet {
    padding-top: var(--spacing-10);
    padding-bottom: var(--spacing-10);
    padding-left: var(--spacing-10);
    padding-right: var(--spacing-10);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd--11--large-tablet.pd--11--large-tablet {
    padding-top: var(--spacing-11);
    padding-bottom: var(--spacing-11);
    padding-left: var(--spacing-11);
    padding-right: var(--spacing-11);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd--12--large-tablet.pd--12--large-tablet {
    padding-top: var(--spacing-12);
    padding-bottom: var(--spacing-12);
    padding-left: var(--spacing-12);
    padding-right: var(--spacing-12);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd--14--large-tablet.pd--14--large-tablet {
    padding-top: var(--spacing-14);
    padding-bottom: var(--spacing-14);
    padding-left: var(--spacing-14);
    padding-right: var(--spacing-14);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd--16--large-tablet.pd--16--large-tablet {
    padding-top: var(--spacing-16);
    padding-bottom: var(--spacing-16);
    padding-left: var(--spacing-16);
    padding-right: var(--spacing-16);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd--20--large-tablet.pd--20--large-tablet {
    padding-top: var(--spacing-20);
    padding-bottom: var(--spacing-20);
    padding-left: var(--spacing-20);
    padding-right: var(--spacing-20);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd--24--large-tablet.pd--24--large-tablet {
    padding-top: var(--spacing-24);
    padding-bottom: var(--spacing-24);
    padding-left: var(--spacing-24);
    padding-right: var(--spacing-24);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-t--large-tablet.pd-t--large-tablet {
    padding-top: var(--spacing-1);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-t--0--large-tablet.pd-t--0--large-tablet {
    padding-top: var(--spacing-0);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-t--1--large-tablet.pd-t--1--large-tablet {
    padding-top: var(--spacing-1);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-t--2--large-tablet.pd-t--2--large-tablet {
    padding-top: var(--spacing-2);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-t--3--large-tablet.pd-t--3--large-tablet {
    padding-top: var(--spacing-3);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-t--4--large-tablet.pd-t--4--large-tablet {
    padding-top: var(--spacing-4);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-t--5--large-tablet.pd-t--5--large-tablet {
    padding-top: var(--spacing-5);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-t--6--large-tablet.pd-t--6--large-tablet {
    padding-top: var(--spacing-6);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-t--7--large-tablet.pd-t--7--large-tablet {
    padding-top: var(--spacing-7);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-t--8--large-tablet.pd-t--8--large-tablet {
    padding-top: var(--spacing-8);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-t--9--large-tablet.pd-t--9--large-tablet {
    padding-top: var(--spacing-9);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-t--10--large-tablet.pd-t--10--large-tablet {
    padding-top: var(--spacing-10);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-t--11--large-tablet.pd-t--11--large-tablet {
    padding-top: var(--spacing-11);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-t--12--large-tablet.pd-t--12--large-tablet {
    padding-top: var(--spacing-12);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-t--14--large-tablet.pd-t--14--large-tablet {
    padding-top: var(--spacing-14);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-t--16--large-tablet.pd-t--16--large-tablet {
    padding-top: var(--spacing-16);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-t--20--large-tablet.pd-t--20--large-tablet {
    padding-top: var(--spacing-20);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-t--24--large-tablet.pd-t--24--large-tablet {
    padding-top: var(--spacing-24);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-b--large-tablet.pd-b--large-tablet {
    padding-bottom: var(--spacing-1);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-b--0--large-tablet.pd-b--0--large-tablet {
    padding-bottom: var(--spacing-0);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-b--1--large-tablet.pd-b--1--large-tablet {
    padding-bottom: var(--spacing-1);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-b--2--large-tablet.pd-b--2--large-tablet {
    padding-bottom: var(--spacing-2);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-b--3--large-tablet.pd-b--3--large-tablet {
    padding-bottom: var(--spacing-3);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-b--4--large-tablet.pd-b--4--large-tablet {
    padding-bottom: var(--spacing-4);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-b--5--large-tablet.pd-b--5--large-tablet {
    padding-bottom: var(--spacing-5);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-b--6--large-tablet.pd-b--6--large-tablet {
    padding-bottom: var(--spacing-6);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-b--7--large-tablet.pd-b--7--large-tablet {
    padding-bottom: var(--spacing-7);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-b--8--large-tablet.pd-b--8--large-tablet {
    padding-bottom: var(--spacing-8);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-b--9--large-tablet.pd-b--9--large-tablet {
    padding-bottom: var(--spacing-9);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-b--10--large-tablet.pd-b--10--large-tablet {
    padding-bottom: var(--spacing-10);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-b--11--large-tablet.pd-b--11--large-tablet {
    padding-bottom: var(--spacing-11);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-b--12--large-tablet.pd-b--12--large-tablet {
    padding-bottom: var(--spacing-12);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-b--14--large-tablet.pd-b--14--large-tablet {
    padding-bottom: var(--spacing-14);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-b--16--large-tablet.pd-b--16--large-tablet {
    padding-bottom: var(--spacing-16);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-b--20--large-tablet.pd-b--20--large-tablet {
    padding-bottom: var(--spacing-20);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-b--24--large-tablet.pd-b--24--large-tablet {
    padding-bottom: var(--spacing-24);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-l--large-tablet.pd-l--large-tablet {
    padding-left: var(--spacing-1);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-l--0--large-tablet.pd-l--0--large-tablet {
    padding-left: var(--spacing-0);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-l--1--large-tablet.pd-l--1--large-tablet {
    padding-left: var(--spacing-1);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-l--2--large-tablet.pd-l--2--large-tablet {
    padding-left: var(--spacing-2);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-l--3--large-tablet.pd-l--3--large-tablet {
    padding-left: var(--spacing-3);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-l--4--large-tablet.pd-l--4--large-tablet {
    padding-left: var(--spacing-4);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-l--5--large-tablet.pd-l--5--large-tablet {
    padding-left: var(--spacing-5);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-l--6--large-tablet.pd-l--6--large-tablet {
    padding-left: var(--spacing-6);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-l--7--large-tablet.pd-l--7--large-tablet {
    padding-left: var(--spacing-7);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-l--8--large-tablet.pd-l--8--large-tablet {
    padding-left: var(--spacing-8);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-l--9--large-tablet.pd-l--9--large-tablet {
    padding-left: var(--spacing-9);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-l--10--large-tablet.pd-l--10--large-tablet {
    padding-left: var(--spacing-10);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-l--11--large-tablet.pd-l--11--large-tablet {
    padding-left: var(--spacing-11);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-l--12--large-tablet.pd-l--12--large-tablet {
    padding-left: var(--spacing-12);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-l--14--large-tablet.pd-l--14--large-tablet {
    padding-left: var(--spacing-14);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-l--16--large-tablet.pd-l--16--large-tablet {
    padding-left: var(--spacing-16);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-l--20--large-tablet.pd-l--20--large-tablet {
    padding-left: var(--spacing-20);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-l--24--large-tablet.pd-l--24--large-tablet {
    padding-left: var(--spacing-24);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-r--large-tablet.pd-r--large-tablet {
    padding-right: var(--spacing-1);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-r--0--large-tablet.pd-r--0--large-tablet {
    padding-right: var(--spacing-0);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-r--1--large-tablet.pd-r--1--large-tablet {
    padding-right: var(--spacing-1);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-r--2--large-tablet.pd-r--2--large-tablet {
    padding-right: var(--spacing-2);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-r--3--large-tablet.pd-r--3--large-tablet {
    padding-right: var(--spacing-3);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-r--4--large-tablet.pd-r--4--large-tablet {
    padding-right: var(--spacing-4);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-r--5--large-tablet.pd-r--5--large-tablet {
    padding-right: var(--spacing-5);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-r--6--large-tablet.pd-r--6--large-tablet {
    padding-right: var(--spacing-6);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-r--7--large-tablet.pd-r--7--large-tablet {
    padding-right: var(--spacing-7);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-r--8--large-tablet.pd-r--8--large-tablet {
    padding-right: var(--spacing-8);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-r--9--large-tablet.pd-r--9--large-tablet {
    padding-right: var(--spacing-9);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-r--10--large-tablet.pd-r--10--large-tablet {
    padding-right: var(--spacing-10);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-r--11--large-tablet.pd-r--11--large-tablet {
    padding-right: var(--spacing-11);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-r--12--large-tablet.pd-r--12--large-tablet {
    padding-right: var(--spacing-12);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-r--14--large-tablet.pd-r--14--large-tablet {
    padding-right: var(--spacing-14);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-r--16--large-tablet.pd-r--16--large-tablet {
    padding-right: var(--spacing-16);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-r--20--large-tablet.pd-r--20--large-tablet {
    padding-right: var(--spacing-20);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-r--24--large-tablet.pd-r--24--large-tablet {
    padding-right: var(--spacing-24);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-x--large-tablet.pd-x--large-tablet {
    padding-left: var(--spacing-1);
    padding-right: var(--spacing-1);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-x--0--large-tablet.pd-x--0--large-tablet {
    padding-left: var(--spacing-0);
    padding-right: var(--spacing-0);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-x--1--large-tablet.pd-x--1--large-tablet {
    padding-left: var(--spacing-1);
    padding-right: var(--spacing-1);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-x--2--large-tablet.pd-x--2--large-tablet {
    padding-left: var(--spacing-2);
    padding-right: var(--spacing-2);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-x--3--large-tablet.pd-x--3--large-tablet {
    padding-left: var(--spacing-3);
    padding-right: var(--spacing-3);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-x--4--large-tablet.pd-x--4--large-tablet {
    padding-left: var(--spacing-4);
    padding-right: var(--spacing-4);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-x--5--large-tablet.pd-x--5--large-tablet {
    padding-left: var(--spacing-5);
    padding-right: var(--spacing-5);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-x--6--large-tablet.pd-x--6--large-tablet {
    padding-left: var(--spacing-6);
    padding-right: var(--spacing-6);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-x--7--large-tablet.pd-x--7--large-tablet {
    padding-left: var(--spacing-7);
    padding-right: var(--spacing-7);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-x--8--large-tablet.pd-x--8--large-tablet {
    padding-left: var(--spacing-8);
    padding-right: var(--spacing-8);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-x--9--large-tablet.pd-x--9--large-tablet {
    padding-left: var(--spacing-9);
    padding-right: var(--spacing-9);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-x--10--large-tablet.pd-x--10--large-tablet {
    padding-left: var(--spacing-10);
    padding-right: var(--spacing-10);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-x--11--large-tablet.pd-x--11--large-tablet {
    padding-left: var(--spacing-11);
    padding-right: var(--spacing-11);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-x--12--large-tablet.pd-x--12--large-tablet {
    padding-left: var(--spacing-12);
    padding-right: var(--spacing-12);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-x--14--large-tablet.pd-x--14--large-tablet {
    padding-left: var(--spacing-14);
    padding-right: var(--spacing-14);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-x--16--large-tablet.pd-x--16--large-tablet {
    padding-left: var(--spacing-16);
    padding-right: var(--spacing-16);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-x--20--large-tablet.pd-x--20--large-tablet {
    padding-left: var(--spacing-20);
    padding-right: var(--spacing-20);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-x--24--large-tablet.pd-x--24--large-tablet {
    padding-left: var(--spacing-24);
    padding-right: var(--spacing-24);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-y--large-tablet.pd-y--large-tablet {
    padding-top: var(--spacing-1);
    padding-bottom: var(--spacing-1);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-y--0--large-tablet.pd-y--0--large-tablet {
    padding-top: var(--spacing-0);
    padding-bottom: var(--spacing-0);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-y--1--large-tablet.pd-y--1--large-tablet {
    padding-top: var(--spacing-1);
    padding-bottom: var(--spacing-1);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-y--2--large-tablet.pd-y--2--large-tablet {
    padding-top: var(--spacing-2);
    padding-bottom: var(--spacing-2);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-y--3--large-tablet.pd-y--3--large-tablet {
    padding-top: var(--spacing-3);
    padding-bottom: var(--spacing-3);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-y--4--large-tablet.pd-y--4--large-tablet {
    padding-top: var(--spacing-4);
    padding-bottom: var(--spacing-4);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-y--5--large-tablet.pd-y--5--large-tablet {
    padding-top: var(--spacing-5);
    padding-bottom: var(--spacing-5);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-y--6--large-tablet.pd-y--6--large-tablet {
    padding-top: var(--spacing-6);
    padding-bottom: var(--spacing-6);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-y--7--large-tablet.pd-y--7--large-tablet {
    padding-top: var(--spacing-7);
    padding-bottom: var(--spacing-7);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-y--8--large-tablet.pd-y--8--large-tablet {
    padding-top: var(--spacing-8);
    padding-bottom: var(--spacing-8);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-y--9--large-tablet.pd-y--9--large-tablet {
    padding-top: var(--spacing-9);
    padding-bottom: var(--spacing-9);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-y--10--large-tablet.pd-y--10--large-tablet {
    padding-top: var(--spacing-10);
    padding-bottom: var(--spacing-10);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-y--11--large-tablet.pd-y--11--large-tablet {
    padding-top: var(--spacing-11);
    padding-bottom: var(--spacing-11);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-y--12--large-tablet.pd-y--12--large-tablet {
    padding-top: var(--spacing-12);
    padding-bottom: var(--spacing-12);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-y--14--large-tablet.pd-y--14--large-tablet {
    padding-top: var(--spacing-14);
    padding-bottom: var(--spacing-14);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-y--16--large-tablet.pd-y--16--large-tablet {
    padding-top: var(--spacing-16);
    padding-bottom: var(--spacing-16);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-y--20--large-tablet.pd-y--20--large-tablet {
    padding-top: var(--spacing-20);
    padding-bottom: var(--spacing-20);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .pd-y--24--large-tablet.pd-y--24--large-tablet {
    padding-top: var(--spacing-24);
    padding-bottom: var(--spacing-24);
  }
}

@media (min-width: 1201px) {
  .pd--laptop.pd--laptop {
    padding-top: var(--spacing-1);
    padding-bottom: var(--spacing-1);
    padding-left: var(--spacing-1);
    padding-right: var(--spacing-1);
  }
}

@media (min-width: 1201px) {
  .pd--0--laptop.pd--0--laptop {
    padding-top: var(--spacing-0);
    padding-bottom: var(--spacing-0);
    padding-left: var(--spacing-0);
    padding-right: var(--spacing-0);
  }
}

@media (min-width: 1201px) {
  .pd--1--laptop.pd--1--laptop {
    padding-top: var(--spacing-1);
    padding-bottom: var(--spacing-1);
    padding-left: var(--spacing-1);
    padding-right: var(--spacing-1);
  }
}

@media (min-width: 1201px) {
  .pd--2--laptop.pd--2--laptop {
    padding-top: var(--spacing-2);
    padding-bottom: var(--spacing-2);
    padding-left: var(--spacing-2);
    padding-right: var(--spacing-2);
  }
}

@media (min-width: 1201px) {
  .pd--3--laptop.pd--3--laptop {
    padding-top: var(--spacing-3);
    padding-bottom: var(--spacing-3);
    padding-left: var(--spacing-3);
    padding-right: var(--spacing-3);
  }
}

@media (min-width: 1201px) {
  .pd--4--laptop.pd--4--laptop {
    padding-top: var(--spacing-4);
    padding-bottom: var(--spacing-4);
    padding-left: var(--spacing-4);
    padding-right: var(--spacing-4);
  }
}

@media (min-width: 1201px) {
  .pd--5--laptop.pd--5--laptop {
    padding-top: var(--spacing-5);
    padding-bottom: var(--spacing-5);
    padding-left: var(--spacing-5);
    padding-right: var(--spacing-5);
  }
}

@media (min-width: 1201px) {
  .pd--6--laptop.pd--6--laptop {
    padding-top: var(--spacing-6);
    padding-bottom: var(--spacing-6);
    padding-left: var(--spacing-6);
    padding-right: var(--spacing-6);
  }
}

@media (min-width: 1201px) {
  .pd--7--laptop.pd--7--laptop {
    padding-top: var(--spacing-7);
    padding-bottom: var(--spacing-7);
    padding-left: var(--spacing-7);
    padding-right: var(--spacing-7);
  }
}

@media (min-width: 1201px) {
  .pd--8--laptop.pd--8--laptop {
    padding-top: var(--spacing-8);
    padding-bottom: var(--spacing-8);
    padding-left: var(--spacing-8);
    padding-right: var(--spacing-8);
  }
}

@media (min-width: 1201px) {
  .pd--9--laptop.pd--9--laptop {
    padding-top: var(--spacing-9);
    padding-bottom: var(--spacing-9);
    padding-left: var(--spacing-9);
    padding-right: var(--spacing-9);
  }
}

@media (min-width: 1201px) {
  .pd--10--laptop.pd--10--laptop {
    padding-top: var(--spacing-10);
    padding-bottom: var(--spacing-10);
    padding-left: var(--spacing-10);
    padding-right: var(--spacing-10);
  }
}

@media (min-width: 1201px) {
  .pd--11--laptop.pd--11--laptop {
    padding-top: var(--spacing-11);
    padding-bottom: var(--spacing-11);
    padding-left: var(--spacing-11);
    padding-right: var(--spacing-11);
  }
}

@media (min-width: 1201px) {
  .pd--12--laptop.pd--12--laptop {
    padding-top: var(--spacing-12);
    padding-bottom: var(--spacing-12);
    padding-left: var(--spacing-12);
    padding-right: var(--spacing-12);
  }
}

@media (min-width: 1201px) {
  .pd--14--laptop.pd--14--laptop {
    padding-top: var(--spacing-14);
    padding-bottom: var(--spacing-14);
    padding-left: var(--spacing-14);
    padding-right: var(--spacing-14);
  }
}

@media (min-width: 1201px) {
  .pd--16--laptop.pd--16--laptop {
    padding-top: var(--spacing-16);
    padding-bottom: var(--spacing-16);
    padding-left: var(--spacing-16);
    padding-right: var(--spacing-16);
  }
}

@media (min-width: 1201px) {
  .pd--20--laptop.pd--20--laptop {
    padding-top: var(--spacing-20);
    padding-bottom: var(--spacing-20);
    padding-left: var(--spacing-20);
    padding-right: var(--spacing-20);
  }
}

@media (min-width: 1201px) {
  .pd--24--laptop.pd--24--laptop {
    padding-top: var(--spacing-24);
    padding-bottom: var(--spacing-24);
    padding-left: var(--spacing-24);
    padding-right: var(--spacing-24);
  }
}

@media (min-width: 1201px) {
  .pd-t--laptop.pd-t--laptop {
    padding-top: var(--spacing-1);
  }
}

@media (min-width: 1201px) {
  .pd-t--0--laptop.pd-t--0--laptop {
    padding-top: var(--spacing-0);
  }
}

@media (min-width: 1201px) {
  .pd-t--1--laptop.pd-t--1--laptop {
    padding-top: var(--spacing-1);
  }
}

@media (min-width: 1201px) {
  .pd-t--2--laptop.pd-t--2--laptop {
    padding-top: var(--spacing-2);
  }
}

@media (min-width: 1201px) {
  .pd-t--3--laptop.pd-t--3--laptop {
    padding-top: var(--spacing-3);
  }
}

@media (min-width: 1201px) {
  .pd-t--4--laptop.pd-t--4--laptop {
    padding-top: var(--spacing-4);
  }
}

@media (min-width: 1201px) {
  .pd-t--5--laptop.pd-t--5--laptop {
    padding-top: var(--spacing-5);
  }
}

@media (min-width: 1201px) {
  .pd-t--6--laptop.pd-t--6--laptop {
    padding-top: var(--spacing-6);
  }
}

@media (min-width: 1201px) {
  .pd-t--7--laptop.pd-t--7--laptop {
    padding-top: var(--spacing-7);
  }
}

@media (min-width: 1201px) {
  .pd-t--8--laptop.pd-t--8--laptop {
    padding-top: var(--spacing-8);
  }
}

@media (min-width: 1201px) {
  .pd-t--9--laptop.pd-t--9--laptop {
    padding-top: var(--spacing-9);
  }
}

@media (min-width: 1201px) {
  .pd-t--10--laptop.pd-t--10--laptop {
    padding-top: var(--spacing-10);
  }
}

@media (min-width: 1201px) {
  .pd-t--11--laptop.pd-t--11--laptop {
    padding-top: var(--spacing-11);
  }
}

@media (min-width: 1201px) {
  .pd-t--12--laptop.pd-t--12--laptop {
    padding-top: var(--spacing-12);
  }
}

@media (min-width: 1201px) {
  .pd-t--14--laptop.pd-t--14--laptop {
    padding-top: var(--spacing-14);
  }
}

@media (min-width: 1201px) {
  .pd-t--16--laptop.pd-t--16--laptop {
    padding-top: var(--spacing-16);
  }
}

@media (min-width: 1201px) {
  .pd-t--20--laptop.pd-t--20--laptop {
    padding-top: var(--spacing-20);
  }
}

@media (min-width: 1201px) {
  .pd-t--24--laptop.pd-t--24--laptop {
    padding-top: var(--spacing-24);
  }
}

@media (min-width: 1201px) {
  .pd-b--laptop.pd-b--laptop {
    padding-bottom: var(--spacing-1);
  }
}

@media (min-width: 1201px) {
  .pd-b--0--laptop.pd-b--0--laptop {
    padding-bottom: var(--spacing-0);
  }
}

@media (min-width: 1201px) {
  .pd-b--1--laptop.pd-b--1--laptop {
    padding-bottom: var(--spacing-1);
  }
}

@media (min-width: 1201px) {
  .pd-b--2--laptop.pd-b--2--laptop {
    padding-bottom: var(--spacing-2);
  }
}

@media (min-width: 1201px) {
  .pd-b--3--laptop.pd-b--3--laptop {
    padding-bottom: var(--spacing-3);
  }
}

@media (min-width: 1201px) {
  .pd-b--4--laptop.pd-b--4--laptop {
    padding-bottom: var(--spacing-4);
  }
}

@media (min-width: 1201px) {
  .pd-b--5--laptop.pd-b--5--laptop {
    padding-bottom: var(--spacing-5);
  }
}

@media (min-width: 1201px) {
  .pd-b--6--laptop.pd-b--6--laptop {
    padding-bottom: var(--spacing-6);
  }
}

@media (min-width: 1201px) {
  .pd-b--7--laptop.pd-b--7--laptop {
    padding-bottom: var(--spacing-7);
  }
}

@media (min-width: 1201px) {
  .pd-b--8--laptop.pd-b--8--laptop {
    padding-bottom: var(--spacing-8);
  }
}

@media (min-width: 1201px) {
  .pd-b--9--laptop.pd-b--9--laptop {
    padding-bottom: var(--spacing-9);
  }
}

@media (min-width: 1201px) {
  .pd-b--10--laptop.pd-b--10--laptop {
    padding-bottom: var(--spacing-10);
  }
}

@media (min-width: 1201px) {
  .pd-b--11--laptop.pd-b--11--laptop {
    padding-bottom: var(--spacing-11);
  }
}

@media (min-width: 1201px) {
  .pd-b--12--laptop.pd-b--12--laptop {
    padding-bottom: var(--spacing-12);
  }
}

@media (min-width: 1201px) {
  .pd-b--14--laptop.pd-b--14--laptop {
    padding-bottom: var(--spacing-14);
  }
}

@media (min-width: 1201px) {
  .pd-b--16--laptop.pd-b--16--laptop {
    padding-bottom: var(--spacing-16);
  }
}

@media (min-width: 1201px) {
  .pd-b--20--laptop.pd-b--20--laptop {
    padding-bottom: var(--spacing-20);
  }
}

@media (min-width: 1201px) {
  .pd-b--24--laptop.pd-b--24--laptop {
    padding-bottom: var(--spacing-24);
  }
}

@media (min-width: 1201px) {
  .pd-l--laptop.pd-l--laptop {
    padding-left: var(--spacing-1);
  }
}

@media (min-width: 1201px) {
  .pd-l--0--laptop.pd-l--0--laptop {
    padding-left: var(--spacing-0);
  }
}

@media (min-width: 1201px) {
  .pd-l--1--laptop.pd-l--1--laptop {
    padding-left: var(--spacing-1);
  }
}

@media (min-width: 1201px) {
  .pd-l--2--laptop.pd-l--2--laptop {
    padding-left: var(--spacing-2);
  }
}

@media (min-width: 1201px) {
  .pd-l--3--laptop.pd-l--3--laptop {
    padding-left: var(--spacing-3);
  }
}

@media (min-width: 1201px) {
  .pd-l--4--laptop.pd-l--4--laptop {
    padding-left: var(--spacing-4);
  }
}

@media (min-width: 1201px) {
  .pd-l--5--laptop.pd-l--5--laptop {
    padding-left: var(--spacing-5);
  }
}

@media (min-width: 1201px) {
  .pd-l--6--laptop.pd-l--6--laptop {
    padding-left: var(--spacing-6);
  }
}

@media (min-width: 1201px) {
  .pd-l--7--laptop.pd-l--7--laptop {
    padding-left: var(--spacing-7);
  }
}

@media (min-width: 1201px) {
  .pd-l--8--laptop.pd-l--8--laptop {
    padding-left: var(--spacing-8);
  }
}

@media (min-width: 1201px) {
  .pd-l--9--laptop.pd-l--9--laptop {
    padding-left: var(--spacing-9);
  }
}

@media (min-width: 1201px) {
  .pd-l--10--laptop.pd-l--10--laptop {
    padding-left: var(--spacing-10);
  }
}

@media (min-width: 1201px) {
  .pd-l--11--laptop.pd-l--11--laptop {
    padding-left: var(--spacing-11);
  }
}

@media (min-width: 1201px) {
  .pd-l--12--laptop.pd-l--12--laptop {
    padding-left: var(--spacing-12);
  }
}

@media (min-width: 1201px) {
  .pd-l--14--laptop.pd-l--14--laptop {
    padding-left: var(--spacing-14);
  }
}

@media (min-width: 1201px) {
  .pd-l--16--laptop.pd-l--16--laptop {
    padding-left: var(--spacing-16);
  }
}

@media (min-width: 1201px) {
  .pd-l--20--laptop.pd-l--20--laptop {
    padding-left: var(--spacing-20);
  }
}

@media (min-width: 1201px) {
  .pd-l--24--laptop.pd-l--24--laptop {
    padding-left: var(--spacing-24);
  }
}

@media (min-width: 1201px) {
  .pd-r--laptop.pd-r--laptop {
    padding-right: var(--spacing-1);
  }
}

@media (min-width: 1201px) {
  .pd-r--0--laptop.pd-r--0--laptop {
    padding-right: var(--spacing-0);
  }
}

@media (min-width: 1201px) {
  .pd-r--1--laptop.pd-r--1--laptop {
    padding-right: var(--spacing-1);
  }
}

@media (min-width: 1201px) {
  .pd-r--2--laptop.pd-r--2--laptop {
    padding-right: var(--spacing-2);
  }
}

@media (min-width: 1201px) {
  .pd-r--3--laptop.pd-r--3--laptop {
    padding-right: var(--spacing-3);
  }
}

@media (min-width: 1201px) {
  .pd-r--4--laptop.pd-r--4--laptop {
    padding-right: var(--spacing-4);
  }
}

@media (min-width: 1201px) {
  .pd-r--5--laptop.pd-r--5--laptop {
    padding-right: var(--spacing-5);
  }
}

@media (min-width: 1201px) {
  .pd-r--6--laptop.pd-r--6--laptop {
    padding-right: var(--spacing-6);
  }
}

@media (min-width: 1201px) {
  .pd-r--7--laptop.pd-r--7--laptop {
    padding-right: var(--spacing-7);
  }
}

@media (min-width: 1201px) {
  .pd-r--8--laptop.pd-r--8--laptop {
    padding-right: var(--spacing-8);
  }
}

@media (min-width: 1201px) {
  .pd-r--9--laptop.pd-r--9--laptop {
    padding-right: var(--spacing-9);
  }
}

@media (min-width: 1201px) {
  .pd-r--10--laptop.pd-r--10--laptop {
    padding-right: var(--spacing-10);
  }
}

@media (min-width: 1201px) {
  .pd-r--11--laptop.pd-r--11--laptop {
    padding-right: var(--spacing-11);
  }
}

@media (min-width: 1201px) {
  .pd-r--12--laptop.pd-r--12--laptop {
    padding-right: var(--spacing-12);
  }
}

@media (min-width: 1201px) {
  .pd-r--14--laptop.pd-r--14--laptop {
    padding-right: var(--spacing-14);
  }
}

@media (min-width: 1201px) {
  .pd-r--16--laptop.pd-r--16--laptop {
    padding-right: var(--spacing-16);
  }
}

@media (min-width: 1201px) {
  .pd-r--20--laptop.pd-r--20--laptop {
    padding-right: var(--spacing-20);
  }
}

@media (min-width: 1201px) {
  .pd-r--24--laptop.pd-r--24--laptop {
    padding-right: var(--spacing-24);
  }
}

@media (min-width: 1201px) {
  .pd-x--laptop.pd-x--laptop {
    padding-left: var(--spacing-1);
    padding-right: var(--spacing-1);
  }
}

@media (min-width: 1201px) {
  .pd-x--0--laptop.pd-x--0--laptop {
    padding-left: var(--spacing-0);
    padding-right: var(--spacing-0);
  }
}

@media (min-width: 1201px) {
  .pd-x--1--laptop.pd-x--1--laptop {
    padding-left: var(--spacing-1);
    padding-right: var(--spacing-1);
  }
}

@media (min-width: 1201px) {
  .pd-x--2--laptop.pd-x--2--laptop {
    padding-left: var(--spacing-2);
    padding-right: var(--spacing-2);
  }
}

@media (min-width: 1201px) {
  .pd-x--3--laptop.pd-x--3--laptop {
    padding-left: var(--spacing-3);
    padding-right: var(--spacing-3);
  }
}

@media (min-width: 1201px) {
  .pd-x--4--laptop.pd-x--4--laptop {
    padding-left: var(--spacing-4);
    padding-right: var(--spacing-4);
  }
}

@media (min-width: 1201px) {
  .pd-x--5--laptop.pd-x--5--laptop {
    padding-left: var(--spacing-5);
    padding-right: var(--spacing-5);
  }
}

@media (min-width: 1201px) {
  .pd-x--6--laptop.pd-x--6--laptop {
    padding-left: var(--spacing-6);
    padding-right: var(--spacing-6);
  }
}

@media (min-width: 1201px) {
  .pd-x--7--laptop.pd-x--7--laptop {
    padding-left: var(--spacing-7);
    padding-right: var(--spacing-7);
  }
}

@media (min-width: 1201px) {
  .pd-x--8--laptop.pd-x--8--laptop {
    padding-left: var(--spacing-8);
    padding-right: var(--spacing-8);
  }
}

@media (min-width: 1201px) {
  .pd-x--9--laptop.pd-x--9--laptop {
    padding-left: var(--spacing-9);
    padding-right: var(--spacing-9);
  }
}

@media (min-width: 1201px) {
  .pd-x--10--laptop.pd-x--10--laptop {
    padding-left: var(--spacing-10);
    padding-right: var(--spacing-10);
  }
}

@media (min-width: 1201px) {
  .pd-x--11--laptop.pd-x--11--laptop {
    padding-left: var(--spacing-11);
    padding-right: var(--spacing-11);
  }
}

@media (min-width: 1201px) {
  .pd-x--12--laptop.pd-x--12--laptop {
    padding-left: var(--spacing-12);
    padding-right: var(--spacing-12);
  }
}

@media (min-width: 1201px) {
  .pd-x--14--laptop.pd-x--14--laptop {
    padding-left: var(--spacing-14);
    padding-right: var(--spacing-14);
  }
}

@media (min-width: 1201px) {
  .pd-x--16--laptop.pd-x--16--laptop {
    padding-left: var(--spacing-16);
    padding-right: var(--spacing-16);
  }
}

@media (min-width: 1201px) {
  .pd-x--20--laptop.pd-x--20--laptop {
    padding-left: var(--spacing-20);
    padding-right: var(--spacing-20);
  }
}

@media (min-width: 1201px) {
  .pd-x--24--laptop.pd-x--24--laptop {
    padding-left: var(--spacing-24);
    padding-right: var(--spacing-24);
  }
}

@media (min-width: 1201px) {
  .pd-y--laptop.pd-y--laptop {
    padding-top: var(--spacing-1);
    padding-bottom: var(--spacing-1);
  }
}

@media (min-width: 1201px) {
  .pd-y--0--laptop.pd-y--0--laptop {
    padding-top: var(--spacing-0);
    padding-bottom: var(--spacing-0);
  }
}

@media (min-width: 1201px) {
  .pd-y--1--laptop.pd-y--1--laptop {
    padding-top: var(--spacing-1);
    padding-bottom: var(--spacing-1);
  }
}

@media (min-width: 1201px) {
  .pd-y--2--laptop.pd-y--2--laptop {
    padding-top: var(--spacing-2);
    padding-bottom: var(--spacing-2);
  }
}

@media (min-width: 1201px) {
  .pd-y--3--laptop.pd-y--3--laptop {
    padding-top: var(--spacing-3);
    padding-bottom: var(--spacing-3);
  }
}

@media (min-width: 1201px) {
  .pd-y--4--laptop.pd-y--4--laptop {
    padding-top: var(--spacing-4);
    padding-bottom: var(--spacing-4);
  }
}

@media (min-width: 1201px) {
  .pd-y--5--laptop.pd-y--5--laptop {
    padding-top: var(--spacing-5);
    padding-bottom: var(--spacing-5);
  }
}

@media (min-width: 1201px) {
  .pd-y--6--laptop.pd-y--6--laptop {
    padding-top: var(--spacing-6);
    padding-bottom: var(--spacing-6);
  }
}

@media (min-width: 1201px) {
  .pd-y--7--laptop.pd-y--7--laptop {
    padding-top: var(--spacing-7);
    padding-bottom: var(--spacing-7);
  }
}

@media (min-width: 1201px) {
  .pd-y--8--laptop.pd-y--8--laptop {
    padding-top: var(--spacing-8);
    padding-bottom: var(--spacing-8);
  }
}

@media (min-width: 1201px) {
  .pd-y--9--laptop.pd-y--9--laptop {
    padding-top: var(--spacing-9);
    padding-bottom: var(--spacing-9);
  }
}

@media (min-width: 1201px) {
  .pd-y--10--laptop.pd-y--10--laptop {
    padding-top: var(--spacing-10);
    padding-bottom: var(--spacing-10);
  }
}

@media (min-width: 1201px) {
  .pd-y--11--laptop.pd-y--11--laptop {
    padding-top: var(--spacing-11);
    padding-bottom: var(--spacing-11);
  }
}

@media (min-width: 1201px) {
  .pd-y--12--laptop.pd-y--12--laptop {
    padding-top: var(--spacing-12);
    padding-bottom: var(--spacing-12);
  }
}

@media (min-width: 1201px) {
  .pd-y--14--laptop.pd-y--14--laptop {
    padding-top: var(--spacing-14);
    padding-bottom: var(--spacing-14);
  }
}

@media (min-width: 1201px) {
  .pd-y--16--laptop.pd-y--16--laptop {
    padding-top: var(--spacing-16);
    padding-bottom: var(--spacing-16);
  }
}

@media (min-width: 1201px) {
  .pd-y--20--laptop.pd-y--20--laptop {
    padding-top: var(--spacing-20);
    padding-bottom: var(--spacing-20);
  }
}

@media (min-width: 1201px) {
  .pd-y--24--laptop.pd-y--24--laptop {
    padding-top: var(--spacing-24);
    padding-bottom: var(--spacing-24);
  }
}

/* ===================================
  Margin
  =================================== */
.mg {
  margin-top: var(--spacing-1);
  margin-bottom: var(--spacing-1);
  margin-left: var(--spacing-1);
  margin-right: var(--spacing-1);
}

.mg--0 {
  margin-top: var(--spacing-0);
  margin-bottom: var(--spacing-0);
  margin-left: var(--spacing-0);
  margin-right: var(--spacing-0);
}

.mg--1 {
  margin-top: var(--spacing-1);
  margin-bottom: var(--spacing-1);
  margin-left: var(--spacing-1);
  margin-right: var(--spacing-1);
}

.mg--2 {
  margin-top: var(--spacing-2);
  margin-bottom: var(--spacing-2);
  margin-left: var(--spacing-2);
  margin-right: var(--spacing-2);
}

.mg--3 {
  margin-top: var(--spacing-3);
  margin-bottom: var(--spacing-3);
  margin-left: var(--spacing-3);
  margin-right: var(--spacing-3);
}

.mg--4 {
  margin-top: var(--spacing-4);
  margin-bottom: var(--spacing-4);
  margin-left: var(--spacing-4);
  margin-right: var(--spacing-4);
}

.mg--5 {
  margin-top: var(--spacing-5);
  margin-bottom: var(--spacing-5);
  margin-left: var(--spacing-5);
  margin-right: var(--spacing-5);
}

.mg--6 {
  margin-top: var(--spacing-6);
  margin-bottom: var(--spacing-6);
  margin-left: var(--spacing-6);
  margin-right: var(--spacing-6);
}

.mg--7 {
  margin-top: var(--spacing-7);
  margin-bottom: var(--spacing-7);
  margin-left: var(--spacing-7);
  margin-right: var(--spacing-7);
}

.mg--8 {
  margin-top: var(--spacing-8);
  margin-bottom: var(--spacing-8);
  margin-left: var(--spacing-8);
  margin-right: var(--spacing-8);
}

.mg--9 {
  margin-top: var(--spacing-9);
  margin-bottom: var(--spacing-9);
  margin-left: var(--spacing-9);
  margin-right: var(--spacing-9);
}

.mg--10 {
  margin-top: var(--spacing-10);
  margin-bottom: var(--spacing-10);
  margin-left: var(--spacing-10);
  margin-right: var(--spacing-10);
}

.mg--11 {
  margin-top: var(--spacing-11);
  margin-bottom: var(--spacing-11);
  margin-left: var(--spacing-11);
  margin-right: var(--spacing-11);
}

.mg--12 {
  margin-top: var(--spacing-12);
  margin-bottom: var(--spacing-12);
  margin-left: var(--spacing-12);
  margin-right: var(--spacing-12);
}

.mg--14 {
  margin-top: var(--spacing-14);
  margin-bottom: var(--spacing-14);
  margin-left: var(--spacing-14);
  margin-right: var(--spacing-14);
}

.mg--16 {
  margin-top: var(--spacing-16);
  margin-bottom: var(--spacing-16);
  margin-left: var(--spacing-16);
  margin-right: var(--spacing-16);
}

.mg--20 {
  margin-top: var(--spacing-20);
  margin-bottom: var(--spacing-20);
  margin-left: var(--spacing-20);
  margin-right: var(--spacing-20);
}

.mg--24 {
  margin-top: var(--spacing-24);
  margin-bottom: var(--spacing-24);
  margin-left: var(--spacing-24);
  margin-right: var(--spacing-24);
}

.mg-t {
  margin-top: var(--spacing-1);
}

.mg-t--0 {
  margin-top: var(--spacing-0);
}

.mg-t--1 {
  margin-top: var(--spacing-1);
}

.mg-t--2 {
  margin-top: var(--spacing-2);
}

.mg-t--3 {
  margin-top: var(--spacing-3);
}

.mg-t--4 {
  margin-top: var(--spacing-4);
}

.mg-t--5 {
  margin-top: var(--spacing-5);
}

.mg-t--6 {
  margin-top: var(--spacing-6);
}

.mg-t--7 {
  margin-top: var(--spacing-7);
}

.mg-t--8 {
  margin-top: var(--spacing-8);
}

.mg-t--9 {
  margin-top: var(--spacing-9);
}

.mg-t--10 {
  margin-top: var(--spacing-10);
}

.mg-t--11 {
  margin-top: var(--spacing-11);
}

.mg-t--12 {
  margin-top: var(--spacing-12);
}

.mg-t--14 {
  margin-top: var(--spacing-14);
}

.mg-t--16 {
  margin-top: var(--spacing-16);
}

.mg-t--20 {
  margin-top: var(--spacing-20);
}

.mg-t--24 {
  margin-top: var(--spacing-24);
}

.mg-b {
  margin-bottom: var(--spacing-1);
}

.mg-b--0 {
  margin-bottom: var(--spacing-0);
}

.mg-b--1 {
  margin-bottom: var(--spacing-1);
}

.mg-b--2 {
  margin-bottom: var(--spacing-2);
}

.mg-b--3 {
  margin-bottom: var(--spacing-3);
}

.mg-b--4 {
  margin-bottom: var(--spacing-4);
}

.mg-b--5 {
  margin-bottom: var(--spacing-5);
}

.mg-b--6 {
  margin-bottom: var(--spacing-6);
}

.mg-b--7 {
  margin-bottom: var(--spacing-7);
}

.mg-b--8 {
  margin-bottom: var(--spacing-8);
}

.mg-b--9 {
  margin-bottom: var(--spacing-9);
}

.mg-b--10 {
  margin-bottom: var(--spacing-10);
}

.mg-b--11 {
  margin-bottom: var(--spacing-11);
}

.mg-b--12 {
  margin-bottom: var(--spacing-12);
}

.mg-b--14 {
  margin-bottom: var(--spacing-14);
}

.mg-b--16 {
  margin-bottom: var(--spacing-16);
}

.mg-b--20 {
  margin-bottom: var(--spacing-20);
}

.mg-b--24 {
  margin-bottom: var(--spacing-24);
}

.mg-l {
  margin-left: var(--spacing-1);
}

.mg-l--0 {
  margin-left: var(--spacing-0);
}

.mg-l--1 {
  margin-left: var(--spacing-1);
}

.mg-l--2 {
  margin-left: var(--spacing-2);
}

.mg-l--3 {
  margin-left: var(--spacing-3);
}

.mg-l--4 {
  margin-left: var(--spacing-4);
}

.mg-l--5 {
  margin-left: var(--spacing-5);
}

.mg-l--6 {
  margin-left: var(--spacing-6);
}

.mg-l--7 {
  margin-left: var(--spacing-7);
}

.mg-l--8 {
  margin-left: var(--spacing-8);
}

.mg-l--9 {
  margin-left: var(--spacing-9);
}

.mg-l--10 {
  margin-left: var(--spacing-10);
}

.mg-l--11 {
  margin-left: var(--spacing-11);
}

.mg-l--12 {
  margin-left: var(--spacing-12);
}

.mg-l--14 {
  margin-left: var(--spacing-14);
}

.mg-l--16 {
  margin-left: var(--spacing-16);
}

.mg-l--20 {
  margin-left: var(--spacing-20);
}

.mg-l--24 {
  margin-left: var(--spacing-24);
}

.mg-r {
  margin-right: var(--spacing-1);
}

.mg-r--0 {
  margin-right: var(--spacing-0);
}

.mg-r--1 {
  margin-right: var(--spacing-1);
}

.mg-r--2 {
  margin-right: var(--spacing-2);
}

.mg-r--3 {
  margin-right: var(--spacing-3);
}

.mg-r--4 {
  margin-right: var(--spacing-4);
}

.mg-r--5 {
  margin-right: var(--spacing-5);
}

.mg-r--6 {
  margin-right: var(--spacing-6);
}

.mg-r--7 {
  margin-right: var(--spacing-7);
}

.mg-r--8 {
  margin-right: var(--spacing-8);
}

.mg-r--9 {
  margin-right: var(--spacing-9);
}

.mg-r--10 {
  margin-right: var(--spacing-10);
}

.mg-r--11 {
  margin-right: var(--spacing-11);
}

.mg-r--12 {
  margin-right: var(--spacing-12);
}

.mg-r--14 {
  margin-right: var(--spacing-14);
}

.mg-r--16 {
  margin-right: var(--spacing-16);
}

.mg-r--20 {
  margin-right: var(--spacing-20);
}

.mg-r--24 {
  margin-right: var(--spacing-24);
}

.mg-x {
  margin-left: var(--spacing-1);
  margin-right: var(--spacing-1);
}

.mg-x--0 {
  margin-left: var(--spacing-0);
  margin-right: var(--spacing-0);
}

.mg-x--1 {
  margin-left: var(--spacing-1);
  margin-right: var(--spacing-1);
}

.mg-x--2 {
  margin-left: var(--spacing-2);
  margin-right: var(--spacing-2);
}

.mg-x--3 {
  margin-left: var(--spacing-3);
  margin-right: var(--spacing-3);
}

.mg-x--4 {
  margin-left: var(--spacing-4);
  margin-right: var(--spacing-4);
}

.mg-x--5 {
  margin-left: var(--spacing-5);
  margin-right: var(--spacing-5);
}

.mg-x--6 {
  margin-left: var(--spacing-6);
  margin-right: var(--spacing-6);
}

.mg-x--7 {
  margin-left: var(--spacing-7);
  margin-right: var(--spacing-7);
}

.mg-x--8 {
  margin-left: var(--spacing-8);
  margin-right: var(--spacing-8);
}

.mg-x--9 {
  margin-left: var(--spacing-9);
  margin-right: var(--spacing-9);
}

.mg-x--10 {
  margin-left: var(--spacing-10);
  margin-right: var(--spacing-10);
}

.mg-x--11 {
  margin-left: var(--spacing-11);
  margin-right: var(--spacing-11);
}

.mg-x--12 {
  margin-left: var(--spacing-12);
  margin-right: var(--spacing-12);
}

.mg-x--14 {
  margin-left: var(--spacing-14);
  margin-right: var(--spacing-14);
}

.mg-x--16 {
  margin-left: var(--spacing-16);
  margin-right: var(--spacing-16);
}

.mg-x--20 {
  margin-left: var(--spacing-20);
  margin-right: var(--spacing-20);
}

.mg-x--24 {
  margin-left: var(--spacing-24);
  margin-right: var(--spacing-24);
}

.mg-y {
  margin-top: var(--spacing-1);
  margin-bottom: var(--spacing-1);
}

.mg-y--0 {
  margin-top: var(--spacing-0);
  margin-bottom: var(--spacing-0);
}

.mg-y--1 {
  margin-top: var(--spacing-1);
  margin-bottom: var(--spacing-1);
}

.mg-y--2 {
  margin-top: var(--spacing-2);
  margin-bottom: var(--spacing-2);
}

.mg-y--3 {
  margin-top: var(--spacing-3);
  margin-bottom: var(--spacing-3);
}

.mg-y--4 {
  margin-top: var(--spacing-4);
  margin-bottom: var(--spacing-4);
}

.mg-y--5 {
  margin-top: var(--spacing-5);
  margin-bottom: var(--spacing-5);
}

.mg-y--6 {
  margin-top: var(--spacing-6);
  margin-bottom: var(--spacing-6);
}

.mg-y--7 {
  margin-top: var(--spacing-7);
  margin-bottom: var(--spacing-7);
}

.mg-y--8 {
  margin-top: var(--spacing-8);
  margin-bottom: var(--spacing-8);
}

.mg-y--9 {
  margin-top: var(--spacing-9);
  margin-bottom: var(--spacing-9);
}

.mg-y--10 {
  margin-top: var(--spacing-10);
  margin-bottom: var(--spacing-10);
}

.mg-y--11 {
  margin-top: var(--spacing-11);
  margin-bottom: var(--spacing-11);
}

.mg-y--12 {
  margin-top: var(--spacing-12);
  margin-bottom: var(--spacing-12);
}

.mg-y--14 {
  margin-top: var(--spacing-14);
  margin-bottom: var(--spacing-14);
}

.mg-y--16 {
  margin-top: var(--spacing-16);
  margin-bottom: var(--spacing-16);
}

.mg-y--20 {
  margin-top: var(--spacing-20);
  margin-bottom: var(--spacing-20);
}

.mg-y--24 {
  margin-top: var(--spacing-24);
  margin-bottom: var(--spacing-24);
}

@media (max-width: 640px) {
  .mg--mobile.mg--mobile {
    margin-top: var(--spacing-1);
    margin-bottom: var(--spacing-1);
    margin-left: var(--spacing-1);
    margin-right: var(--spacing-1);
  }
}

@media (max-width: 640px) {
  .mg--0--mobile.mg--0--mobile {
    margin-top: var(--spacing-0);
    margin-bottom: var(--spacing-0);
    margin-left: var(--spacing-0);
    margin-right: var(--spacing-0);
  }
}

@media (max-width: 640px) {
  .mg--1--mobile.mg--1--mobile {
    margin-top: var(--spacing-1);
    margin-bottom: var(--spacing-1);
    margin-left: var(--spacing-1);
    margin-right: var(--spacing-1);
  }
}

@media (max-width: 640px) {
  .mg--2--mobile.mg--2--mobile {
    margin-top: var(--spacing-2);
    margin-bottom: var(--spacing-2);
    margin-left: var(--spacing-2);
    margin-right: var(--spacing-2);
  }
}

@media (max-width: 640px) {
  .mg--3--mobile.mg--3--mobile {
    margin-top: var(--spacing-3);
    margin-bottom: var(--spacing-3);
    margin-left: var(--spacing-3);
    margin-right: var(--spacing-3);
  }
}

@media (max-width: 640px) {
  .mg--4--mobile.mg--4--mobile {
    margin-top: var(--spacing-4);
    margin-bottom: var(--spacing-4);
    margin-left: var(--spacing-4);
    margin-right: var(--spacing-4);
  }
}

@media (max-width: 640px) {
  .mg--5--mobile.mg--5--mobile {
    margin-top: var(--spacing-5);
    margin-bottom: var(--spacing-5);
    margin-left: var(--spacing-5);
    margin-right: var(--spacing-5);
  }
}

@media (max-width: 640px) {
  .mg--6--mobile.mg--6--mobile {
    margin-top: var(--spacing-6);
    margin-bottom: var(--spacing-6);
    margin-left: var(--spacing-6);
    margin-right: var(--spacing-6);
  }
}

@media (max-width: 640px) {
  .mg--7--mobile.mg--7--mobile {
    margin-top: var(--spacing-7);
    margin-bottom: var(--spacing-7);
    margin-left: var(--spacing-7);
    margin-right: var(--spacing-7);
  }
}

@media (max-width: 640px) {
  .mg--8--mobile.mg--8--mobile {
    margin-top: var(--spacing-8);
    margin-bottom: var(--spacing-8);
    margin-left: var(--spacing-8);
    margin-right: var(--spacing-8);
  }
}

@media (max-width: 640px) {
  .mg--9--mobile.mg--9--mobile {
    margin-top: var(--spacing-9);
    margin-bottom: var(--spacing-9);
    margin-left: var(--spacing-9);
    margin-right: var(--spacing-9);
  }
}

@media (max-width: 640px) {
  .mg--10--mobile.mg--10--mobile {
    margin-top: var(--spacing-10);
    margin-bottom: var(--spacing-10);
    margin-left: var(--spacing-10);
    margin-right: var(--spacing-10);
  }
}

@media (max-width: 640px) {
  .mg--11--mobile.mg--11--mobile {
    margin-top: var(--spacing-11);
    margin-bottom: var(--spacing-11);
    margin-left: var(--spacing-11);
    margin-right: var(--spacing-11);
  }
}

@media (max-width: 640px) {
  .mg--12--mobile.mg--12--mobile {
    margin-top: var(--spacing-12);
    margin-bottom: var(--spacing-12);
    margin-left: var(--spacing-12);
    margin-right: var(--spacing-12);
  }
}

@media (max-width: 640px) {
  .mg--14--mobile.mg--14--mobile {
    margin-top: var(--spacing-14);
    margin-bottom: var(--spacing-14);
    margin-left: var(--spacing-14);
    margin-right: var(--spacing-14);
  }
}

@media (max-width: 640px) {
  .mg--16--mobile.mg--16--mobile {
    margin-top: var(--spacing-16);
    margin-bottom: var(--spacing-16);
    margin-left: var(--spacing-16);
    margin-right: var(--spacing-16);
  }
}

@media (max-width: 640px) {
  .mg--20--mobile.mg--20--mobile {
    margin-top: var(--spacing-20);
    margin-bottom: var(--spacing-20);
    margin-left: var(--spacing-20);
    margin-right: var(--spacing-20);
  }
}

@media (max-width: 640px) {
  .mg--24--mobile.mg--24--mobile {
    margin-top: var(--spacing-24);
    margin-bottom: var(--spacing-24);
    margin-left: var(--spacing-24);
    margin-right: var(--spacing-24);
  }
}

@media (max-width: 640px) {
  .mg-t--mobile.mg-t--mobile {
    margin-top: var(--spacing-1);
  }
}

@media (max-width: 640px) {
  .mg-t--0--mobile.mg-t--0--mobile {
    margin-top: var(--spacing-0);
  }
}

@media (max-width: 640px) {
  .mg-t--1--mobile.mg-t--1--mobile {
    margin-top: var(--spacing-1);
  }
}

@media (max-width: 640px) {
  .mg-t--2--mobile.mg-t--2--mobile {
    margin-top: var(--spacing-2);
  }
}

@media (max-width: 640px) {
  .mg-t--3--mobile.mg-t--3--mobile {
    margin-top: var(--spacing-3);
  }
}

@media (max-width: 640px) {
  .mg-t--4--mobile.mg-t--4--mobile {
    margin-top: var(--spacing-4);
  }
}

@media (max-width: 640px) {
  .mg-t--5--mobile.mg-t--5--mobile {
    margin-top: var(--spacing-5);
  }
}

@media (max-width: 640px) {
  .mg-t--6--mobile.mg-t--6--mobile {
    margin-top: var(--spacing-6);
  }
}

@media (max-width: 640px) {
  .mg-t--7--mobile.mg-t--7--mobile {
    margin-top: var(--spacing-7);
  }
}

@media (max-width: 640px) {
  .mg-t--8--mobile.mg-t--8--mobile {
    margin-top: var(--spacing-8);
  }
}

@media (max-width: 640px) {
  .mg-t--9--mobile.mg-t--9--mobile {
    margin-top: var(--spacing-9);
  }
}

@media (max-width: 640px) {
  .mg-t--10--mobile.mg-t--10--mobile {
    margin-top: var(--spacing-10);
  }
}

@media (max-width: 640px) {
  .mg-t--11--mobile.mg-t--11--mobile {
    margin-top: var(--spacing-11);
  }
}

@media (max-width: 640px) {
  .mg-t--12--mobile.mg-t--12--mobile {
    margin-top: var(--spacing-12);
  }
}

@media (max-width: 640px) {
  .mg-t--14--mobile.mg-t--14--mobile {
    margin-top: var(--spacing-14);
  }
}

@media (max-width: 640px) {
  .mg-t--16--mobile.mg-t--16--mobile {
    margin-top: var(--spacing-16);
  }
}

@media (max-width: 640px) {
  .mg-t--20--mobile.mg-t--20--mobile {
    margin-top: var(--spacing-20);
  }
}

@media (max-width: 640px) {
  .mg-t--24--mobile.mg-t--24--mobile {
    margin-top: var(--spacing-24);
  }
}

@media (max-width: 640px) {
  .mg-b--mobile.mg-b--mobile {
    margin-bottom: var(--spacing-1);
  }
}

@media (max-width: 640px) {
  .mg-b--0--mobile.mg-b--0--mobile {
    margin-bottom: var(--spacing-0);
  }
}

@media (max-width: 640px) {
  .mg-b--1--mobile.mg-b--1--mobile {
    margin-bottom: var(--spacing-1);
  }
}

@media (max-width: 640px) {
  .mg-b--2--mobile.mg-b--2--mobile {
    margin-bottom: var(--spacing-2);
  }
}

@media (max-width: 640px) {
  .mg-b--3--mobile.mg-b--3--mobile {
    margin-bottom: var(--spacing-3);
  }
}

@media (max-width: 640px) {
  .mg-b--4--mobile.mg-b--4--mobile {
    margin-bottom: var(--spacing-4);
  }
}

@media (max-width: 640px) {
  .mg-b--5--mobile.mg-b--5--mobile {
    margin-bottom: var(--spacing-5);
  }
}

@media (max-width: 640px) {
  .mg-b--6--mobile.mg-b--6--mobile {
    margin-bottom: var(--spacing-6);
  }
}

@media (max-width: 640px) {
  .mg-b--7--mobile.mg-b--7--mobile {
    margin-bottom: var(--spacing-7);
  }
}

@media (max-width: 640px) {
  .mg-b--8--mobile.mg-b--8--mobile {
    margin-bottom: var(--spacing-8);
  }
}

@media (max-width: 640px) {
  .mg-b--9--mobile.mg-b--9--mobile {
    margin-bottom: var(--spacing-9);
  }
}

@media (max-width: 640px) {
  .mg-b--10--mobile.mg-b--10--mobile {
    margin-bottom: var(--spacing-10);
  }
}

@media (max-width: 640px) {
  .mg-b--11--mobile.mg-b--11--mobile {
    margin-bottom: var(--spacing-11);
  }
}

@media (max-width: 640px) {
  .mg-b--12--mobile.mg-b--12--mobile {
    margin-bottom: var(--spacing-12);
  }
}

@media (max-width: 640px) {
  .mg-b--14--mobile.mg-b--14--mobile {
    margin-bottom: var(--spacing-14);
  }
}

@media (max-width: 640px) {
  .mg-b--16--mobile.mg-b--16--mobile {
    margin-bottom: var(--spacing-16);
  }
}

@media (max-width: 640px) {
  .mg-b--20--mobile.mg-b--20--mobile {
    margin-bottom: var(--spacing-20);
  }
}

@media (max-width: 640px) {
  .mg-b--24--mobile.mg-b--24--mobile {
    margin-bottom: var(--spacing-24);
  }
}

@media (max-width: 640px) {
  .mg-l--mobile.mg-l--mobile {
    margin-left: var(--spacing-1);
  }
}

@media (max-width: 640px) {
  .mg-l--0--mobile.mg-l--0--mobile {
    margin-left: var(--spacing-0);
  }
}

@media (max-width: 640px) {
  .mg-l--1--mobile.mg-l--1--mobile {
    margin-left: var(--spacing-1);
  }
}

@media (max-width: 640px) {
  .mg-l--2--mobile.mg-l--2--mobile {
    margin-left: var(--spacing-2);
  }
}

@media (max-width: 640px) {
  .mg-l--3--mobile.mg-l--3--mobile {
    margin-left: var(--spacing-3);
  }
}

@media (max-width: 640px) {
  .mg-l--4--mobile.mg-l--4--mobile {
    margin-left: var(--spacing-4);
  }
}

@media (max-width: 640px) {
  .mg-l--5--mobile.mg-l--5--mobile {
    margin-left: var(--spacing-5);
  }
}

@media (max-width: 640px) {
  .mg-l--6--mobile.mg-l--6--mobile {
    margin-left: var(--spacing-6);
  }
}

@media (max-width: 640px) {
  .mg-l--7--mobile.mg-l--7--mobile {
    margin-left: var(--spacing-7);
  }
}

@media (max-width: 640px) {
  .mg-l--8--mobile.mg-l--8--mobile {
    margin-left: var(--spacing-8);
  }
}

@media (max-width: 640px) {
  .mg-l--9--mobile.mg-l--9--mobile {
    margin-left: var(--spacing-9);
  }
}

@media (max-width: 640px) {
  .mg-l--10--mobile.mg-l--10--mobile {
    margin-left: var(--spacing-10);
  }
}

@media (max-width: 640px) {
  .mg-l--11--mobile.mg-l--11--mobile {
    margin-left: var(--spacing-11);
  }
}

@media (max-width: 640px) {
  .mg-l--12--mobile.mg-l--12--mobile {
    margin-left: var(--spacing-12);
  }
}

@media (max-width: 640px) {
  .mg-l--14--mobile.mg-l--14--mobile {
    margin-left: var(--spacing-14);
  }
}

@media (max-width: 640px) {
  .mg-l--16--mobile.mg-l--16--mobile {
    margin-left: var(--spacing-16);
  }
}

@media (max-width: 640px) {
  .mg-l--20--mobile.mg-l--20--mobile {
    margin-left: var(--spacing-20);
  }
}

@media (max-width: 640px) {
  .mg-l--24--mobile.mg-l--24--mobile {
    margin-left: var(--spacing-24);
  }
}

@media (max-width: 640px) {
  .mg-r--mobile.mg-r--mobile {
    margin-right: var(--spacing-1);
  }
}

@media (max-width: 640px) {
  .mg-r--0--mobile.mg-r--0--mobile {
    margin-right: var(--spacing-0);
  }
}

@media (max-width: 640px) {
  .mg-r--1--mobile.mg-r--1--mobile {
    margin-right: var(--spacing-1);
  }
}

@media (max-width: 640px) {
  .mg-r--2--mobile.mg-r--2--mobile {
    margin-right: var(--spacing-2);
  }
}

@media (max-width: 640px) {
  .mg-r--3--mobile.mg-r--3--mobile {
    margin-right: var(--spacing-3);
  }
}

@media (max-width: 640px) {
  .mg-r--4--mobile.mg-r--4--mobile {
    margin-right: var(--spacing-4);
  }
}

@media (max-width: 640px) {
  .mg-r--5--mobile.mg-r--5--mobile {
    margin-right: var(--spacing-5);
  }
}

@media (max-width: 640px) {
  .mg-r--6--mobile.mg-r--6--mobile {
    margin-right: var(--spacing-6);
  }
}

@media (max-width: 640px) {
  .mg-r--7--mobile.mg-r--7--mobile {
    margin-right: var(--spacing-7);
  }
}

@media (max-width: 640px) {
  .mg-r--8--mobile.mg-r--8--mobile {
    margin-right: var(--spacing-8);
  }
}

@media (max-width: 640px) {
  .mg-r--9--mobile.mg-r--9--mobile {
    margin-right: var(--spacing-9);
  }
}

@media (max-width: 640px) {
  .mg-r--10--mobile.mg-r--10--mobile {
    margin-right: var(--spacing-10);
  }
}

@media (max-width: 640px) {
  .mg-r--11--mobile.mg-r--11--mobile {
    margin-right: var(--spacing-11);
  }
}

@media (max-width: 640px) {
  .mg-r--12--mobile.mg-r--12--mobile {
    margin-right: var(--spacing-12);
  }
}

@media (max-width: 640px) {
  .mg-r--14--mobile.mg-r--14--mobile {
    margin-right: var(--spacing-14);
  }
}

@media (max-width: 640px) {
  .mg-r--16--mobile.mg-r--16--mobile {
    margin-right: var(--spacing-16);
  }
}

@media (max-width: 640px) {
  .mg-r--20--mobile.mg-r--20--mobile {
    margin-right: var(--spacing-20);
  }
}

@media (max-width: 640px) {
  .mg-r--24--mobile.mg-r--24--mobile {
    margin-right: var(--spacing-24);
  }
}

@media (max-width: 640px) {
  .mg-x--mobile.mg-x--mobile {
    margin-left: var(--spacing-1);
    margin-right: var(--spacing-1);
  }
}

@media (max-width: 640px) {
  .mg-x--0--mobile.mg-x--0--mobile {
    margin-left: var(--spacing-0);
    margin-right: var(--spacing-0);
  }
}

@media (max-width: 640px) {
  .mg-x--1--mobile.mg-x--1--mobile {
    margin-left: var(--spacing-1);
    margin-right: var(--spacing-1);
  }
}

@media (max-width: 640px) {
  .mg-x--2--mobile.mg-x--2--mobile {
    margin-left: var(--spacing-2);
    margin-right: var(--spacing-2);
  }
}

@media (max-width: 640px) {
  .mg-x--3--mobile.mg-x--3--mobile {
    margin-left: var(--spacing-3);
    margin-right: var(--spacing-3);
  }
}

@media (max-width: 640px) {
  .mg-x--4--mobile.mg-x--4--mobile {
    margin-left: var(--spacing-4);
    margin-right: var(--spacing-4);
  }
}

@media (max-width: 640px) {
  .mg-x--5--mobile.mg-x--5--mobile {
    margin-left: var(--spacing-5);
    margin-right: var(--spacing-5);
  }
}

@media (max-width: 640px) {
  .mg-x--6--mobile.mg-x--6--mobile {
    margin-left: var(--spacing-6);
    margin-right: var(--spacing-6);
  }
}

@media (max-width: 640px) {
  .mg-x--7--mobile.mg-x--7--mobile {
    margin-left: var(--spacing-7);
    margin-right: var(--spacing-7);
  }
}

@media (max-width: 640px) {
  .mg-x--8--mobile.mg-x--8--mobile {
    margin-left: var(--spacing-8);
    margin-right: var(--spacing-8);
  }
}

@media (max-width: 640px) {
  .mg-x--9--mobile.mg-x--9--mobile {
    margin-left: var(--spacing-9);
    margin-right: var(--spacing-9);
  }
}

@media (max-width: 640px) {
  .mg-x--10--mobile.mg-x--10--mobile {
    margin-left: var(--spacing-10);
    margin-right: var(--spacing-10);
  }
}

@media (max-width: 640px) {
  .mg-x--11--mobile.mg-x--11--mobile {
    margin-left: var(--spacing-11);
    margin-right: var(--spacing-11);
  }
}

@media (max-width: 640px) {
  .mg-x--12--mobile.mg-x--12--mobile {
    margin-left: var(--spacing-12);
    margin-right: var(--spacing-12);
  }
}

@media (max-width: 640px) {
  .mg-x--14--mobile.mg-x--14--mobile {
    margin-left: var(--spacing-14);
    margin-right: var(--spacing-14);
  }
}

@media (max-width: 640px) {
  .mg-x--16--mobile.mg-x--16--mobile {
    margin-left: var(--spacing-16);
    margin-right: var(--spacing-16);
  }
}

@media (max-width: 640px) {
  .mg-x--20--mobile.mg-x--20--mobile {
    margin-left: var(--spacing-20);
    margin-right: var(--spacing-20);
  }
}

@media (max-width: 640px) {
  .mg-x--24--mobile.mg-x--24--mobile {
    margin-left: var(--spacing-24);
    margin-right: var(--spacing-24);
  }
}

@media (max-width: 640px) {
  .mg-y--mobile.mg-y--mobile {
    margin-top: var(--spacing-1);
    margin-bottom: var(--spacing-1);
  }
}

@media (max-width: 640px) {
  .mg-y--0--mobile.mg-y--0--mobile {
    margin-top: var(--spacing-0);
    margin-bottom: var(--spacing-0);
  }
}

@media (max-width: 640px) {
  .mg-y--1--mobile.mg-y--1--mobile {
    margin-top: var(--spacing-1);
    margin-bottom: var(--spacing-1);
  }
}

@media (max-width: 640px) {
  .mg-y--2--mobile.mg-y--2--mobile {
    margin-top: var(--spacing-2);
    margin-bottom: var(--spacing-2);
  }
}

@media (max-width: 640px) {
  .mg-y--3--mobile.mg-y--3--mobile {
    margin-top: var(--spacing-3);
    margin-bottom: var(--spacing-3);
  }
}

@media (max-width: 640px) {
  .mg-y--4--mobile.mg-y--4--mobile {
    margin-top: var(--spacing-4);
    margin-bottom: var(--spacing-4);
  }
}

@media (max-width: 640px) {
  .mg-y--5--mobile.mg-y--5--mobile {
    margin-top: var(--spacing-5);
    margin-bottom: var(--spacing-5);
  }
}

@media (max-width: 640px) {
  .mg-y--6--mobile.mg-y--6--mobile {
    margin-top: var(--spacing-6);
    margin-bottom: var(--spacing-6);
  }
}

@media (max-width: 640px) {
  .mg-y--7--mobile.mg-y--7--mobile {
    margin-top: var(--spacing-7);
    margin-bottom: var(--spacing-7);
  }
}

@media (max-width: 640px) {
  .mg-y--8--mobile.mg-y--8--mobile {
    margin-top: var(--spacing-8);
    margin-bottom: var(--spacing-8);
  }
}

@media (max-width: 640px) {
  .mg-y--9--mobile.mg-y--9--mobile {
    margin-top: var(--spacing-9);
    margin-bottom: var(--spacing-9);
  }
}

@media (max-width: 640px) {
  .mg-y--10--mobile.mg-y--10--mobile {
    margin-top: var(--spacing-10);
    margin-bottom: var(--spacing-10);
  }
}

@media (max-width: 640px) {
  .mg-y--11--mobile.mg-y--11--mobile {
    margin-top: var(--spacing-11);
    margin-bottom: var(--spacing-11);
  }
}

@media (max-width: 640px) {
  .mg-y--12--mobile.mg-y--12--mobile {
    margin-top: var(--spacing-12);
    margin-bottom: var(--spacing-12);
  }
}

@media (max-width: 640px) {
  .mg-y--14--mobile.mg-y--14--mobile {
    margin-top: var(--spacing-14);
    margin-bottom: var(--spacing-14);
  }
}

@media (max-width: 640px) {
  .mg-y--16--mobile.mg-y--16--mobile {
    margin-top: var(--spacing-16);
    margin-bottom: var(--spacing-16);
  }
}

@media (max-width: 640px) {
  .mg-y--20--mobile.mg-y--20--mobile {
    margin-top: var(--spacing-20);
    margin-bottom: var(--spacing-20);
  }
}

@media (max-width: 640px) {
  .mg-y--24--mobile.mg-y--24--mobile {
    margin-top: var(--spacing-24);
    margin-bottom: var(--spacing-24);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg--tablet.mg--tablet {
    margin-top: var(--spacing-1);
    margin-bottom: var(--spacing-1);
    margin-left: var(--spacing-1);
    margin-right: var(--spacing-1);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg--0--tablet.mg--0--tablet {
    margin-top: var(--spacing-0);
    margin-bottom: var(--spacing-0);
    margin-left: var(--spacing-0);
    margin-right: var(--spacing-0);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg--1--tablet.mg--1--tablet {
    margin-top: var(--spacing-1);
    margin-bottom: var(--spacing-1);
    margin-left: var(--spacing-1);
    margin-right: var(--spacing-1);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg--2--tablet.mg--2--tablet {
    margin-top: var(--spacing-2);
    margin-bottom: var(--spacing-2);
    margin-left: var(--spacing-2);
    margin-right: var(--spacing-2);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg--3--tablet.mg--3--tablet {
    margin-top: var(--spacing-3);
    margin-bottom: var(--spacing-3);
    margin-left: var(--spacing-3);
    margin-right: var(--spacing-3);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg--4--tablet.mg--4--tablet {
    margin-top: var(--spacing-4);
    margin-bottom: var(--spacing-4);
    margin-left: var(--spacing-4);
    margin-right: var(--spacing-4);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg--5--tablet.mg--5--tablet {
    margin-top: var(--spacing-5);
    margin-bottom: var(--spacing-5);
    margin-left: var(--spacing-5);
    margin-right: var(--spacing-5);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg--6--tablet.mg--6--tablet {
    margin-top: var(--spacing-6);
    margin-bottom: var(--spacing-6);
    margin-left: var(--spacing-6);
    margin-right: var(--spacing-6);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg--7--tablet.mg--7--tablet {
    margin-top: var(--spacing-7);
    margin-bottom: var(--spacing-7);
    margin-left: var(--spacing-7);
    margin-right: var(--spacing-7);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg--8--tablet.mg--8--tablet {
    margin-top: var(--spacing-8);
    margin-bottom: var(--spacing-8);
    margin-left: var(--spacing-8);
    margin-right: var(--spacing-8);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg--9--tablet.mg--9--tablet {
    margin-top: var(--spacing-9);
    margin-bottom: var(--spacing-9);
    margin-left: var(--spacing-9);
    margin-right: var(--spacing-9);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg--10--tablet.mg--10--tablet {
    margin-top: var(--spacing-10);
    margin-bottom: var(--spacing-10);
    margin-left: var(--spacing-10);
    margin-right: var(--spacing-10);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg--11--tablet.mg--11--tablet {
    margin-top: var(--spacing-11);
    margin-bottom: var(--spacing-11);
    margin-left: var(--spacing-11);
    margin-right: var(--spacing-11);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg--12--tablet.mg--12--tablet {
    margin-top: var(--spacing-12);
    margin-bottom: var(--spacing-12);
    margin-left: var(--spacing-12);
    margin-right: var(--spacing-12);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg--14--tablet.mg--14--tablet {
    margin-top: var(--spacing-14);
    margin-bottom: var(--spacing-14);
    margin-left: var(--spacing-14);
    margin-right: var(--spacing-14);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg--16--tablet.mg--16--tablet {
    margin-top: var(--spacing-16);
    margin-bottom: var(--spacing-16);
    margin-left: var(--spacing-16);
    margin-right: var(--spacing-16);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg--20--tablet.mg--20--tablet {
    margin-top: var(--spacing-20);
    margin-bottom: var(--spacing-20);
    margin-left: var(--spacing-20);
    margin-right: var(--spacing-20);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg--24--tablet.mg--24--tablet {
    margin-top: var(--spacing-24);
    margin-bottom: var(--spacing-24);
    margin-left: var(--spacing-24);
    margin-right: var(--spacing-24);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-t--tablet.mg-t--tablet {
    margin-top: var(--spacing-1);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-t--0--tablet.mg-t--0--tablet {
    margin-top: var(--spacing-0);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-t--1--tablet.mg-t--1--tablet {
    margin-top: var(--spacing-1);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-t--2--tablet.mg-t--2--tablet {
    margin-top: var(--spacing-2);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-t--3--tablet.mg-t--3--tablet {
    margin-top: var(--spacing-3);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-t--4--tablet.mg-t--4--tablet {
    margin-top: var(--spacing-4);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-t--5--tablet.mg-t--5--tablet {
    margin-top: var(--spacing-5);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-t--6--tablet.mg-t--6--tablet {
    margin-top: var(--spacing-6);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-t--7--tablet.mg-t--7--tablet {
    margin-top: var(--spacing-7);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-t--8--tablet.mg-t--8--tablet {
    margin-top: var(--spacing-8);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-t--9--tablet.mg-t--9--tablet {
    margin-top: var(--spacing-9);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-t--10--tablet.mg-t--10--tablet {
    margin-top: var(--spacing-10);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-t--11--tablet.mg-t--11--tablet {
    margin-top: var(--spacing-11);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-t--12--tablet.mg-t--12--tablet {
    margin-top: var(--spacing-12);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-t--14--tablet.mg-t--14--tablet {
    margin-top: var(--spacing-14);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-t--16--tablet.mg-t--16--tablet {
    margin-top: var(--spacing-16);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-t--20--tablet.mg-t--20--tablet {
    margin-top: var(--spacing-20);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-t--24--tablet.mg-t--24--tablet {
    margin-top: var(--spacing-24);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-b--tablet.mg-b--tablet {
    margin-bottom: var(--spacing-1);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-b--0--tablet.mg-b--0--tablet {
    margin-bottom: var(--spacing-0);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-b--1--tablet.mg-b--1--tablet {
    margin-bottom: var(--spacing-1);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-b--2--tablet.mg-b--2--tablet {
    margin-bottom: var(--spacing-2);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-b--3--tablet.mg-b--3--tablet {
    margin-bottom: var(--spacing-3);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-b--4--tablet.mg-b--4--tablet {
    margin-bottom: var(--spacing-4);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-b--5--tablet.mg-b--5--tablet {
    margin-bottom: var(--spacing-5);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-b--6--tablet.mg-b--6--tablet {
    margin-bottom: var(--spacing-6);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-b--7--tablet.mg-b--7--tablet {
    margin-bottom: var(--spacing-7);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-b--8--tablet.mg-b--8--tablet {
    margin-bottom: var(--spacing-8);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-b--9--tablet.mg-b--9--tablet {
    margin-bottom: var(--spacing-9);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-b--10--tablet.mg-b--10--tablet {
    margin-bottom: var(--spacing-10);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-b--11--tablet.mg-b--11--tablet {
    margin-bottom: var(--spacing-11);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-b--12--tablet.mg-b--12--tablet {
    margin-bottom: var(--spacing-12);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-b--14--tablet.mg-b--14--tablet {
    margin-bottom: var(--spacing-14);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-b--16--tablet.mg-b--16--tablet {
    margin-bottom: var(--spacing-16);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-b--20--tablet.mg-b--20--tablet {
    margin-bottom: var(--spacing-20);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-b--24--tablet.mg-b--24--tablet {
    margin-bottom: var(--spacing-24);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-l--tablet.mg-l--tablet {
    margin-left: var(--spacing-1);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-l--0--tablet.mg-l--0--tablet {
    margin-left: var(--spacing-0);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-l--1--tablet.mg-l--1--tablet {
    margin-left: var(--spacing-1);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-l--2--tablet.mg-l--2--tablet {
    margin-left: var(--spacing-2);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-l--3--tablet.mg-l--3--tablet {
    margin-left: var(--spacing-3);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-l--4--tablet.mg-l--4--tablet {
    margin-left: var(--spacing-4);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-l--5--tablet.mg-l--5--tablet {
    margin-left: var(--spacing-5);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-l--6--tablet.mg-l--6--tablet {
    margin-left: var(--spacing-6);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-l--7--tablet.mg-l--7--tablet {
    margin-left: var(--spacing-7);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-l--8--tablet.mg-l--8--tablet {
    margin-left: var(--spacing-8);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-l--9--tablet.mg-l--9--tablet {
    margin-left: var(--spacing-9);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-l--10--tablet.mg-l--10--tablet {
    margin-left: var(--spacing-10);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-l--11--tablet.mg-l--11--tablet {
    margin-left: var(--spacing-11);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-l--12--tablet.mg-l--12--tablet {
    margin-left: var(--spacing-12);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-l--14--tablet.mg-l--14--tablet {
    margin-left: var(--spacing-14);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-l--16--tablet.mg-l--16--tablet {
    margin-left: var(--spacing-16);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-l--20--tablet.mg-l--20--tablet {
    margin-left: var(--spacing-20);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-l--24--tablet.mg-l--24--tablet {
    margin-left: var(--spacing-24);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-r--tablet.mg-r--tablet {
    margin-right: var(--spacing-1);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-r--0--tablet.mg-r--0--tablet {
    margin-right: var(--spacing-0);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-r--1--tablet.mg-r--1--tablet {
    margin-right: var(--spacing-1);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-r--2--tablet.mg-r--2--tablet {
    margin-right: var(--spacing-2);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-r--3--tablet.mg-r--3--tablet {
    margin-right: var(--spacing-3);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-r--4--tablet.mg-r--4--tablet {
    margin-right: var(--spacing-4);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-r--5--tablet.mg-r--5--tablet {
    margin-right: var(--spacing-5);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-r--6--tablet.mg-r--6--tablet {
    margin-right: var(--spacing-6);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-r--7--tablet.mg-r--7--tablet {
    margin-right: var(--spacing-7);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-r--8--tablet.mg-r--8--tablet {
    margin-right: var(--spacing-8);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-r--9--tablet.mg-r--9--tablet {
    margin-right: var(--spacing-9);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-r--10--tablet.mg-r--10--tablet {
    margin-right: var(--spacing-10);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-r--11--tablet.mg-r--11--tablet {
    margin-right: var(--spacing-11);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-r--12--tablet.mg-r--12--tablet {
    margin-right: var(--spacing-12);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-r--14--tablet.mg-r--14--tablet {
    margin-right: var(--spacing-14);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-r--16--tablet.mg-r--16--tablet {
    margin-right: var(--spacing-16);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-r--20--tablet.mg-r--20--tablet {
    margin-right: var(--spacing-20);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-r--24--tablet.mg-r--24--tablet {
    margin-right: var(--spacing-24);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-x--tablet.mg-x--tablet {
    margin-left: var(--spacing-1);
    margin-right: var(--spacing-1);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-x--0--tablet.mg-x--0--tablet {
    margin-left: var(--spacing-0);
    margin-right: var(--spacing-0);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-x--1--tablet.mg-x--1--tablet {
    margin-left: var(--spacing-1);
    margin-right: var(--spacing-1);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-x--2--tablet.mg-x--2--tablet {
    margin-left: var(--spacing-2);
    margin-right: var(--spacing-2);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-x--3--tablet.mg-x--3--tablet {
    margin-left: var(--spacing-3);
    margin-right: var(--spacing-3);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-x--4--tablet.mg-x--4--tablet {
    margin-left: var(--spacing-4);
    margin-right: var(--spacing-4);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-x--5--tablet.mg-x--5--tablet {
    margin-left: var(--spacing-5);
    margin-right: var(--spacing-5);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-x--6--tablet.mg-x--6--tablet {
    margin-left: var(--spacing-6);
    margin-right: var(--spacing-6);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-x--7--tablet.mg-x--7--tablet {
    margin-left: var(--spacing-7);
    margin-right: var(--spacing-7);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-x--8--tablet.mg-x--8--tablet {
    margin-left: var(--spacing-8);
    margin-right: var(--spacing-8);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-x--9--tablet.mg-x--9--tablet {
    margin-left: var(--spacing-9);
    margin-right: var(--spacing-9);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-x--10--tablet.mg-x--10--tablet {
    margin-left: var(--spacing-10);
    margin-right: var(--spacing-10);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-x--11--tablet.mg-x--11--tablet {
    margin-left: var(--spacing-11);
    margin-right: var(--spacing-11);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-x--12--tablet.mg-x--12--tablet {
    margin-left: var(--spacing-12);
    margin-right: var(--spacing-12);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-x--14--tablet.mg-x--14--tablet {
    margin-left: var(--spacing-14);
    margin-right: var(--spacing-14);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-x--16--tablet.mg-x--16--tablet {
    margin-left: var(--spacing-16);
    margin-right: var(--spacing-16);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-x--20--tablet.mg-x--20--tablet {
    margin-left: var(--spacing-20);
    margin-right: var(--spacing-20);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-x--24--tablet.mg-x--24--tablet {
    margin-left: var(--spacing-24);
    margin-right: var(--spacing-24);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-y--tablet.mg-y--tablet {
    margin-top: var(--spacing-1);
    margin-bottom: var(--spacing-1);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-y--0--tablet.mg-y--0--tablet {
    margin-top: var(--spacing-0);
    margin-bottom: var(--spacing-0);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-y--1--tablet.mg-y--1--tablet {
    margin-top: var(--spacing-1);
    margin-bottom: var(--spacing-1);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-y--2--tablet.mg-y--2--tablet {
    margin-top: var(--spacing-2);
    margin-bottom: var(--spacing-2);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-y--3--tablet.mg-y--3--tablet {
    margin-top: var(--spacing-3);
    margin-bottom: var(--spacing-3);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-y--4--tablet.mg-y--4--tablet {
    margin-top: var(--spacing-4);
    margin-bottom: var(--spacing-4);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-y--5--tablet.mg-y--5--tablet {
    margin-top: var(--spacing-5);
    margin-bottom: var(--spacing-5);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-y--6--tablet.mg-y--6--tablet {
    margin-top: var(--spacing-6);
    margin-bottom: var(--spacing-6);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-y--7--tablet.mg-y--7--tablet {
    margin-top: var(--spacing-7);
    margin-bottom: var(--spacing-7);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-y--8--tablet.mg-y--8--tablet {
    margin-top: var(--spacing-8);
    margin-bottom: var(--spacing-8);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-y--9--tablet.mg-y--9--tablet {
    margin-top: var(--spacing-9);
    margin-bottom: var(--spacing-9);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-y--10--tablet.mg-y--10--tablet {
    margin-top: var(--spacing-10);
    margin-bottom: var(--spacing-10);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-y--11--tablet.mg-y--11--tablet {
    margin-top: var(--spacing-11);
    margin-bottom: var(--spacing-11);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-y--12--tablet.mg-y--12--tablet {
    margin-top: var(--spacing-12);
    margin-bottom: var(--spacing-12);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-y--14--tablet.mg-y--14--tablet {
    margin-top: var(--spacing-14);
    margin-bottom: var(--spacing-14);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-y--16--tablet.mg-y--16--tablet {
    margin-top: var(--spacing-16);
    margin-bottom: var(--spacing-16);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-y--20--tablet.mg-y--20--tablet {
    margin-top: var(--spacing-20);
    margin-bottom: var(--spacing-20);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .mg-y--24--tablet.mg-y--24--tablet {
    margin-top: var(--spacing-24);
    margin-bottom: var(--spacing-24);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg--large-tablet.mg--large-tablet {
    margin-top: var(--spacing-1);
    margin-bottom: var(--spacing-1);
    margin-left: var(--spacing-1);
    margin-right: var(--spacing-1);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg--0--large-tablet.mg--0--large-tablet {
    margin-top: var(--spacing-0);
    margin-bottom: var(--spacing-0);
    margin-left: var(--spacing-0);
    margin-right: var(--spacing-0);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg--1--large-tablet.mg--1--large-tablet {
    margin-top: var(--spacing-1);
    margin-bottom: var(--spacing-1);
    margin-left: var(--spacing-1);
    margin-right: var(--spacing-1);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg--2--large-tablet.mg--2--large-tablet {
    margin-top: var(--spacing-2);
    margin-bottom: var(--spacing-2);
    margin-left: var(--spacing-2);
    margin-right: var(--spacing-2);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg--3--large-tablet.mg--3--large-tablet {
    margin-top: var(--spacing-3);
    margin-bottom: var(--spacing-3);
    margin-left: var(--spacing-3);
    margin-right: var(--spacing-3);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg--4--large-tablet.mg--4--large-tablet {
    margin-top: var(--spacing-4);
    margin-bottom: var(--spacing-4);
    margin-left: var(--spacing-4);
    margin-right: var(--spacing-4);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg--5--large-tablet.mg--5--large-tablet {
    margin-top: var(--spacing-5);
    margin-bottom: var(--spacing-5);
    margin-left: var(--spacing-5);
    margin-right: var(--spacing-5);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg--6--large-tablet.mg--6--large-tablet {
    margin-top: var(--spacing-6);
    margin-bottom: var(--spacing-6);
    margin-left: var(--spacing-6);
    margin-right: var(--spacing-6);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg--7--large-tablet.mg--7--large-tablet {
    margin-top: var(--spacing-7);
    margin-bottom: var(--spacing-7);
    margin-left: var(--spacing-7);
    margin-right: var(--spacing-7);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg--8--large-tablet.mg--8--large-tablet {
    margin-top: var(--spacing-8);
    margin-bottom: var(--spacing-8);
    margin-left: var(--spacing-8);
    margin-right: var(--spacing-8);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg--9--large-tablet.mg--9--large-tablet {
    margin-top: var(--spacing-9);
    margin-bottom: var(--spacing-9);
    margin-left: var(--spacing-9);
    margin-right: var(--spacing-9);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg--10--large-tablet.mg--10--large-tablet {
    margin-top: var(--spacing-10);
    margin-bottom: var(--spacing-10);
    margin-left: var(--spacing-10);
    margin-right: var(--spacing-10);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg--11--large-tablet.mg--11--large-tablet {
    margin-top: var(--spacing-11);
    margin-bottom: var(--spacing-11);
    margin-left: var(--spacing-11);
    margin-right: var(--spacing-11);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg--12--large-tablet.mg--12--large-tablet {
    margin-top: var(--spacing-12);
    margin-bottom: var(--spacing-12);
    margin-left: var(--spacing-12);
    margin-right: var(--spacing-12);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg--14--large-tablet.mg--14--large-tablet {
    margin-top: var(--spacing-14);
    margin-bottom: var(--spacing-14);
    margin-left: var(--spacing-14);
    margin-right: var(--spacing-14);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg--16--large-tablet.mg--16--large-tablet {
    margin-top: var(--spacing-16);
    margin-bottom: var(--spacing-16);
    margin-left: var(--spacing-16);
    margin-right: var(--spacing-16);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg--20--large-tablet.mg--20--large-tablet {
    margin-top: var(--spacing-20);
    margin-bottom: var(--spacing-20);
    margin-left: var(--spacing-20);
    margin-right: var(--spacing-20);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg--24--large-tablet.mg--24--large-tablet {
    margin-top: var(--spacing-24);
    margin-bottom: var(--spacing-24);
    margin-left: var(--spacing-24);
    margin-right: var(--spacing-24);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-t--large-tablet.mg-t--large-tablet {
    margin-top: var(--spacing-1);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-t--0--large-tablet.mg-t--0--large-tablet {
    margin-top: var(--spacing-0);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-t--1--large-tablet.mg-t--1--large-tablet {
    margin-top: var(--spacing-1);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-t--2--large-tablet.mg-t--2--large-tablet {
    margin-top: var(--spacing-2);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-t--3--large-tablet.mg-t--3--large-tablet {
    margin-top: var(--spacing-3);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-t--4--large-tablet.mg-t--4--large-tablet {
    margin-top: var(--spacing-4);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-t--5--large-tablet.mg-t--5--large-tablet {
    margin-top: var(--spacing-5);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-t--6--large-tablet.mg-t--6--large-tablet {
    margin-top: var(--spacing-6);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-t--7--large-tablet.mg-t--7--large-tablet {
    margin-top: var(--spacing-7);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-t--8--large-tablet.mg-t--8--large-tablet {
    margin-top: var(--spacing-8);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-t--9--large-tablet.mg-t--9--large-tablet {
    margin-top: var(--spacing-9);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-t--10--large-tablet.mg-t--10--large-tablet {
    margin-top: var(--spacing-10);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-t--11--large-tablet.mg-t--11--large-tablet {
    margin-top: var(--spacing-11);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-t--12--large-tablet.mg-t--12--large-tablet {
    margin-top: var(--spacing-12);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-t--14--large-tablet.mg-t--14--large-tablet {
    margin-top: var(--spacing-14);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-t--16--large-tablet.mg-t--16--large-tablet {
    margin-top: var(--spacing-16);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-t--20--large-tablet.mg-t--20--large-tablet {
    margin-top: var(--spacing-20);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-t--24--large-tablet.mg-t--24--large-tablet {
    margin-top: var(--spacing-24);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-b--large-tablet.mg-b--large-tablet {
    margin-bottom: var(--spacing-1);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-b--0--large-tablet.mg-b--0--large-tablet {
    margin-bottom: var(--spacing-0);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-b--1--large-tablet.mg-b--1--large-tablet {
    margin-bottom: var(--spacing-1);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-b--2--large-tablet.mg-b--2--large-tablet {
    margin-bottom: var(--spacing-2);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-b--3--large-tablet.mg-b--3--large-tablet {
    margin-bottom: var(--spacing-3);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-b--4--large-tablet.mg-b--4--large-tablet {
    margin-bottom: var(--spacing-4);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-b--5--large-tablet.mg-b--5--large-tablet {
    margin-bottom: var(--spacing-5);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-b--6--large-tablet.mg-b--6--large-tablet {
    margin-bottom: var(--spacing-6);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-b--7--large-tablet.mg-b--7--large-tablet {
    margin-bottom: var(--spacing-7);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-b--8--large-tablet.mg-b--8--large-tablet {
    margin-bottom: var(--spacing-8);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-b--9--large-tablet.mg-b--9--large-tablet {
    margin-bottom: var(--spacing-9);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-b--10--large-tablet.mg-b--10--large-tablet {
    margin-bottom: var(--spacing-10);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-b--11--large-tablet.mg-b--11--large-tablet {
    margin-bottom: var(--spacing-11);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-b--12--large-tablet.mg-b--12--large-tablet {
    margin-bottom: var(--spacing-12);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-b--14--large-tablet.mg-b--14--large-tablet {
    margin-bottom: var(--spacing-14);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-b--16--large-tablet.mg-b--16--large-tablet {
    margin-bottom: var(--spacing-16);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-b--20--large-tablet.mg-b--20--large-tablet {
    margin-bottom: var(--spacing-20);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-b--24--large-tablet.mg-b--24--large-tablet {
    margin-bottom: var(--spacing-24);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-l--large-tablet.mg-l--large-tablet {
    margin-left: var(--spacing-1);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-l--0--large-tablet.mg-l--0--large-tablet {
    margin-left: var(--spacing-0);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-l--1--large-tablet.mg-l--1--large-tablet {
    margin-left: var(--spacing-1);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-l--2--large-tablet.mg-l--2--large-tablet {
    margin-left: var(--spacing-2);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-l--3--large-tablet.mg-l--3--large-tablet {
    margin-left: var(--spacing-3);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-l--4--large-tablet.mg-l--4--large-tablet {
    margin-left: var(--spacing-4);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-l--5--large-tablet.mg-l--5--large-tablet {
    margin-left: var(--spacing-5);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-l--6--large-tablet.mg-l--6--large-tablet {
    margin-left: var(--spacing-6);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-l--7--large-tablet.mg-l--7--large-tablet {
    margin-left: var(--spacing-7);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-l--8--large-tablet.mg-l--8--large-tablet {
    margin-left: var(--spacing-8);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-l--9--large-tablet.mg-l--9--large-tablet {
    margin-left: var(--spacing-9);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-l--10--large-tablet.mg-l--10--large-tablet {
    margin-left: var(--spacing-10);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-l--11--large-tablet.mg-l--11--large-tablet {
    margin-left: var(--spacing-11);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-l--12--large-tablet.mg-l--12--large-tablet {
    margin-left: var(--spacing-12);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-l--14--large-tablet.mg-l--14--large-tablet {
    margin-left: var(--spacing-14);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-l--16--large-tablet.mg-l--16--large-tablet {
    margin-left: var(--spacing-16);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-l--20--large-tablet.mg-l--20--large-tablet {
    margin-left: var(--spacing-20);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-l--24--large-tablet.mg-l--24--large-tablet {
    margin-left: var(--spacing-24);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-r--large-tablet.mg-r--large-tablet {
    margin-right: var(--spacing-1);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-r--0--large-tablet.mg-r--0--large-tablet {
    margin-right: var(--spacing-0);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-r--1--large-tablet.mg-r--1--large-tablet {
    margin-right: var(--spacing-1);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-r--2--large-tablet.mg-r--2--large-tablet {
    margin-right: var(--spacing-2);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-r--3--large-tablet.mg-r--3--large-tablet {
    margin-right: var(--spacing-3);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-r--4--large-tablet.mg-r--4--large-tablet {
    margin-right: var(--spacing-4);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-r--5--large-tablet.mg-r--5--large-tablet {
    margin-right: var(--spacing-5);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-r--6--large-tablet.mg-r--6--large-tablet {
    margin-right: var(--spacing-6);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-r--7--large-tablet.mg-r--7--large-tablet {
    margin-right: var(--spacing-7);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-r--8--large-tablet.mg-r--8--large-tablet {
    margin-right: var(--spacing-8);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-r--9--large-tablet.mg-r--9--large-tablet {
    margin-right: var(--spacing-9);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-r--10--large-tablet.mg-r--10--large-tablet {
    margin-right: var(--spacing-10);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-r--11--large-tablet.mg-r--11--large-tablet {
    margin-right: var(--spacing-11);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-r--12--large-tablet.mg-r--12--large-tablet {
    margin-right: var(--spacing-12);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-r--14--large-tablet.mg-r--14--large-tablet {
    margin-right: var(--spacing-14);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-r--16--large-tablet.mg-r--16--large-tablet {
    margin-right: var(--spacing-16);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-r--20--large-tablet.mg-r--20--large-tablet {
    margin-right: var(--spacing-20);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-r--24--large-tablet.mg-r--24--large-tablet {
    margin-right: var(--spacing-24);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-x--large-tablet.mg-x--large-tablet {
    margin-left: var(--spacing-1);
    margin-right: var(--spacing-1);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-x--0--large-tablet.mg-x--0--large-tablet {
    margin-left: var(--spacing-0);
    margin-right: var(--spacing-0);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-x--1--large-tablet.mg-x--1--large-tablet {
    margin-left: var(--spacing-1);
    margin-right: var(--spacing-1);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-x--2--large-tablet.mg-x--2--large-tablet {
    margin-left: var(--spacing-2);
    margin-right: var(--spacing-2);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-x--3--large-tablet.mg-x--3--large-tablet {
    margin-left: var(--spacing-3);
    margin-right: var(--spacing-3);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-x--4--large-tablet.mg-x--4--large-tablet {
    margin-left: var(--spacing-4);
    margin-right: var(--spacing-4);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-x--5--large-tablet.mg-x--5--large-tablet {
    margin-left: var(--spacing-5);
    margin-right: var(--spacing-5);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-x--6--large-tablet.mg-x--6--large-tablet {
    margin-left: var(--spacing-6);
    margin-right: var(--spacing-6);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-x--7--large-tablet.mg-x--7--large-tablet {
    margin-left: var(--spacing-7);
    margin-right: var(--spacing-7);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-x--8--large-tablet.mg-x--8--large-tablet {
    margin-left: var(--spacing-8);
    margin-right: var(--spacing-8);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-x--9--large-tablet.mg-x--9--large-tablet {
    margin-left: var(--spacing-9);
    margin-right: var(--spacing-9);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-x--10--large-tablet.mg-x--10--large-tablet {
    margin-left: var(--spacing-10);
    margin-right: var(--spacing-10);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-x--11--large-tablet.mg-x--11--large-tablet {
    margin-left: var(--spacing-11);
    margin-right: var(--spacing-11);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-x--12--large-tablet.mg-x--12--large-tablet {
    margin-left: var(--spacing-12);
    margin-right: var(--spacing-12);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-x--14--large-tablet.mg-x--14--large-tablet {
    margin-left: var(--spacing-14);
    margin-right: var(--spacing-14);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-x--16--large-tablet.mg-x--16--large-tablet {
    margin-left: var(--spacing-16);
    margin-right: var(--spacing-16);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-x--20--large-tablet.mg-x--20--large-tablet {
    margin-left: var(--spacing-20);
    margin-right: var(--spacing-20);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-x--24--large-tablet.mg-x--24--large-tablet {
    margin-left: var(--spacing-24);
    margin-right: var(--spacing-24);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-y--large-tablet.mg-y--large-tablet {
    margin-top: var(--spacing-1);
    margin-bottom: var(--spacing-1);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-y--0--large-tablet.mg-y--0--large-tablet {
    margin-top: var(--spacing-0);
    margin-bottom: var(--spacing-0);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-y--1--large-tablet.mg-y--1--large-tablet {
    margin-top: var(--spacing-1);
    margin-bottom: var(--spacing-1);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-y--2--large-tablet.mg-y--2--large-tablet {
    margin-top: var(--spacing-2);
    margin-bottom: var(--spacing-2);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-y--3--large-tablet.mg-y--3--large-tablet {
    margin-top: var(--spacing-3);
    margin-bottom: var(--spacing-3);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-y--4--large-tablet.mg-y--4--large-tablet {
    margin-top: var(--spacing-4);
    margin-bottom: var(--spacing-4);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-y--5--large-tablet.mg-y--5--large-tablet {
    margin-top: var(--spacing-5);
    margin-bottom: var(--spacing-5);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-y--6--large-tablet.mg-y--6--large-tablet {
    margin-top: var(--spacing-6);
    margin-bottom: var(--spacing-6);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-y--7--large-tablet.mg-y--7--large-tablet {
    margin-top: var(--spacing-7);
    margin-bottom: var(--spacing-7);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-y--8--large-tablet.mg-y--8--large-tablet {
    margin-top: var(--spacing-8);
    margin-bottom: var(--spacing-8);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-y--9--large-tablet.mg-y--9--large-tablet {
    margin-top: var(--spacing-9);
    margin-bottom: var(--spacing-9);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-y--10--large-tablet.mg-y--10--large-tablet {
    margin-top: var(--spacing-10);
    margin-bottom: var(--spacing-10);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-y--11--large-tablet.mg-y--11--large-tablet {
    margin-top: var(--spacing-11);
    margin-bottom: var(--spacing-11);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-y--12--large-tablet.mg-y--12--large-tablet {
    margin-top: var(--spacing-12);
    margin-bottom: var(--spacing-12);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-y--14--large-tablet.mg-y--14--large-tablet {
    margin-top: var(--spacing-14);
    margin-bottom: var(--spacing-14);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-y--16--large-tablet.mg-y--16--large-tablet {
    margin-top: var(--spacing-16);
    margin-bottom: var(--spacing-16);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-y--20--large-tablet.mg-y--20--large-tablet {
    margin-top: var(--spacing-20);
    margin-bottom: var(--spacing-20);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .mg-y--24--large-tablet.mg-y--24--large-tablet {
    margin-top: var(--spacing-24);
    margin-bottom: var(--spacing-24);
  }
}

@media (min-width: 1201px) {
  .mg--laptop.mg--laptop {
    margin-top: var(--spacing-1);
    margin-bottom: var(--spacing-1);
    margin-left: var(--spacing-1);
    margin-right: var(--spacing-1);
  }
}

@media (min-width: 1201px) {
  .mg--0--laptop.mg--0--laptop {
    margin-top: var(--spacing-0);
    margin-bottom: var(--spacing-0);
    margin-left: var(--spacing-0);
    margin-right: var(--spacing-0);
  }
}

@media (min-width: 1201px) {
  .mg--1--laptop.mg--1--laptop {
    margin-top: var(--spacing-1);
    margin-bottom: var(--spacing-1);
    margin-left: var(--spacing-1);
    margin-right: var(--spacing-1);
  }
}

@media (min-width: 1201px) {
  .mg--2--laptop.mg--2--laptop {
    margin-top: var(--spacing-2);
    margin-bottom: var(--spacing-2);
    margin-left: var(--spacing-2);
    margin-right: var(--spacing-2);
  }
}

@media (min-width: 1201px) {
  .mg--3--laptop.mg--3--laptop {
    margin-top: var(--spacing-3);
    margin-bottom: var(--spacing-3);
    margin-left: var(--spacing-3);
    margin-right: var(--spacing-3);
  }
}

@media (min-width: 1201px) {
  .mg--4--laptop.mg--4--laptop {
    margin-top: var(--spacing-4);
    margin-bottom: var(--spacing-4);
    margin-left: var(--spacing-4);
    margin-right: var(--spacing-4);
  }
}

@media (min-width: 1201px) {
  .mg--5--laptop.mg--5--laptop {
    margin-top: var(--spacing-5);
    margin-bottom: var(--spacing-5);
    margin-left: var(--spacing-5);
    margin-right: var(--spacing-5);
  }
}

@media (min-width: 1201px) {
  .mg--6--laptop.mg--6--laptop {
    margin-top: var(--spacing-6);
    margin-bottom: var(--spacing-6);
    margin-left: var(--spacing-6);
    margin-right: var(--spacing-6);
  }
}

@media (min-width: 1201px) {
  .mg--7--laptop.mg--7--laptop {
    margin-top: var(--spacing-7);
    margin-bottom: var(--spacing-7);
    margin-left: var(--spacing-7);
    margin-right: var(--spacing-7);
  }
}

@media (min-width: 1201px) {
  .mg--8--laptop.mg--8--laptop {
    margin-top: var(--spacing-8);
    margin-bottom: var(--spacing-8);
    margin-left: var(--spacing-8);
    margin-right: var(--spacing-8);
  }
}

@media (min-width: 1201px) {
  .mg--9--laptop.mg--9--laptop {
    margin-top: var(--spacing-9);
    margin-bottom: var(--spacing-9);
    margin-left: var(--spacing-9);
    margin-right: var(--spacing-9);
  }
}

@media (min-width: 1201px) {
  .mg--10--laptop.mg--10--laptop {
    margin-top: var(--spacing-10);
    margin-bottom: var(--spacing-10);
    margin-left: var(--spacing-10);
    margin-right: var(--spacing-10);
  }
}

@media (min-width: 1201px) {
  .mg--11--laptop.mg--11--laptop {
    margin-top: var(--spacing-11);
    margin-bottom: var(--spacing-11);
    margin-left: var(--spacing-11);
    margin-right: var(--spacing-11);
  }
}

@media (min-width: 1201px) {
  .mg--12--laptop.mg--12--laptop {
    margin-top: var(--spacing-12);
    margin-bottom: var(--spacing-12);
    margin-left: var(--spacing-12);
    margin-right: var(--spacing-12);
  }
}

@media (min-width: 1201px) {
  .mg--14--laptop.mg--14--laptop {
    margin-top: var(--spacing-14);
    margin-bottom: var(--spacing-14);
    margin-left: var(--spacing-14);
    margin-right: var(--spacing-14);
  }
}

@media (min-width: 1201px) {
  .mg--16--laptop.mg--16--laptop {
    margin-top: var(--spacing-16);
    margin-bottom: var(--spacing-16);
    margin-left: var(--spacing-16);
    margin-right: var(--spacing-16);
  }
}

@media (min-width: 1201px) {
  .mg--20--laptop.mg--20--laptop {
    margin-top: var(--spacing-20);
    margin-bottom: var(--spacing-20);
    margin-left: var(--spacing-20);
    margin-right: var(--spacing-20);
  }
}

@media (min-width: 1201px) {
  .mg--24--laptop.mg--24--laptop {
    margin-top: var(--spacing-24);
    margin-bottom: var(--spacing-24);
    margin-left: var(--spacing-24);
    margin-right: var(--spacing-24);
  }
}

@media (min-width: 1201px) {
  .mg-t--laptop.mg-t--laptop {
    margin-top: var(--spacing-1);
  }
}

@media (min-width: 1201px) {
  .mg-t--0--laptop.mg-t--0--laptop {
    margin-top: var(--spacing-0);
  }
}

@media (min-width: 1201px) {
  .mg-t--1--laptop.mg-t--1--laptop {
    margin-top: var(--spacing-1);
  }
}

@media (min-width: 1201px) {
  .mg-t--2--laptop.mg-t--2--laptop {
    margin-top: var(--spacing-2);
  }
}

@media (min-width: 1201px) {
  .mg-t--3--laptop.mg-t--3--laptop {
    margin-top: var(--spacing-3);
  }
}

@media (min-width: 1201px) {
  .mg-t--4--laptop.mg-t--4--laptop {
    margin-top: var(--spacing-4);
  }
}

@media (min-width: 1201px) {
  .mg-t--5--laptop.mg-t--5--laptop {
    margin-top: var(--spacing-5);
  }
}

@media (min-width: 1201px) {
  .mg-t--6--laptop.mg-t--6--laptop {
    margin-top: var(--spacing-6);
  }
}

@media (min-width: 1201px) {
  .mg-t--7--laptop.mg-t--7--laptop {
    margin-top: var(--spacing-7);
  }
}

@media (min-width: 1201px) {
  .mg-t--8--laptop.mg-t--8--laptop {
    margin-top: var(--spacing-8);
  }
}

@media (min-width: 1201px) {
  .mg-t--9--laptop.mg-t--9--laptop {
    margin-top: var(--spacing-9);
  }
}

@media (min-width: 1201px) {
  .mg-t--10--laptop.mg-t--10--laptop {
    margin-top: var(--spacing-10);
  }
}

@media (min-width: 1201px) {
  .mg-t--11--laptop.mg-t--11--laptop {
    margin-top: var(--spacing-11);
  }
}

@media (min-width: 1201px) {
  .mg-t--12--laptop.mg-t--12--laptop {
    margin-top: var(--spacing-12);
  }
}

@media (min-width: 1201px) {
  .mg-t--14--laptop.mg-t--14--laptop {
    margin-top: var(--spacing-14);
  }
}

@media (min-width: 1201px) {
  .mg-t--16--laptop.mg-t--16--laptop {
    margin-top: var(--spacing-16);
  }
}

@media (min-width: 1201px) {
  .mg-t--20--laptop.mg-t--20--laptop {
    margin-top: var(--spacing-20);
  }
}

@media (min-width: 1201px) {
  .mg-t--24--laptop.mg-t--24--laptop {
    margin-top: var(--spacing-24);
  }
}

@media (min-width: 1201px) {
  .mg-b--laptop.mg-b--laptop {
    margin-bottom: var(--spacing-1);
  }
}

@media (min-width: 1201px) {
  .mg-b--0--laptop.mg-b--0--laptop {
    margin-bottom: var(--spacing-0);
  }
}

@media (min-width: 1201px) {
  .mg-b--1--laptop.mg-b--1--laptop {
    margin-bottom: var(--spacing-1);
  }
}

@media (min-width: 1201px) {
  .mg-b--2--laptop.mg-b--2--laptop {
    margin-bottom: var(--spacing-2);
  }
}

@media (min-width: 1201px) {
  .mg-b--3--laptop.mg-b--3--laptop {
    margin-bottom: var(--spacing-3);
  }
}

@media (min-width: 1201px) {
  .mg-b--4--laptop.mg-b--4--laptop {
    margin-bottom: var(--spacing-4);
  }
}

@media (min-width: 1201px) {
  .mg-b--5--laptop.mg-b--5--laptop {
    margin-bottom: var(--spacing-5);
  }
}

@media (min-width: 1201px) {
  .mg-b--6--laptop.mg-b--6--laptop {
    margin-bottom: var(--spacing-6);
  }
}

@media (min-width: 1201px) {
  .mg-b--7--laptop.mg-b--7--laptop {
    margin-bottom: var(--spacing-7);
  }
}

@media (min-width: 1201px) {
  .mg-b--8--laptop.mg-b--8--laptop {
    margin-bottom: var(--spacing-8);
  }
}

@media (min-width: 1201px) {
  .mg-b--9--laptop.mg-b--9--laptop {
    margin-bottom: var(--spacing-9);
  }
}

@media (min-width: 1201px) {
  .mg-b--10--laptop.mg-b--10--laptop {
    margin-bottom: var(--spacing-10);
  }
}

@media (min-width: 1201px) {
  .mg-b--11--laptop.mg-b--11--laptop {
    margin-bottom: var(--spacing-11);
  }
}

@media (min-width: 1201px) {
  .mg-b--12--laptop.mg-b--12--laptop {
    margin-bottom: var(--spacing-12);
  }
}

@media (min-width: 1201px) {
  .mg-b--14--laptop.mg-b--14--laptop {
    margin-bottom: var(--spacing-14);
  }
}

@media (min-width: 1201px) {
  .mg-b--16--laptop.mg-b--16--laptop {
    margin-bottom: var(--spacing-16);
  }
}

@media (min-width: 1201px) {
  .mg-b--20--laptop.mg-b--20--laptop {
    margin-bottom: var(--spacing-20);
  }
}

@media (min-width: 1201px) {
  .mg-b--24--laptop.mg-b--24--laptop {
    margin-bottom: var(--spacing-24);
  }
}

@media (min-width: 1201px) {
  .mg-l--laptop.mg-l--laptop {
    margin-left: var(--spacing-1);
  }
}

@media (min-width: 1201px) {
  .mg-l--0--laptop.mg-l--0--laptop {
    margin-left: var(--spacing-0);
  }
}

@media (min-width: 1201px) {
  .mg-l--1--laptop.mg-l--1--laptop {
    margin-left: var(--spacing-1);
  }
}

@media (min-width: 1201px) {
  .mg-l--2--laptop.mg-l--2--laptop {
    margin-left: var(--spacing-2);
  }
}

@media (min-width: 1201px) {
  .mg-l--3--laptop.mg-l--3--laptop {
    margin-left: var(--spacing-3);
  }
}

@media (min-width: 1201px) {
  .mg-l--4--laptop.mg-l--4--laptop {
    margin-left: var(--spacing-4);
  }
}

@media (min-width: 1201px) {
  .mg-l--5--laptop.mg-l--5--laptop {
    margin-left: var(--spacing-5);
  }
}

@media (min-width: 1201px) {
  .mg-l--6--laptop.mg-l--6--laptop {
    margin-left: var(--spacing-6);
  }
}

@media (min-width: 1201px) {
  .mg-l--7--laptop.mg-l--7--laptop {
    margin-left: var(--spacing-7);
  }
}

@media (min-width: 1201px) {
  .mg-l--8--laptop.mg-l--8--laptop {
    margin-left: var(--spacing-8);
  }
}

@media (min-width: 1201px) {
  .mg-l--9--laptop.mg-l--9--laptop {
    margin-left: var(--spacing-9);
  }
}

@media (min-width: 1201px) {
  .mg-l--10--laptop.mg-l--10--laptop {
    margin-left: var(--spacing-10);
  }
}

@media (min-width: 1201px) {
  .mg-l--11--laptop.mg-l--11--laptop {
    margin-left: var(--spacing-11);
  }
}

@media (min-width: 1201px) {
  .mg-l--12--laptop.mg-l--12--laptop {
    margin-left: var(--spacing-12);
  }
}

@media (min-width: 1201px) {
  .mg-l--14--laptop.mg-l--14--laptop {
    margin-left: var(--spacing-14);
  }
}

@media (min-width: 1201px) {
  .mg-l--16--laptop.mg-l--16--laptop {
    margin-left: var(--spacing-16);
  }
}

@media (min-width: 1201px) {
  .mg-l--20--laptop.mg-l--20--laptop {
    margin-left: var(--spacing-20);
  }
}

@media (min-width: 1201px) {
  .mg-l--24--laptop.mg-l--24--laptop {
    margin-left: var(--spacing-24);
  }
}

@media (min-width: 1201px) {
  .mg-r--laptop.mg-r--laptop {
    margin-right: var(--spacing-1);
  }
}

@media (min-width: 1201px) {
  .mg-r--0--laptop.mg-r--0--laptop {
    margin-right: var(--spacing-0);
  }
}

@media (min-width: 1201px) {
  .mg-r--1--laptop.mg-r--1--laptop {
    margin-right: var(--spacing-1);
  }
}

@media (min-width: 1201px) {
  .mg-r--2--laptop.mg-r--2--laptop {
    margin-right: var(--spacing-2);
  }
}

@media (min-width: 1201px) {
  .mg-r--3--laptop.mg-r--3--laptop {
    margin-right: var(--spacing-3);
  }
}

@media (min-width: 1201px) {
  .mg-r--4--laptop.mg-r--4--laptop {
    margin-right: var(--spacing-4);
  }
}

@media (min-width: 1201px) {
  .mg-r--5--laptop.mg-r--5--laptop {
    margin-right: var(--spacing-5);
  }
}

@media (min-width: 1201px) {
  .mg-r--6--laptop.mg-r--6--laptop {
    margin-right: var(--spacing-6);
  }
}

@media (min-width: 1201px) {
  .mg-r--7--laptop.mg-r--7--laptop {
    margin-right: var(--spacing-7);
  }
}

@media (min-width: 1201px) {
  .mg-r--8--laptop.mg-r--8--laptop {
    margin-right: var(--spacing-8);
  }
}

@media (min-width: 1201px) {
  .mg-r--9--laptop.mg-r--9--laptop {
    margin-right: var(--spacing-9);
  }
}

@media (min-width: 1201px) {
  .mg-r--10--laptop.mg-r--10--laptop {
    margin-right: var(--spacing-10);
  }
}

@media (min-width: 1201px) {
  .mg-r--11--laptop.mg-r--11--laptop {
    margin-right: var(--spacing-11);
  }
}

@media (min-width: 1201px) {
  .mg-r--12--laptop.mg-r--12--laptop {
    margin-right: var(--spacing-12);
  }
}

@media (min-width: 1201px) {
  .mg-r--14--laptop.mg-r--14--laptop {
    margin-right: var(--spacing-14);
  }
}

@media (min-width: 1201px) {
  .mg-r--16--laptop.mg-r--16--laptop {
    margin-right: var(--spacing-16);
  }
}

@media (min-width: 1201px) {
  .mg-r--20--laptop.mg-r--20--laptop {
    margin-right: var(--spacing-20);
  }
}

@media (min-width: 1201px) {
  .mg-r--24--laptop.mg-r--24--laptop {
    margin-right: var(--spacing-24);
  }
}

@media (min-width: 1201px) {
  .mg-x--laptop.mg-x--laptop {
    margin-left: var(--spacing-1);
    margin-right: var(--spacing-1);
  }
}

@media (min-width: 1201px) {
  .mg-x--0--laptop.mg-x--0--laptop {
    margin-left: var(--spacing-0);
    margin-right: var(--spacing-0);
  }
}

@media (min-width: 1201px) {
  .mg-x--1--laptop.mg-x--1--laptop {
    margin-left: var(--spacing-1);
    margin-right: var(--spacing-1);
  }
}

@media (min-width: 1201px) {
  .mg-x--2--laptop.mg-x--2--laptop {
    margin-left: var(--spacing-2);
    margin-right: var(--spacing-2);
  }
}

@media (min-width: 1201px) {
  .mg-x--3--laptop.mg-x--3--laptop {
    margin-left: var(--spacing-3);
    margin-right: var(--spacing-3);
  }
}

@media (min-width: 1201px) {
  .mg-x--4--laptop.mg-x--4--laptop {
    margin-left: var(--spacing-4);
    margin-right: var(--spacing-4);
  }
}

@media (min-width: 1201px) {
  .mg-x--5--laptop.mg-x--5--laptop {
    margin-left: var(--spacing-5);
    margin-right: var(--spacing-5);
  }
}

@media (min-width: 1201px) {
  .mg-x--6--laptop.mg-x--6--laptop {
    margin-left: var(--spacing-6);
    margin-right: var(--spacing-6);
  }
}

@media (min-width: 1201px) {
  .mg-x--7--laptop.mg-x--7--laptop {
    margin-left: var(--spacing-7);
    margin-right: var(--spacing-7);
  }
}

@media (min-width: 1201px) {
  .mg-x--8--laptop.mg-x--8--laptop {
    margin-left: var(--spacing-8);
    margin-right: var(--spacing-8);
  }
}

@media (min-width: 1201px) {
  .mg-x--9--laptop.mg-x--9--laptop {
    margin-left: var(--spacing-9);
    margin-right: var(--spacing-9);
  }
}

@media (min-width: 1201px) {
  .mg-x--10--laptop.mg-x--10--laptop {
    margin-left: var(--spacing-10);
    margin-right: var(--spacing-10);
  }
}

@media (min-width: 1201px) {
  .mg-x--11--laptop.mg-x--11--laptop {
    margin-left: var(--spacing-11);
    margin-right: var(--spacing-11);
  }
}

@media (min-width: 1201px) {
  .mg-x--12--laptop.mg-x--12--laptop {
    margin-left: var(--spacing-12);
    margin-right: var(--spacing-12);
  }
}

@media (min-width: 1201px) {
  .mg-x--14--laptop.mg-x--14--laptop {
    margin-left: var(--spacing-14);
    margin-right: var(--spacing-14);
  }
}

@media (min-width: 1201px) {
  .mg-x--16--laptop.mg-x--16--laptop {
    margin-left: var(--spacing-16);
    margin-right: var(--spacing-16);
  }
}

@media (min-width: 1201px) {
  .mg-x--20--laptop.mg-x--20--laptop {
    margin-left: var(--spacing-20);
    margin-right: var(--spacing-20);
  }
}

@media (min-width: 1201px) {
  .mg-x--24--laptop.mg-x--24--laptop {
    margin-left: var(--spacing-24);
    margin-right: var(--spacing-24);
  }
}

@media (min-width: 1201px) {
  .mg-y--laptop.mg-y--laptop {
    margin-top: var(--spacing-1);
    margin-bottom: var(--spacing-1);
  }
}

@media (min-width: 1201px) {
  .mg-y--0--laptop.mg-y--0--laptop {
    margin-top: var(--spacing-0);
    margin-bottom: var(--spacing-0);
  }
}

@media (min-width: 1201px) {
  .mg-y--1--laptop.mg-y--1--laptop {
    margin-top: var(--spacing-1);
    margin-bottom: var(--spacing-1);
  }
}

@media (min-width: 1201px) {
  .mg-y--2--laptop.mg-y--2--laptop {
    margin-top: var(--spacing-2);
    margin-bottom: var(--spacing-2);
  }
}

@media (min-width: 1201px) {
  .mg-y--3--laptop.mg-y--3--laptop {
    margin-top: var(--spacing-3);
    margin-bottom: var(--spacing-3);
  }
}

@media (min-width: 1201px) {
  .mg-y--4--laptop.mg-y--4--laptop {
    margin-top: var(--spacing-4);
    margin-bottom: var(--spacing-4);
  }
}

@media (min-width: 1201px) {
  .mg-y--5--laptop.mg-y--5--laptop {
    margin-top: var(--spacing-5);
    margin-bottom: var(--spacing-5);
  }
}

@media (min-width: 1201px) {
  .mg-y--6--laptop.mg-y--6--laptop {
    margin-top: var(--spacing-6);
    margin-bottom: var(--spacing-6);
  }
}

@media (min-width: 1201px) {
  .mg-y--7--laptop.mg-y--7--laptop {
    margin-top: var(--spacing-7);
    margin-bottom: var(--spacing-7);
  }
}

@media (min-width: 1201px) {
  .mg-y--8--laptop.mg-y--8--laptop {
    margin-top: var(--spacing-8);
    margin-bottom: var(--spacing-8);
  }
}

@media (min-width: 1201px) {
  .mg-y--9--laptop.mg-y--9--laptop {
    margin-top: var(--spacing-9);
    margin-bottom: var(--spacing-9);
  }
}

@media (min-width: 1201px) {
  .mg-y--10--laptop.mg-y--10--laptop {
    margin-top: var(--spacing-10);
    margin-bottom: var(--spacing-10);
  }
}

@media (min-width: 1201px) {
  .mg-y--11--laptop.mg-y--11--laptop {
    margin-top: var(--spacing-11);
    margin-bottom: var(--spacing-11);
  }
}

@media (min-width: 1201px) {
  .mg-y--12--laptop.mg-y--12--laptop {
    margin-top: var(--spacing-12);
    margin-bottom: var(--spacing-12);
  }
}

@media (min-width: 1201px) {
  .mg-y--14--laptop.mg-y--14--laptop {
    margin-top: var(--spacing-14);
    margin-bottom: var(--spacing-14);
  }
}

@media (min-width: 1201px) {
  .mg-y--16--laptop.mg-y--16--laptop {
    margin-top: var(--spacing-16);
    margin-bottom: var(--spacing-16);
  }
}

@media (min-width: 1201px) {
  .mg-y--20--laptop.mg-y--20--laptop {
    margin-top: var(--spacing-20);
    margin-bottom: var(--spacing-20);
  }
}

@media (min-width: 1201px) {
  .mg-y--24--laptop.mg-y--24--laptop {
    margin-top: var(--spacing-24);
    margin-bottom: var(--spacing-24);
  }
}

/* ===================================
  Gap
  =================================== */
.gap {
  gap: var(--spacing-1);
}

.gap--0 {
  gap: var(--spacing-0);
}

.gap--1 {
  gap: var(--spacing-1);
}

.gap--2 {
  gap: var(--spacing-2);
}

.gap--3 {
  gap: var(--spacing-3);
}

.gap--4 {
  gap: var(--spacing-4);
}

.gap--5 {
  gap: var(--spacing-5);
}

.gap--6 {
  gap: var(--spacing-6);
}

.gap--7 {
  gap: var(--spacing-7);
}

.gap--8 {
  gap: var(--spacing-8);
}

.gap--9 {
  gap: var(--spacing-9);
}

.gap--10 {
  gap: var(--spacing-10);
}

.gap--11 {
  gap: var(--spacing-11);
}

.gap--12 {
  gap: var(--spacing-12);
}

.gap--14 {
  gap: var(--spacing-14);
}

.gap--16 {
  gap: var(--spacing-16);
}

.gap--20 {
  gap: var(--spacing-20);
}

.gap--24 {
  gap: var(--spacing-24);
}

@media (max-width: 640px) {
  .gap--mobile.gap--mobile {
    gap: var(--spacing-1);
  }
}

@media (max-width: 640px) {
  .gap--0--mobile.gap--0--mobile {
    gap: var(--spacing-0);
  }
}

@media (max-width: 640px) {
  .gap--1--mobile.gap--1--mobile {
    gap: var(--spacing-1);
  }
}

@media (max-width: 640px) {
  .gap--2--mobile.gap--2--mobile {
    gap: var(--spacing-2);
  }
}

@media (max-width: 640px) {
  .gap--3--mobile.gap--3--mobile {
    gap: var(--spacing-3);
  }
}

@media (max-width: 640px) {
  .gap--4--mobile.gap--4--mobile {
    gap: var(--spacing-4);
  }
}

@media (max-width: 640px) {
  .gap--5--mobile.gap--5--mobile {
    gap: var(--spacing-5);
  }
}

@media (max-width: 640px) {
  .gap--6--mobile.gap--6--mobile {
    gap: var(--spacing-6);
  }
}

@media (max-width: 640px) {
  .gap--7--mobile.gap--7--mobile {
    gap: var(--spacing-7);
  }
}

@media (max-width: 640px) {
  .gap--8--mobile.gap--8--mobile {
    gap: var(--spacing-8);
  }
}

@media (max-width: 640px) {
  .gap--9--mobile.gap--9--mobile {
    gap: var(--spacing-9);
  }
}

@media (max-width: 640px) {
  .gap--10--mobile.gap--10--mobile {
    gap: var(--spacing-10);
  }
}

@media (max-width: 640px) {
  .gap--11--mobile.gap--11--mobile {
    gap: var(--spacing-11);
  }
}

@media (max-width: 640px) {
  .gap--12--mobile.gap--12--mobile {
    gap: var(--spacing-12);
  }
}

@media (max-width: 640px) {
  .gap--14--mobile.gap--14--mobile {
    gap: var(--spacing-14);
  }
}

@media (max-width: 640px) {
  .gap--16--mobile.gap--16--mobile {
    gap: var(--spacing-16);
  }
}

@media (max-width: 640px) {
  .gap--20--mobile.gap--20--mobile {
    gap: var(--spacing-20);
  }
}

@media (max-width: 640px) {
  .gap--24--mobile.gap--24--mobile {
    gap: var(--spacing-24);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .gap--tablet.gap--tablet {
    gap: var(--spacing-1);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .gap--0--tablet.gap--0--tablet {
    gap: var(--spacing-0);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .gap--1--tablet.gap--1--tablet {
    gap: var(--spacing-1);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .gap--2--tablet.gap--2--tablet {
    gap: var(--spacing-2);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .gap--3--tablet.gap--3--tablet {
    gap: var(--spacing-3);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .gap--4--tablet.gap--4--tablet {
    gap: var(--spacing-4);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .gap--5--tablet.gap--5--tablet {
    gap: var(--spacing-5);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .gap--6--tablet.gap--6--tablet {
    gap: var(--spacing-6);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .gap--7--tablet.gap--7--tablet {
    gap: var(--spacing-7);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .gap--8--tablet.gap--8--tablet {
    gap: var(--spacing-8);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .gap--9--tablet.gap--9--tablet {
    gap: var(--spacing-9);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .gap--10--tablet.gap--10--tablet {
    gap: var(--spacing-10);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .gap--11--tablet.gap--11--tablet {
    gap: var(--spacing-11);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .gap--12--tablet.gap--12--tablet {
    gap: var(--spacing-12);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .gap--14--tablet.gap--14--tablet {
    gap: var(--spacing-14);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .gap--16--tablet.gap--16--tablet {
    gap: var(--spacing-16);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .gap--20--tablet.gap--20--tablet {
    gap: var(--spacing-20);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .gap--24--tablet.gap--24--tablet {
    gap: var(--spacing-24);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .gap--large-tablet.gap--large-tablet {
    gap: var(--spacing-1);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .gap--0--large-tablet.gap--0--large-tablet {
    gap: var(--spacing-0);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .gap--1--large-tablet.gap--1--large-tablet {
    gap: var(--spacing-1);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .gap--2--large-tablet.gap--2--large-tablet {
    gap: var(--spacing-2);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .gap--3--large-tablet.gap--3--large-tablet {
    gap: var(--spacing-3);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .gap--4--large-tablet.gap--4--large-tablet {
    gap: var(--spacing-4);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .gap--5--large-tablet.gap--5--large-tablet {
    gap: var(--spacing-5);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .gap--6--large-tablet.gap--6--large-tablet {
    gap: var(--spacing-6);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .gap--7--large-tablet.gap--7--large-tablet {
    gap: var(--spacing-7);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .gap--8--large-tablet.gap--8--large-tablet {
    gap: var(--spacing-8);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .gap--9--large-tablet.gap--9--large-tablet {
    gap: var(--spacing-9);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .gap--10--large-tablet.gap--10--large-tablet {
    gap: var(--spacing-10);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .gap--11--large-tablet.gap--11--large-tablet {
    gap: var(--spacing-11);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .gap--12--large-tablet.gap--12--large-tablet {
    gap: var(--spacing-12);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .gap--14--large-tablet.gap--14--large-tablet {
    gap: var(--spacing-14);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .gap--16--large-tablet.gap--16--large-tablet {
    gap: var(--spacing-16);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .gap--20--large-tablet.gap--20--large-tablet {
    gap: var(--spacing-20);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .gap--24--large-tablet.gap--24--large-tablet {
    gap: var(--spacing-24);
  }
}

@media (min-width: 1201px) {
  .gap--laptop.gap--laptop {
    gap: var(--spacing-1);
  }
}

@media (min-width: 1201px) {
  .gap--0--laptop.gap--0--laptop {
    gap: var(--spacing-0);
  }
}

@media (min-width: 1201px) {
  .gap--1--laptop.gap--1--laptop {
    gap: var(--spacing-1);
  }
}

@media (min-width: 1201px) {
  .gap--2--laptop.gap--2--laptop {
    gap: var(--spacing-2);
  }
}

@media (min-width: 1201px) {
  .gap--3--laptop.gap--3--laptop {
    gap: var(--spacing-3);
  }
}

@media (min-width: 1201px) {
  .gap--4--laptop.gap--4--laptop {
    gap: var(--spacing-4);
  }
}

@media (min-width: 1201px) {
  .gap--5--laptop.gap--5--laptop {
    gap: var(--spacing-5);
  }
}

@media (min-width: 1201px) {
  .gap--6--laptop.gap--6--laptop {
    gap: var(--spacing-6);
  }
}

@media (min-width: 1201px) {
  .gap--7--laptop.gap--7--laptop {
    gap: var(--spacing-7);
  }
}

@media (min-width: 1201px) {
  .gap--8--laptop.gap--8--laptop {
    gap: var(--spacing-8);
  }
}

@media (min-width: 1201px) {
  .gap--9--laptop.gap--9--laptop {
    gap: var(--spacing-9);
  }
}

@media (min-width: 1201px) {
  .gap--10--laptop.gap--10--laptop {
    gap: var(--spacing-10);
  }
}

@media (min-width: 1201px) {
  .gap--11--laptop.gap--11--laptop {
    gap: var(--spacing-11);
  }
}

@media (min-width: 1201px) {
  .gap--12--laptop.gap--12--laptop {
    gap: var(--spacing-12);
  }
}

@media (min-width: 1201px) {
  .gap--14--laptop.gap--14--laptop {
    gap: var(--spacing-14);
  }
}

@media (min-width: 1201px) {
  .gap--16--laptop.gap--16--laptop {
    gap: var(--spacing-16);
  }
}

@media (min-width: 1201px) {
  .gap--20--laptop.gap--20--laptop {
    gap: var(--spacing-20);
  }
}

@media (min-width: 1201px) {
  .gap--24--laptop.gap--24--laptop {
    gap: var(--spacing-24);
  }
}

/* ==========================================================================
   04. FLEX
   ========================================================================== */
/* ===================================
  Direction
  =================================== */
.f-row.f-row {
  display: flex;
  flex-direction: row;
}

@media (max-width: 640px) {
  .f-row.f-row--mobile.f-row.f-row--mobile {
    display: flex;
    flex-direction: row;
  }
}

.f-col.f-col {
  display: flex;
  flex-direction: column;
}

@media (max-width: 640px) {
  .f-col.f-col--mobile.f-col.f-col--mobile {
    display: flex;
    flex-direction: column;
  }
}

@media screen and (max-width: 821px) {
  .f-pivot {
    flex-direction: column !important;
  }
  .f-pivot .select-input-container {
    width: 100% !important;
  }
}

@media screen and (max-width: 640px) {
  .f-pivot-p {
    flex-direction: column !important;
  }
  .f-pivot-p .select-input-container {
    width: 100% !important;
  }
}

.f-grow {
  flex-grow: 1;
}

/* ===================================
  Align
  =================================== */
.align--center.align--center {
  align-items: center;
}

@media (max-width: 640px) {
  .align--center.align--center--mobile.align--center.align--center--mobile {
    align-items: center;
  }
}

.align--stretch.align--stretch {
  align-items: stretch;
}

@media (max-width: 640px) {
  .align--stretch.align--stretch--mobile.align--stretch.align--stretch--mobile {
    align-items: stretch;
  }
}

.align--start.align--start {
  align-items: start;
}

@media (max-width: 640px) {
  .align--start.align--start--mobile.align--start.align--start--mobile {
    align-items: start;
  }
}

.align--end.align--end {
  align-items: end;
}

@media (max-width: 640px) {
  .align--end.align--end--mobile.align--end.align--end--mobile {
    align-items: end;
  }
}

.align-self--center.align-self--center {
  align-self: center;
}

@media (max-width: 640px) {
  .align-self--center.align-self--center--mobile.align-self--center.align-self--center--mobile {
    align-self: center;
  }
}

.align-self--end.align-self--end {
  align-self: end;
}

@media (max-width: 640px) {
  .align-self--end.align-self--end--mobile.align-self--end.align-self--end--mobile {
    align-self: end;
  }
}

/* ===================================
  Justify
  =================================== */
.justify--flex-start.justify--flex-start {
  justify-content: flex-start;
}

@media (max-width: 640px) {
  .justify--flex-start.justify--flex-start--mobile.justify--flex-start.justify--flex-start--mobile {
    justify-content: flex-start;
  }
}

.justify--between.justify--between {
  justify-content: space-between;
}

@media (max-width: 640px) {
  .justify--between.justify--between--mobile.justify--between.justify--between--mobile {
    justify-content: space-between;
  }
}

.justify--evenly.justify--evenly {
  justify-content: space-evenly;
}

@media (max-width: 640px) {
  .justify--evenly.justify--evenly--mobile.justify--evenly.justify--evenly--mobile {
    justify-content: space-evenly;
  }
}

.justify--end.justify--end {
  justify-content: end;
}

@media (max-width: 640px) {
  .justify--end.justify--end--mobile.justify--end.justify--end--mobile {
    justify-content: end;
  }
}

.justify-self--center.justify-self--center {
  justify-self: center;
}

@media (max-width: 640px) {
  .justify-self--center.justify-self--center--mobile.justify-self--center.justify-self--center--mobile {
    justify-self: center;
  }
}

/* ==========================================================================
   04. GRID
   ========================================================================== */
.grid-cols--1 {
  display: grid;
  gap: var(--spacing-8);
  grid-template-columns: repeat(1, 1fr);
}

.grid-cols--2 {
  display: grid;
  gap: var(--spacing-8);
  grid-template-columns: repeat(2, 1fr);
}

.grid-cols--3 {
  display: grid;
  gap: var(--spacing-8);
  grid-template-columns: repeat(3, 1fr);
}

.grid-cols--4 {
  display: grid;
  gap: var(--spacing-8);
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 640px) {
  .grid-cols--1--mobile.grid-cols--1--mobile {
    display: grid;
    gap: var(--spacing-8);
    grid-template-columns: repeat(1, 1fr);
  }
}

@media (max-width: 640px) {
  .grid-cols--2--mobile.grid-cols--2--mobile {
    display: grid;
    gap: var(--spacing-8);
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .grid-cols--3--mobile.grid-cols--3--mobile {
    display: grid;
    gap: var(--spacing-8);
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 640px) {
  .grid-cols--4--mobile.grid-cols--4--mobile {
    display: grid;
    gap: var(--spacing-8);
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .grid-cols--1--tablet.grid-cols--1--tablet {
    display: grid;
    gap: var(--spacing-8);
    grid-template-columns: repeat(1, 1fr);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .grid-cols--2--tablet.grid-cols--2--tablet {
    display: grid;
    gap: var(--spacing-8);
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .grid-cols--3--tablet.grid-cols--3--tablet {
    display: grid;
    gap: var(--spacing-8);
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .grid-cols--4--tablet.grid-cols--4--tablet {
    display: grid;
    gap: var(--spacing-8);
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .grid-cols--1--large-tablet.grid-cols--1--large-tablet {
    display: grid;
    gap: var(--spacing-8);
    grid-template-columns: repeat(1, 1fr);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .grid-cols--2--large-tablet.grid-cols--2--large-tablet {
    display: grid;
    gap: var(--spacing-8);
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .grid-cols--3--large-tablet.grid-cols--3--large-tablet {
    display: grid;
    gap: var(--spacing-8);
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .grid-cols--4--large-tablet.grid-cols--4--large-tablet {
    display: grid;
    gap: var(--spacing-8);
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1201px) {
  .grid-cols--1--laptop.grid-cols--1--laptop {
    display: grid;
    gap: var(--spacing-8);
    grid-template-columns: repeat(1, 1fr);
  }
}

@media (min-width: 1201px) {
  .grid-cols--2--laptop.grid-cols--2--laptop {
    display: grid;
    gap: var(--spacing-8);
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1201px) {
  .grid-cols--3--laptop.grid-cols--3--laptop {
    display: grid;
    gap: var(--spacing-8);
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1201px) {
  .grid-cols--4--laptop.grid-cols--4--laptop {
    display: grid;
    gap: var(--spacing-8);
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ==========================================================================
   06. POSITION
   ========================================================================== */
.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.top {
  top: var(--spacing-1);
}

.top--0 {
  top: var(--spacing-0);
}

.top--1 {
  top: var(--spacing-1);
}

.top--2 {
  top: var(--spacing-2);
}

.top--3 {
  top: var(--spacing-3);
}

.top--4 {
  top: var(--spacing-4);
}

.top--5 {
  top: var(--spacing-5);
}

.top--6 {
  top: var(--spacing-6);
}

.top--7 {
  top: var(--spacing-7);
}

.top--8 {
  top: var(--spacing-8);
}

.top--9 {
  top: var(--spacing-9);
}

.top--10 {
  top: var(--spacing-10);
}

.top--11 {
  top: var(--spacing-11);
}

.top--12 {
  top: var(--spacing-12);
}

.top--14 {
  top: var(--spacing-14);
}

.top--16 {
  top: var(--spacing-16);
}

.top--20 {
  top: var(--spacing-20);
}

.top--24 {
  top: var(--spacing-24);
}

@media (max-width: 640px) {
  .top--mobile.top--mobile {
    top: var(--spacing-1);
  }
}

@media (max-width: 640px) {
  .top--0--mobile.top--0--mobile {
    top: var(--spacing-0);
  }
}

@media (max-width: 640px) {
  .top--1--mobile.top--1--mobile {
    top: var(--spacing-1);
  }
}

@media (max-width: 640px) {
  .top--2--mobile.top--2--mobile {
    top: var(--spacing-2);
  }
}

@media (max-width: 640px) {
  .top--3--mobile.top--3--mobile {
    top: var(--spacing-3);
  }
}

@media (max-width: 640px) {
  .top--4--mobile.top--4--mobile {
    top: var(--spacing-4);
  }
}

@media (max-width: 640px) {
  .top--5--mobile.top--5--mobile {
    top: var(--spacing-5);
  }
}

@media (max-width: 640px) {
  .top--6--mobile.top--6--mobile {
    top: var(--spacing-6);
  }
}

@media (max-width: 640px) {
  .top--7--mobile.top--7--mobile {
    top: var(--spacing-7);
  }
}

@media (max-width: 640px) {
  .top--8--mobile.top--8--mobile {
    top: var(--spacing-8);
  }
}

@media (max-width: 640px) {
  .top--9--mobile.top--9--mobile {
    top: var(--spacing-9);
  }
}

@media (max-width: 640px) {
  .top--10--mobile.top--10--mobile {
    top: var(--spacing-10);
  }
}

@media (max-width: 640px) {
  .top--11--mobile.top--11--mobile {
    top: var(--spacing-11);
  }
}

@media (max-width: 640px) {
  .top--12--mobile.top--12--mobile {
    top: var(--spacing-12);
  }
}

@media (max-width: 640px) {
  .top--14--mobile.top--14--mobile {
    top: var(--spacing-14);
  }
}

@media (max-width: 640px) {
  .top--16--mobile.top--16--mobile {
    top: var(--spacing-16);
  }
}

@media (max-width: 640px) {
  .top--20--mobile.top--20--mobile {
    top: var(--spacing-20);
  }
}

@media (max-width: 640px) {
  .top--24--mobile.top--24--mobile {
    top: var(--spacing-24);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .top--tablet.top--tablet {
    top: var(--spacing-1);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .top--0--tablet.top--0--tablet {
    top: var(--spacing-0);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .top--1--tablet.top--1--tablet {
    top: var(--spacing-1);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .top--2--tablet.top--2--tablet {
    top: var(--spacing-2);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .top--3--tablet.top--3--tablet {
    top: var(--spacing-3);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .top--4--tablet.top--4--tablet {
    top: var(--spacing-4);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .top--5--tablet.top--5--tablet {
    top: var(--spacing-5);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .top--6--tablet.top--6--tablet {
    top: var(--spacing-6);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .top--7--tablet.top--7--tablet {
    top: var(--spacing-7);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .top--8--tablet.top--8--tablet {
    top: var(--spacing-8);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .top--9--tablet.top--9--tablet {
    top: var(--spacing-9);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .top--10--tablet.top--10--tablet {
    top: var(--spacing-10);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .top--11--tablet.top--11--tablet {
    top: var(--spacing-11);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .top--12--tablet.top--12--tablet {
    top: var(--spacing-12);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .top--14--tablet.top--14--tablet {
    top: var(--spacing-14);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .top--16--tablet.top--16--tablet {
    top: var(--spacing-16);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .top--20--tablet.top--20--tablet {
    top: var(--spacing-20);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .top--24--tablet.top--24--tablet {
    top: var(--spacing-24);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .top--large-tablet.top--large-tablet {
    top: var(--spacing-1);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .top--0--large-tablet.top--0--large-tablet {
    top: var(--spacing-0);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .top--1--large-tablet.top--1--large-tablet {
    top: var(--spacing-1);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .top--2--large-tablet.top--2--large-tablet {
    top: var(--spacing-2);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .top--3--large-tablet.top--3--large-tablet {
    top: var(--spacing-3);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .top--4--large-tablet.top--4--large-tablet {
    top: var(--spacing-4);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .top--5--large-tablet.top--5--large-tablet {
    top: var(--spacing-5);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .top--6--large-tablet.top--6--large-tablet {
    top: var(--spacing-6);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .top--7--large-tablet.top--7--large-tablet {
    top: var(--spacing-7);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .top--8--large-tablet.top--8--large-tablet {
    top: var(--spacing-8);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .top--9--large-tablet.top--9--large-tablet {
    top: var(--spacing-9);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .top--10--large-tablet.top--10--large-tablet {
    top: var(--spacing-10);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .top--11--large-tablet.top--11--large-tablet {
    top: var(--spacing-11);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .top--12--large-tablet.top--12--large-tablet {
    top: var(--spacing-12);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .top--14--large-tablet.top--14--large-tablet {
    top: var(--spacing-14);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .top--16--large-tablet.top--16--large-tablet {
    top: var(--spacing-16);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .top--20--large-tablet.top--20--large-tablet {
    top: var(--spacing-20);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .top--24--large-tablet.top--24--large-tablet {
    top: var(--spacing-24);
  }
}

@media (min-width: 1201px) {
  .top--laptop.top--laptop {
    top: var(--spacing-1);
  }
}

@media (min-width: 1201px) {
  .top--0--laptop.top--0--laptop {
    top: var(--spacing-0);
  }
}

@media (min-width: 1201px) {
  .top--1--laptop.top--1--laptop {
    top: var(--spacing-1);
  }
}

@media (min-width: 1201px) {
  .top--2--laptop.top--2--laptop {
    top: var(--spacing-2);
  }
}

@media (min-width: 1201px) {
  .top--3--laptop.top--3--laptop {
    top: var(--spacing-3);
  }
}

@media (min-width: 1201px) {
  .top--4--laptop.top--4--laptop {
    top: var(--spacing-4);
  }
}

@media (min-width: 1201px) {
  .top--5--laptop.top--5--laptop {
    top: var(--spacing-5);
  }
}

@media (min-width: 1201px) {
  .top--6--laptop.top--6--laptop {
    top: var(--spacing-6);
  }
}

@media (min-width: 1201px) {
  .top--7--laptop.top--7--laptop {
    top: var(--spacing-7);
  }
}

@media (min-width: 1201px) {
  .top--8--laptop.top--8--laptop {
    top: var(--spacing-8);
  }
}

@media (min-width: 1201px) {
  .top--9--laptop.top--9--laptop {
    top: var(--spacing-9);
  }
}

@media (min-width: 1201px) {
  .top--10--laptop.top--10--laptop {
    top: var(--spacing-10);
  }
}

@media (min-width: 1201px) {
  .top--11--laptop.top--11--laptop {
    top: var(--spacing-11);
  }
}

@media (min-width: 1201px) {
  .top--12--laptop.top--12--laptop {
    top: var(--spacing-12);
  }
}

@media (min-width: 1201px) {
  .top--14--laptop.top--14--laptop {
    top: var(--spacing-14);
  }
}

@media (min-width: 1201px) {
  .top--16--laptop.top--16--laptop {
    top: var(--spacing-16);
  }
}

@media (min-width: 1201px) {
  .top--20--laptop.top--20--laptop {
    top: var(--spacing-20);
  }
}

@media (min-width: 1201px) {
  .top--24--laptop.top--24--laptop {
    top: var(--spacing-24);
  }
}

.bottom {
  bottom: var(--spacing-1);
}

.bottom--0 {
  bottom: var(--spacing-0);
}

.bottom--1 {
  bottom: var(--spacing-1);
}

.bottom--2 {
  bottom: var(--spacing-2);
}

.bottom--3 {
  bottom: var(--spacing-3);
}

.bottom--4 {
  bottom: var(--spacing-4);
}

.bottom--5 {
  bottom: var(--spacing-5);
}

.bottom--6 {
  bottom: var(--spacing-6);
}

.bottom--7 {
  bottom: var(--spacing-7);
}

.bottom--8 {
  bottom: var(--spacing-8);
}

.bottom--9 {
  bottom: var(--spacing-9);
}

.bottom--10 {
  bottom: var(--spacing-10);
}

.bottom--11 {
  bottom: var(--spacing-11);
}

.bottom--12 {
  bottom: var(--spacing-12);
}

.bottom--14 {
  bottom: var(--spacing-14);
}

.bottom--16 {
  bottom: var(--spacing-16);
}

.bottom--20 {
  bottom: var(--spacing-20);
}

.bottom--24 {
  bottom: var(--spacing-24);
}

@media (max-width: 640px) {
  .bottom--mobile.bottom--mobile {
    bottom: var(--spacing-1);
  }
}

@media (max-width: 640px) {
  .bottom--0--mobile.bottom--0--mobile {
    bottom: var(--spacing-0);
  }
}

@media (max-width: 640px) {
  .bottom--1--mobile.bottom--1--mobile {
    bottom: var(--spacing-1);
  }
}

@media (max-width: 640px) {
  .bottom--2--mobile.bottom--2--mobile {
    bottom: var(--spacing-2);
  }
}

@media (max-width: 640px) {
  .bottom--3--mobile.bottom--3--mobile {
    bottom: var(--spacing-3);
  }
}

@media (max-width: 640px) {
  .bottom--4--mobile.bottom--4--mobile {
    bottom: var(--spacing-4);
  }
}

@media (max-width: 640px) {
  .bottom--5--mobile.bottom--5--mobile {
    bottom: var(--spacing-5);
  }
}

@media (max-width: 640px) {
  .bottom--6--mobile.bottom--6--mobile {
    bottom: var(--spacing-6);
  }
}

@media (max-width: 640px) {
  .bottom--7--mobile.bottom--7--mobile {
    bottom: var(--spacing-7);
  }
}

@media (max-width: 640px) {
  .bottom--8--mobile.bottom--8--mobile {
    bottom: var(--spacing-8);
  }
}

@media (max-width: 640px) {
  .bottom--9--mobile.bottom--9--mobile {
    bottom: var(--spacing-9);
  }
}

@media (max-width: 640px) {
  .bottom--10--mobile.bottom--10--mobile {
    bottom: var(--spacing-10);
  }
}

@media (max-width: 640px) {
  .bottom--11--mobile.bottom--11--mobile {
    bottom: var(--spacing-11);
  }
}

@media (max-width: 640px) {
  .bottom--12--mobile.bottom--12--mobile {
    bottom: var(--spacing-12);
  }
}

@media (max-width: 640px) {
  .bottom--14--mobile.bottom--14--mobile {
    bottom: var(--spacing-14);
  }
}

@media (max-width: 640px) {
  .bottom--16--mobile.bottom--16--mobile {
    bottom: var(--spacing-16);
  }
}

@media (max-width: 640px) {
  .bottom--20--mobile.bottom--20--mobile {
    bottom: var(--spacing-20);
  }
}

@media (max-width: 640px) {
  .bottom--24--mobile.bottom--24--mobile {
    bottom: var(--spacing-24);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .bottom--tablet.bottom--tablet {
    bottom: var(--spacing-1);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .bottom--0--tablet.bottom--0--tablet {
    bottom: var(--spacing-0);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .bottom--1--tablet.bottom--1--tablet {
    bottom: var(--spacing-1);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .bottom--2--tablet.bottom--2--tablet {
    bottom: var(--spacing-2);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .bottom--3--tablet.bottom--3--tablet {
    bottom: var(--spacing-3);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .bottom--4--tablet.bottom--4--tablet {
    bottom: var(--spacing-4);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .bottom--5--tablet.bottom--5--tablet {
    bottom: var(--spacing-5);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .bottom--6--tablet.bottom--6--tablet {
    bottom: var(--spacing-6);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .bottom--7--tablet.bottom--7--tablet {
    bottom: var(--spacing-7);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .bottom--8--tablet.bottom--8--tablet {
    bottom: var(--spacing-8);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .bottom--9--tablet.bottom--9--tablet {
    bottom: var(--spacing-9);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .bottom--10--tablet.bottom--10--tablet {
    bottom: var(--spacing-10);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .bottom--11--tablet.bottom--11--tablet {
    bottom: var(--spacing-11);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .bottom--12--tablet.bottom--12--tablet {
    bottom: var(--spacing-12);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .bottom--14--tablet.bottom--14--tablet {
    bottom: var(--spacing-14);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .bottom--16--tablet.bottom--16--tablet {
    bottom: var(--spacing-16);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .bottom--20--tablet.bottom--20--tablet {
    bottom: var(--spacing-20);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .bottom--24--tablet.bottom--24--tablet {
    bottom: var(--spacing-24);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .bottom--large-tablet.bottom--large-tablet {
    bottom: var(--spacing-1);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .bottom--0--large-tablet.bottom--0--large-tablet {
    bottom: var(--spacing-0);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .bottom--1--large-tablet.bottom--1--large-tablet {
    bottom: var(--spacing-1);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .bottom--2--large-tablet.bottom--2--large-tablet {
    bottom: var(--spacing-2);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .bottom--3--large-tablet.bottom--3--large-tablet {
    bottom: var(--spacing-3);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .bottom--4--large-tablet.bottom--4--large-tablet {
    bottom: var(--spacing-4);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .bottom--5--large-tablet.bottom--5--large-tablet {
    bottom: var(--spacing-5);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .bottom--6--large-tablet.bottom--6--large-tablet {
    bottom: var(--spacing-6);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .bottom--7--large-tablet.bottom--7--large-tablet {
    bottom: var(--spacing-7);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .bottom--8--large-tablet.bottom--8--large-tablet {
    bottom: var(--spacing-8);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .bottom--9--large-tablet.bottom--9--large-tablet {
    bottom: var(--spacing-9);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .bottom--10--large-tablet.bottom--10--large-tablet {
    bottom: var(--spacing-10);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .bottom--11--large-tablet.bottom--11--large-tablet {
    bottom: var(--spacing-11);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .bottom--12--large-tablet.bottom--12--large-tablet {
    bottom: var(--spacing-12);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .bottom--14--large-tablet.bottom--14--large-tablet {
    bottom: var(--spacing-14);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .bottom--16--large-tablet.bottom--16--large-tablet {
    bottom: var(--spacing-16);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .bottom--20--large-tablet.bottom--20--large-tablet {
    bottom: var(--spacing-20);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .bottom--24--large-tablet.bottom--24--large-tablet {
    bottom: var(--spacing-24);
  }
}

@media (min-width: 1201px) {
  .bottom--laptop.bottom--laptop {
    bottom: var(--spacing-1);
  }
}

@media (min-width: 1201px) {
  .bottom--0--laptop.bottom--0--laptop {
    bottom: var(--spacing-0);
  }
}

@media (min-width: 1201px) {
  .bottom--1--laptop.bottom--1--laptop {
    bottom: var(--spacing-1);
  }
}

@media (min-width: 1201px) {
  .bottom--2--laptop.bottom--2--laptop {
    bottom: var(--spacing-2);
  }
}

@media (min-width: 1201px) {
  .bottom--3--laptop.bottom--3--laptop {
    bottom: var(--spacing-3);
  }
}

@media (min-width: 1201px) {
  .bottom--4--laptop.bottom--4--laptop {
    bottom: var(--spacing-4);
  }
}

@media (min-width: 1201px) {
  .bottom--5--laptop.bottom--5--laptop {
    bottom: var(--spacing-5);
  }
}

@media (min-width: 1201px) {
  .bottom--6--laptop.bottom--6--laptop {
    bottom: var(--spacing-6);
  }
}

@media (min-width: 1201px) {
  .bottom--7--laptop.bottom--7--laptop {
    bottom: var(--spacing-7);
  }
}

@media (min-width: 1201px) {
  .bottom--8--laptop.bottom--8--laptop {
    bottom: var(--spacing-8);
  }
}

@media (min-width: 1201px) {
  .bottom--9--laptop.bottom--9--laptop {
    bottom: var(--spacing-9);
  }
}

@media (min-width: 1201px) {
  .bottom--10--laptop.bottom--10--laptop {
    bottom: var(--spacing-10);
  }
}

@media (min-width: 1201px) {
  .bottom--11--laptop.bottom--11--laptop {
    bottom: var(--spacing-11);
  }
}

@media (min-width: 1201px) {
  .bottom--12--laptop.bottom--12--laptop {
    bottom: var(--spacing-12);
  }
}

@media (min-width: 1201px) {
  .bottom--14--laptop.bottom--14--laptop {
    bottom: var(--spacing-14);
  }
}

@media (min-width: 1201px) {
  .bottom--16--laptop.bottom--16--laptop {
    bottom: var(--spacing-16);
  }
}

@media (min-width: 1201px) {
  .bottom--20--laptop.bottom--20--laptop {
    bottom: var(--spacing-20);
  }
}

@media (min-width: 1201px) {
  .bottom--24--laptop.bottom--24--laptop {
    bottom: var(--spacing-24);
  }
}

.left {
  left: var(--spacing-1);
}

.left--0 {
  left: var(--spacing-0);
}

.left--1 {
  left: var(--spacing-1);
}

.left--2 {
  left: var(--spacing-2);
}

.left--3 {
  left: var(--spacing-3);
}

.left--4 {
  left: var(--spacing-4);
}

.left--5 {
  left: var(--spacing-5);
}

.left--6 {
  left: var(--spacing-6);
}

.left--7 {
  left: var(--spacing-7);
}

.left--8 {
  left: var(--spacing-8);
}

.left--9 {
  left: var(--spacing-9);
}

.left--10 {
  left: var(--spacing-10);
}

.left--11 {
  left: var(--spacing-11);
}

.left--12 {
  left: var(--spacing-12);
}

.left--14 {
  left: var(--spacing-14);
}

.left--16 {
  left: var(--spacing-16);
}

.left--20 {
  left: var(--spacing-20);
}

.left--24 {
  left: var(--spacing-24);
}

@media (max-width: 640px) {
  .left--mobile.left--mobile {
    left: var(--spacing-1);
  }
}

@media (max-width: 640px) {
  .left--0--mobile.left--0--mobile {
    left: var(--spacing-0);
  }
}

@media (max-width: 640px) {
  .left--1--mobile.left--1--mobile {
    left: var(--spacing-1);
  }
}

@media (max-width: 640px) {
  .left--2--mobile.left--2--mobile {
    left: var(--spacing-2);
  }
}

@media (max-width: 640px) {
  .left--3--mobile.left--3--mobile {
    left: var(--spacing-3);
  }
}

@media (max-width: 640px) {
  .left--4--mobile.left--4--mobile {
    left: var(--spacing-4);
  }
}

@media (max-width: 640px) {
  .left--5--mobile.left--5--mobile {
    left: var(--spacing-5);
  }
}

@media (max-width: 640px) {
  .left--6--mobile.left--6--mobile {
    left: var(--spacing-6);
  }
}

@media (max-width: 640px) {
  .left--7--mobile.left--7--mobile {
    left: var(--spacing-7);
  }
}

@media (max-width: 640px) {
  .left--8--mobile.left--8--mobile {
    left: var(--spacing-8);
  }
}

@media (max-width: 640px) {
  .left--9--mobile.left--9--mobile {
    left: var(--spacing-9);
  }
}

@media (max-width: 640px) {
  .left--10--mobile.left--10--mobile {
    left: var(--spacing-10);
  }
}

@media (max-width: 640px) {
  .left--11--mobile.left--11--mobile {
    left: var(--spacing-11);
  }
}

@media (max-width: 640px) {
  .left--12--mobile.left--12--mobile {
    left: var(--spacing-12);
  }
}

@media (max-width: 640px) {
  .left--14--mobile.left--14--mobile {
    left: var(--spacing-14);
  }
}

@media (max-width: 640px) {
  .left--16--mobile.left--16--mobile {
    left: var(--spacing-16);
  }
}

@media (max-width: 640px) {
  .left--20--mobile.left--20--mobile {
    left: var(--spacing-20);
  }
}

@media (max-width: 640px) {
  .left--24--mobile.left--24--mobile {
    left: var(--spacing-24);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .left--tablet.left--tablet {
    left: var(--spacing-1);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .left--0--tablet.left--0--tablet {
    left: var(--spacing-0);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .left--1--tablet.left--1--tablet {
    left: var(--spacing-1);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .left--2--tablet.left--2--tablet {
    left: var(--spacing-2);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .left--3--tablet.left--3--tablet {
    left: var(--spacing-3);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .left--4--tablet.left--4--tablet {
    left: var(--spacing-4);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .left--5--tablet.left--5--tablet {
    left: var(--spacing-5);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .left--6--tablet.left--6--tablet {
    left: var(--spacing-6);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .left--7--tablet.left--7--tablet {
    left: var(--spacing-7);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .left--8--tablet.left--8--tablet {
    left: var(--spacing-8);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .left--9--tablet.left--9--tablet {
    left: var(--spacing-9);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .left--10--tablet.left--10--tablet {
    left: var(--spacing-10);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .left--11--tablet.left--11--tablet {
    left: var(--spacing-11);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .left--12--tablet.left--12--tablet {
    left: var(--spacing-12);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .left--14--tablet.left--14--tablet {
    left: var(--spacing-14);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .left--16--tablet.left--16--tablet {
    left: var(--spacing-16);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .left--20--tablet.left--20--tablet {
    left: var(--spacing-20);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .left--24--tablet.left--24--tablet {
    left: var(--spacing-24);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .left--large-tablet.left--large-tablet {
    left: var(--spacing-1);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .left--0--large-tablet.left--0--large-tablet {
    left: var(--spacing-0);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .left--1--large-tablet.left--1--large-tablet {
    left: var(--spacing-1);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .left--2--large-tablet.left--2--large-tablet {
    left: var(--spacing-2);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .left--3--large-tablet.left--3--large-tablet {
    left: var(--spacing-3);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .left--4--large-tablet.left--4--large-tablet {
    left: var(--spacing-4);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .left--5--large-tablet.left--5--large-tablet {
    left: var(--spacing-5);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .left--6--large-tablet.left--6--large-tablet {
    left: var(--spacing-6);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .left--7--large-tablet.left--7--large-tablet {
    left: var(--spacing-7);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .left--8--large-tablet.left--8--large-tablet {
    left: var(--spacing-8);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .left--9--large-tablet.left--9--large-tablet {
    left: var(--spacing-9);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .left--10--large-tablet.left--10--large-tablet {
    left: var(--spacing-10);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .left--11--large-tablet.left--11--large-tablet {
    left: var(--spacing-11);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .left--12--large-tablet.left--12--large-tablet {
    left: var(--spacing-12);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .left--14--large-tablet.left--14--large-tablet {
    left: var(--spacing-14);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .left--16--large-tablet.left--16--large-tablet {
    left: var(--spacing-16);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .left--20--large-tablet.left--20--large-tablet {
    left: var(--spacing-20);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .left--24--large-tablet.left--24--large-tablet {
    left: var(--spacing-24);
  }
}

@media (min-width: 1201px) {
  .left--laptop.left--laptop {
    left: var(--spacing-1);
  }
}

@media (min-width: 1201px) {
  .left--0--laptop.left--0--laptop {
    left: var(--spacing-0);
  }
}

@media (min-width: 1201px) {
  .left--1--laptop.left--1--laptop {
    left: var(--spacing-1);
  }
}

@media (min-width: 1201px) {
  .left--2--laptop.left--2--laptop {
    left: var(--spacing-2);
  }
}

@media (min-width: 1201px) {
  .left--3--laptop.left--3--laptop {
    left: var(--spacing-3);
  }
}

@media (min-width: 1201px) {
  .left--4--laptop.left--4--laptop {
    left: var(--spacing-4);
  }
}

@media (min-width: 1201px) {
  .left--5--laptop.left--5--laptop {
    left: var(--spacing-5);
  }
}

@media (min-width: 1201px) {
  .left--6--laptop.left--6--laptop {
    left: var(--spacing-6);
  }
}

@media (min-width: 1201px) {
  .left--7--laptop.left--7--laptop {
    left: var(--spacing-7);
  }
}

@media (min-width: 1201px) {
  .left--8--laptop.left--8--laptop {
    left: var(--spacing-8);
  }
}

@media (min-width: 1201px) {
  .left--9--laptop.left--9--laptop {
    left: var(--spacing-9);
  }
}

@media (min-width: 1201px) {
  .left--10--laptop.left--10--laptop {
    left: var(--spacing-10);
  }
}

@media (min-width: 1201px) {
  .left--11--laptop.left--11--laptop {
    left: var(--spacing-11);
  }
}

@media (min-width: 1201px) {
  .left--12--laptop.left--12--laptop {
    left: var(--spacing-12);
  }
}

@media (min-width: 1201px) {
  .left--14--laptop.left--14--laptop {
    left: var(--spacing-14);
  }
}

@media (min-width: 1201px) {
  .left--16--laptop.left--16--laptop {
    left: var(--spacing-16);
  }
}

@media (min-width: 1201px) {
  .left--20--laptop.left--20--laptop {
    left: var(--spacing-20);
  }
}

@media (min-width: 1201px) {
  .left--24--laptop.left--24--laptop {
    left: var(--spacing-24);
  }
}

.right {
  right: var(--spacing-1);
}

.right--0 {
  right: var(--spacing-0);
}

.right--1 {
  right: var(--spacing-1);
}

.right--2 {
  right: var(--spacing-2);
}

.right--3 {
  right: var(--spacing-3);
}

.right--4 {
  right: var(--spacing-4);
}

.right--5 {
  right: var(--spacing-5);
}

.right--6 {
  right: var(--spacing-6);
}

.right--7 {
  right: var(--spacing-7);
}

.right--8 {
  right: var(--spacing-8);
}

.right--9 {
  right: var(--spacing-9);
}

.right--10 {
  right: var(--spacing-10);
}

.right--11 {
  right: var(--spacing-11);
}

.right--12 {
  right: var(--spacing-12);
}

.right--14 {
  right: var(--spacing-14);
}

.right--16 {
  right: var(--spacing-16);
}

.right--20 {
  right: var(--spacing-20);
}

.right--24 {
  right: var(--spacing-24);
}

@media (max-width: 640px) {
  .right--mobile.right--mobile {
    right: var(--spacing-1);
  }
}

@media (max-width: 640px) {
  .right--0--mobile.right--0--mobile {
    right: var(--spacing-0);
  }
}

@media (max-width: 640px) {
  .right--1--mobile.right--1--mobile {
    right: var(--spacing-1);
  }
}

@media (max-width: 640px) {
  .right--2--mobile.right--2--mobile {
    right: var(--spacing-2);
  }
}

@media (max-width: 640px) {
  .right--3--mobile.right--3--mobile {
    right: var(--spacing-3);
  }
}

@media (max-width: 640px) {
  .right--4--mobile.right--4--mobile {
    right: var(--spacing-4);
  }
}

@media (max-width: 640px) {
  .right--5--mobile.right--5--mobile {
    right: var(--spacing-5);
  }
}

@media (max-width: 640px) {
  .right--6--mobile.right--6--mobile {
    right: var(--spacing-6);
  }
}

@media (max-width: 640px) {
  .right--7--mobile.right--7--mobile {
    right: var(--spacing-7);
  }
}

@media (max-width: 640px) {
  .right--8--mobile.right--8--mobile {
    right: var(--spacing-8);
  }
}

@media (max-width: 640px) {
  .right--9--mobile.right--9--mobile {
    right: var(--spacing-9);
  }
}

@media (max-width: 640px) {
  .right--10--mobile.right--10--mobile {
    right: var(--spacing-10);
  }
}

@media (max-width: 640px) {
  .right--11--mobile.right--11--mobile {
    right: var(--spacing-11);
  }
}

@media (max-width: 640px) {
  .right--12--mobile.right--12--mobile {
    right: var(--spacing-12);
  }
}

@media (max-width: 640px) {
  .right--14--mobile.right--14--mobile {
    right: var(--spacing-14);
  }
}

@media (max-width: 640px) {
  .right--16--mobile.right--16--mobile {
    right: var(--spacing-16);
  }
}

@media (max-width: 640px) {
  .right--20--mobile.right--20--mobile {
    right: var(--spacing-20);
  }
}

@media (max-width: 640px) {
  .right--24--mobile.right--24--mobile {
    right: var(--spacing-24);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .right--tablet.right--tablet {
    right: var(--spacing-1);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .right--0--tablet.right--0--tablet {
    right: var(--spacing-0);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .right--1--tablet.right--1--tablet {
    right: var(--spacing-1);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .right--2--tablet.right--2--tablet {
    right: var(--spacing-2);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .right--3--tablet.right--3--tablet {
    right: var(--spacing-3);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .right--4--tablet.right--4--tablet {
    right: var(--spacing-4);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .right--5--tablet.right--5--tablet {
    right: var(--spacing-5);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .right--6--tablet.right--6--tablet {
    right: var(--spacing-6);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .right--7--tablet.right--7--tablet {
    right: var(--spacing-7);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .right--8--tablet.right--8--tablet {
    right: var(--spacing-8);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .right--9--tablet.right--9--tablet {
    right: var(--spacing-9);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .right--10--tablet.right--10--tablet {
    right: var(--spacing-10);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .right--11--tablet.right--11--tablet {
    right: var(--spacing-11);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .right--12--tablet.right--12--tablet {
    right: var(--spacing-12);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .right--14--tablet.right--14--tablet {
    right: var(--spacing-14);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .right--16--tablet.right--16--tablet {
    right: var(--spacing-16);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .right--20--tablet.right--20--tablet {
    right: var(--spacing-20);
  }
}

@media (min-width: 641px) and (max-width: 821px) {
  .right--24--tablet.right--24--tablet {
    right: var(--spacing-24);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .right--large-tablet.right--large-tablet {
    right: var(--spacing-1);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .right--0--large-tablet.right--0--large-tablet {
    right: var(--spacing-0);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .right--1--large-tablet.right--1--large-tablet {
    right: var(--spacing-1);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .right--2--large-tablet.right--2--large-tablet {
    right: var(--spacing-2);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .right--3--large-tablet.right--3--large-tablet {
    right: var(--spacing-3);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .right--4--large-tablet.right--4--large-tablet {
    right: var(--spacing-4);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .right--5--large-tablet.right--5--large-tablet {
    right: var(--spacing-5);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .right--6--large-tablet.right--6--large-tablet {
    right: var(--spacing-6);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .right--7--large-tablet.right--7--large-tablet {
    right: var(--spacing-7);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .right--8--large-tablet.right--8--large-tablet {
    right: var(--spacing-8);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .right--9--large-tablet.right--9--large-tablet {
    right: var(--spacing-9);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .right--10--large-tablet.right--10--large-tablet {
    right: var(--spacing-10);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .right--11--large-tablet.right--11--large-tablet {
    right: var(--spacing-11);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .right--12--large-tablet.right--12--large-tablet {
    right: var(--spacing-12);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .right--14--large-tablet.right--14--large-tablet {
    right: var(--spacing-14);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .right--16--large-tablet.right--16--large-tablet {
    right: var(--spacing-16);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .right--20--large-tablet.right--20--large-tablet {
    right: var(--spacing-20);
  }
}

@media (min-width: 822px) and (max-width: 1200px) {
  .right--24--large-tablet.right--24--large-tablet {
    right: var(--spacing-24);
  }
}

@media (min-width: 1201px) {
  .right--laptop.right--laptop {
    right: var(--spacing-1);
  }
}

@media (min-width: 1201px) {
  .right--0--laptop.right--0--laptop {
    right: var(--spacing-0);
  }
}

@media (min-width: 1201px) {
  .right--1--laptop.right--1--laptop {
    right: var(--spacing-1);
  }
}

@media (min-width: 1201px) {
  .right--2--laptop.right--2--laptop {
    right: var(--spacing-2);
  }
}

@media (min-width: 1201px) {
  .right--3--laptop.right--3--laptop {
    right: var(--spacing-3);
  }
}

@media (min-width: 1201px) {
  .right--4--laptop.right--4--laptop {
    right: var(--spacing-4);
  }
}

@media (min-width: 1201px) {
  .right--5--laptop.right--5--laptop {
    right: var(--spacing-5);
  }
}

@media (min-width: 1201px) {
  .right--6--laptop.right--6--laptop {
    right: var(--spacing-6);
  }
}

@media (min-width: 1201px) {
  .right--7--laptop.right--7--laptop {
    right: var(--spacing-7);
  }
}

@media (min-width: 1201px) {
  .right--8--laptop.right--8--laptop {
    right: var(--spacing-8);
  }
}

@media (min-width: 1201px) {
  .right--9--laptop.right--9--laptop {
    right: var(--spacing-9);
  }
}

@media (min-width: 1201px) {
  .right--10--laptop.right--10--laptop {
    right: var(--spacing-10);
  }
}

@media (min-width: 1201px) {
  .right--11--laptop.right--11--laptop {
    right: var(--spacing-11);
  }
}

@media (min-width: 1201px) {
  .right--12--laptop.right--12--laptop {
    right: var(--spacing-12);
  }
}

@media (min-width: 1201px) {
  .right--14--laptop.right--14--laptop {
    right: var(--spacing-14);
  }
}

@media (min-width: 1201px) {
  .right--16--laptop.right--16--laptop {
    right: var(--spacing-16);
  }
}

@media (min-width: 1201px) {
  .right--20--laptop.right--20--laptop {
    right: var(--spacing-20);
  }
}

@media (min-width: 1201px) {
  .right--24--laptop.right--24--laptop {
    right: var(--spacing-24);
  }
}

.z--0 {
  z-index: 0;
}

.z--1 {
  z-index: 1;
}

.z--2 {
  z-index: 2;
}

/* ==========================================================================
   0X. OTHER
   ========================================================================== */
/** 
General design class styling

!!!
These classes should only include general classes/mixin like `.bg-pri`, `.b--1`, etc.
Any component general classes/mixins like `.title-border`, etc, should be in the
`scss/custom/design.scss` file which will be declared after all the general files.
!!!

The only file this file should rely on to be called before (as it uses variables from it) it is the
`scss/general/variables.scss` file.

01. Backgrounds
02. Borders
0X. Other
*/
/* ==========================================================================
   01. BACKGROUNDS
   ========================================================================== */
.bg-pri {
  background-color: rgba(var(--primary-300-rgb), var(--bg-opacity));
}

.bg-pri--100 {
  background-color: rgba(var(--primary-100-rgb), var(--bg-opacity));
}

.bg-pri--200 {
  background-color: rgba(var(--primary-200-rgb), var(--bg-opacity));
}

.bg-pri--300 {
  background-color: rgba(var(--primary-300-rgb), var(--bg-opacity));
}

.bg-pri--400 {
  background-color: rgba(var(--primary-400-rgb), var(--bg-opacity));
}

.bg-pri--500 {
  background-color: rgba(var(--primary-500-rgb), var(--bg-opacity));
}

.bg-sec {
  background-color: rgba(var(--secondary-300-rgb), var(--bg-opacity));
}

.bg-sec--100 {
  background-color: rgba(var(--secondary-100-rgb), var(--bg-opacity));
}

.bg-sec--200 {
  background-color: rgba(var(--secondary-200-rgb), var(--bg-opacity));
}

.bg-sec--300 {
  background-color: rgba(var(--secondary-300-rgb), var(--bg-opacity));
}

.bg-sec--400 {
  background-color: rgba(var(--secondary-400-rgb), var(--bg-opacity));
}

.bg-sec--500 {
  background-color: rgba(var(--secondary-500-rgb), var(--bg-opacity));
}

.bg-dark {
  background-color: rgba(var(--dark-400-rgb), var(--bg-opacity));
}

.bg-dark--400 {
  background-color: rgba(var(--dark-400-rgb), var(--bg-opacity));
}

.bg-dark--300 {
  background-color: rgba(var(--dark-300-rgb), var(--bg-opacity));
}

.bg-dark--200 {
  background-color: rgba(var(--dark-200-rgb), var(--bg-opacity));
}

.bg-light {
  background-color: rgba(var(--light-200-rgb), var(--bg-opacity));
}

.bg-light--200 {
  background-color: rgba(var(--light-200-rgb), var(--bg-opacity));
}

.bg-light--300 {
  background-color: rgba(var(--light-300-rgb), var(--bg-opacity));
}

.bg-light--400 {
  background-color: rgba(var(--light-400-rgb), var(--bg-opacity));
}

.bg-light--500 {
  background-color: rgba(var(--light-500-rgb), var(--bg-opacity));
}

.bg-light--600 {
  background-color: rgba(var(--light-600-rgb), var(--bg-opacity));
}

.bg-opacity--10 {
  --bg-opacity: 0.1;
}

.bg-opacity--20 {
  --bg-opacity: 0.2;
}

.bg-opacity--30 {
  --bg-opacity: 0.3;
}

.bg-opacity--40 {
  --bg-opacity: 0.4;
}

.bg-opacity--50 {
  --bg-opacity: 0.5;
}

.bg-opacity--60 {
  --bg-opacity: 0.6;
}

.bg-opacity--70 {
  --bg-opacity: 0.7;
}

.bg-opacity--80 {
  --bg-opacity: 0.8;
}

.bg-opacity--90 {
  --bg-opacity: 0.9;
}

.bg-opacity--100 {
  --bg-opacity: 1;
}

/* ==========================================================================
   02. BORDERS
   ========================================================================== */
/* ===================================
  Border width / sides
  =================================== */
.border {
  border-top-width: 1px;
  border-top-style: solid;
  border-right-width: 1px;
  border-right-style: solid;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-left-width: 1px;
  border-left-style: solid;
}

.border--0 {
  border-top-width: 0;
  border-top-style: solid;
  border-right-width: 0;
  border-right-style: solid;
  border-bottom-width: 0;
  border-bottom-style: solid;
  border-left-width: 0;
  border-left-style: solid;
}

.border--1 {
  border-top-width: 1px;
  border-top-style: solid;
  border-right-width: 1px;
  border-right-style: solid;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-left-width: 1px;
  border-left-style: solid;
}

.border--2 {
  border-top-width: 2px;
  border-top-style: solid;
  border-right-width: 2px;
  border-right-style: solid;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-left-width: 2px;
  border-left-style: solid;
}

.border--3 {
  border-top-width: 3px;
  border-top-style: solid;
  border-right-width: 3px;
  border-right-style: solid;
  border-bottom-width: 3px;
  border-bottom-style: solid;
  border-left-width: 3px;
  border-left-style: solid;
}

.border--4 {
  border-top-width: 4px;
  border-top-style: solid;
  border-right-width: 4px;
  border-right-style: solid;
  border-bottom-width: 4px;
  border-bottom-style: solid;
  border-left-width: 4px;
  border-left-style: solid;
}

.border-t {
  border-top-width: 1px;
  border-top-style: solid;
}

.border-t--0 {
  border-top-width: 0;
  border-top-style: solid;
}

.border-t--1 {
  border-top-width: 1px;
  border-top-style: solid;
}

.border-t--2 {
  border-top-width: 2px;
  border-top-style: solid;
}

.border-t--3 {
  border-top-width: 3px;
  border-top-style: solid;
}

.border-t--4 {
  border-top-width: 4px;
  border-top-style: solid;
}

.border-r {
  border-right-width: 1px;
  border-right-style: solid;
}

.border-r--0 {
  border-right-width: 0;
  border-right-style: solid;
}

.border-r--1 {
  border-right-width: 1px;
  border-right-style: solid;
}

.border-r--2 {
  border-right-width: 2px;
  border-right-style: solid;
}

.border-r--3 {
  border-right-width: 3px;
  border-right-style: solid;
}

.border-r--4 {
  border-right-width: 4px;
  border-right-style: solid;
}

.border-b {
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

.border-b--0 {
  border-bottom-width: 0;
  border-bottom-style: solid;
}

.border-b--1 {
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

.border-b--2 {
  border-bottom-width: 2px;
  border-bottom-style: solid;
}

.border-b--3 {
  border-bottom-width: 3px;
  border-bottom-style: solid;
}

.border-b--4 {
  border-bottom-width: 4px;
  border-bottom-style: solid;
}

.border-l {
  border-left-width: 1px;
  border-left-style: solid;
}

.border-l--0 {
  border-left-width: 0;
  border-left-style: solid;
}

.border-l--1 {
  border-left-width: 1px;
  border-left-style: solid;
}

.border-l--2 {
  border-left-width: 2px;
  border-left-style: solid;
}

.border-l--3 {
  border-left-width: 3px;
  border-left-style: solid;
}

.border-l--4 {
  border-left-width: 4px;
  border-left-style: solid;
}

.border-x {
  border-left-width: 1px;
  border-left-style: solid;
  border-right-width: 1px;
  border-right-style: solid;
}

.border-x--0 {
  border-left-width: 0;
  border-left-style: solid;
  border-right-width: 0;
  border-right-style: solid;
}

.border-x--1 {
  border-left-width: 1px;
  border-left-style: solid;
  border-right-width: 1px;
  border-right-style: solid;
}

.border-x--2 {
  border-left-width: 2px;
  border-left-style: solid;
  border-right-width: 2px;
  border-right-style: solid;
}

.border-x--3 {
  border-left-width: 3px;
  border-left-style: solid;
  border-right-width: 3px;
  border-right-style: solid;
}

.border-x--4 {
  border-left-width: 4px;
  border-left-style: solid;
  border-right-width: 4px;
  border-right-style: solid;
}

.border-y {
  border-top-width: 1px;
  border-top-style: solid;
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

.border-y--0 {
  border-top-width: 0;
  border-top-style: solid;
  border-bottom-width: 0;
  border-bottom-style: solid;
}

.border-y--1 {
  border-top-width: 1px;
  border-top-style: solid;
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

.border-y--2 {
  border-top-width: 2px;
  border-top-style: solid;
  border-bottom-width: 2px;
  border-bottom-style: solid;
}

.border-y--3 {
  border-top-width: 3px;
  border-top-style: solid;
  border-bottom-width: 3px;
  border-bottom-style: solid;
}

.border-y--4 {
  border-top-width: 4px;
  border-top-style: solid;
  border-bottom-width: 4px;
  border-bottom-style: solid;
}

/* ===================================
  Border colour
  =================================== */
.border--pri {
  border-color: rgba(var(--primary-300-rgb), 1);
}

.border--pri--100 {
  border-color: rgba(var(--primary-100-rgb), 1);
}

.border--pri--200 {
  border-color: rgba(var(--primary-200-rgb), 1);
}

.border--pri--300 {
  border-color: rgba(var(--primary-300-rgb), 1);
}

.border--pri--400 {
  border-color: rgba(var(--primary-400-rgb), 1);
}

.border--pri--500 {
  border-color: rgba(var(--primary-500-rgb), 1);
}

.border--sec {
  border-color: rgba(var(--secondary-300-rgb), 1);
}

.border--sec--100 {
  border-color: rgba(var(--secondary-100-rgb), 1);
}

.border--sec--200 {
  border-color: rgba(var(--secondary-200-rgb), 1);
}

.border--sec--300 {
  border-color: rgba(var(--secondary-300-rgb), 1);
}

.border--sec--400 {
  border-color: rgba(var(--secondary-400-rgb), 1);
}

.border--sec--500 {
  border-color: rgba(var(--secondary-500-rgb), 1);
}

.border--dark {
  border-color: rgba(var(--dark-400-rgb), 1);
}

.border--dark--400 {
  border-color: rgba(var(--dark-400-rgb), 1);
}

.border--dark--300 {
  border-color: rgba(var(--dark-300-rgb), 1);
}

.border--dark--200 {
  border-color: rgba(var(--dark-200-rgb), 1);
}

.border--light {
  border-color: rgba(var(--light-200-rgb), 1);
}

.border--light--200 {
  border-color: rgba(var(--light-200-rgb), 1);
}

.border--light--300 {
  border-color: rgba(var(--light-300-rgb), 1);
}

.border--light--400 {
  border-color: rgba(var(--light-400-rgb), 1);
}

.border--light--500 {
  border-color: rgba(var(--light-500-rgb), 1);
}

.border--light--600 {
  border-color: rgba(var(--light-600-rgb), 1);
}

/* ===================================
  Border radius
  =================================== */
.rounded {
  border-radius: var(--radius-md);
}

.rounded--none {
  border-radius: 0;
}

.rounded--sm {
  border-radius: var(--radius-sm);
}

.rounded--lg {
  border-radius: var(--radius-lg);
}

.rounded--xl {
  border-radius: var(--radius-xl);
}

.rounded--2xl {
  border-radius: var(--radius-2xl);
}

.rounded--full {
  border-radius: var(--radius-full);
}

/* ===================================
  Padding
  =================================== */
.pd--sm {
  padding: 5px;
}

.pd, .pd--md {
  padding: 10px;
}

.pd--lg {
  padding: 20px;
}

/* ==========================================================================
   0X. OTHER
   ========================================================================== */
/** 
Custom typography class styling.

!!!
These classes should only include custom classes/mixin like `.key-value-pair`, etc, that are
custom classes that are used throughout the whole app/across multiple pages/components.

Any classes related to a specific page/component should be in its own file at
`scss/custom/<pages/components/modules>/<name>.scss`.
!!!


01. XXX
0X. Other
*/
/* ==========================================================================
   04. XXX
   ========================================================================== */
/* ==========================================================================
   0X. OTHER
   ========================================================================== */
.short-link {
  display: inline-block;
  max-width: 200px;
  /* limit visible width */
  white-space: nowrap;
  /* keep on one line */
  overflow: hidden;
  /* hide overflow */
  text-overflow: ellipsis;
  /* add "..." */
  vertical-align: middle;
}

/** 
Custom layout class styling.

!!!
These classes should only include custom classes/mixin like `.key-value-pair`, etc, that are
custom classes that are used throughout the whole app/across multiple pages/components.

Any classes related to a specific page/component should be in its own file at
`scss/custom/<pages/components/modules>/<name>.scss`.
!!!


01. Page section padding / margin
0X. Other
*/
/* ==========================================================================
   01. Page section padding / margin
   ========================================================================== */
:root {
  --page-x-spacing: var(--spacing-16);
  --page-y-spacing: var(--spacing-16);
}

@media (max-width: 1200px) {
  :root {
    --page-x-spacing: var(--spacing-8);
  }
}

.page-section-margin {
  margin-top: var(--page-x-spacing);
  margin-bottom: var(--page-x-spacing);
}

.page-section-margin.first-section {
  margin-top: 0;
}

.page-section-padding {
  padding-left: var(--page-x-spacing);
  padding-right: var(--page-x-spacing);
  padding-top: var(--page-y-spacing);
  padding-bottom: var(--page-y-spacing);
}

.page-section-padding--l, .page-section-padding--x {
  padding-left: var(--page-x-spacing);
}

.page-section-padding--r, .page-section-padding--x {
  padding-right: var(--page-x-spacing);
}

.page-section-padding--t, .page-section-padding--y {
  padding-top: var(--page-y-spacing);
}

.page-section-padding--b, .page-section-padding--y {
  padding-bottom: var(--page-y-spacing);
}

.page-section-margin {
  margin-top: var(--page-x-spacing);
  margin-bottom: var(--page-x-spacing);
  margin-left: var(--page-y-spacing);
  margin-right: var(--page-y-spacing);
}

.page-section-margin--l, .page-section-margin--x {
  margin-left: var(--page-x-spacing);
}

.page-section-margin--r, .page-section-margin--x {
  margin-right: var(--page-x-spacing);
}

.page-section-margin--t, .page-section-margin--y {
  margin-top: var(--page-y-spacing);
}

.page-section-margin--b, .page-section-margin--y {
  margin-bottom: var(--page-y-spacing);
}

/* ==========================================================================
   0X. OTHER
   ========================================================================== */
.container-fluid {
  padding: 0;
}

.app-container {
  min-height: calc(100vh - var(--footer-height));
}

.logos-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
}

.logos-container img {
  height: 70px;
}

/* Key stats elements, which are shared across multiple pages */
.key-stats__card {
  padding: var(--spacing-5) var(--spacing-6);
  min-height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--dark-400);
  font-style: normal;
  font-weight: var(--font-weight-header);
  line-height: normal;
  /* If first child, set colour to secondary-300 */
}

.key-stats__card:first-child {
  background: var(--secondary-300);
}

/* Component to show a key (bold) and value */
.key-value-pair {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-2);
}

.key-value-pair__key {
  font-weight: bold;
  margin-bottom: 0;
}

.key-value-pair__value {
  margin-bottom: 0;
}

/** 
Custom design class styling.

!!!
These classes should only include custom classes/mixin like `.key-value-pair`, etc, that are
custom classes that are used throughout the whole app/across multiple pages/components.

Any classes related to a specific page/component should be in its own file at
`scss/custom/<pages/components/modules>/<name>.scss`.
!!!


01. XXX
0X. Other
*/
/* ==========================================================================
   04. XXX
   ========================================================================== */
/* ==========================================================================
   0X. OTHER
   ========================================================================== */
.title-border {
  position: relative;
  padding-bottom: var(--spacing-4);
}

.title-border::before {
  position: absolute;
  top: 0;
  display: block;
  height: 1px;
  content: '';
}

.title-border::before {
  background-color: var(--secondary-300);
  width: calc((100vw - var(--page-x-spacing)) / 3);
}

.title-border--full::before {
  width: 100%;
}

/*
01. General
02. Select
03. Toggle/switch
*/
/* ==========================================================================
   01. GENERAL STYLING
   ========================================================================== */
.form-group label {
  font-weight: bold;
}

/* ==========================================================================
   02. SELECT STYLING
   ========================================================================== */
.selectize-input {
  border: none;
  border-radius: 0;
}

.selectize-input.active, .selectize-input:active, .selectize-input.focus, .selectize-input:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--primary-300-rgb), 0.25);
}

.selectize-dropdown .selectize-dropdown-content .option.active {
  background-color: rgba(var(--info-300-rgb), 0.2);
}

.selectize-dropdown .selectize-dropdown-content .option.selected {
  background-color: rgba(var(--info-300-rgb), 0.5);
  color: var(--dark-400);
}

.selectize-input.dropdown-active,
.selectize-dropdown,
.selectize-dropdown.form-control {
  border-radius: 0;
  border: none;
}

/* ==========================================================================
   03. TOGGLE/SWITCH STYLING
   ========================================================================== */
.form-group .pretty.p-switch .state::before {
  border-color: var(--light-600);
  background-color: var(--light-600) !important;
  border-width: 2px;
  top: 50%;
  transform: translateY(-50%);
}

.form-group .pretty.p-switch .state label {
  font-weight: normal;
}

.form-group .pretty.p-switch .state label::after {
  left: 2px;
  background-color: var(--light-200) !important;
  top: 50%;
  transform: translateY(-50%) !important;
}

.form-group .pretty.p-switch input:checked ~ .state::before {
  border-color: var(--primary-300);
  background-color: var(--primary-300) !important;
}

.form-group .pretty.p-switch input:checked ~ .state label::after {
  background-color: var(--light-200) !important;
  left: 1em;
}

/** 
General button styling

01. Variant
02. Size
0X. Other
*/
/* ==========================================================================
   01. VARIANT
   ========================================================================== */
/* ==========================================================================
   02. SIZE
   ========================================================================== */
/* ==========================================================================
   0X. OTHER
   ========================================================================== */
/* ==========================================================================
   0X. FINAL USE
   ========================================================================== */
.btn,
.btn-pri,
button,
button.btn,
button.btn-pri {
  border-radius: 0;
}

.btn--disabled:hover, .btn--disabled:hover:active, .btn--disabled:hover:focus, .btn--disabled:hover:focus:active, .btn[disabled]:hover, .btn[disabled]:hover:active, .btn[disabled]:hover:focus, .btn[disabled]:hover:focus:active, .btn, .btn:active, .btn:focus, .btn:focus:active,
.btn-pri--disabled:hover,
.btn-pri--disabled:hover:active,
.btn-pri--disabled:hover:focus,
.btn-pri--disabled:hover:focus:active,
.btn-pri[disabled]:hover,
.btn-pri[disabled]:hover:active,
.btn-pri[disabled]:hover:focus,
.btn-pri[disabled]:hover:focus:active,
.btn-pri,
.btn-pri:active,
.btn-pri:focus,
.btn-pri:focus:active,
button--disabled:hover,
button--disabled:hover:active,
button--disabled:hover:focus,
button--disabled:hover:focus:active,
button[disabled]:hover,
button[disabled]:hover:active,
button[disabled]:hover:focus,
button[disabled]:hover:focus:active,
button,
button:active,
button:focus,
button:focus:active,
button.btn--disabled:hover,
button.btn--disabled:hover:active,
button.btn--disabled:hover:focus,
button.btn--disabled:hover:focus:active,
button.btn[disabled]:hover,
button.btn[disabled]:hover:active,
button.btn[disabled]:hover:focus,
button.btn[disabled]:hover:focus:active,
button.btn,
button.btn:active,
button.btn:focus,
button.btn:focus:active,
button.btn-pri--disabled:hover,
button.btn-pri--disabled:hover:active,
button.btn-pri--disabled:hover:focus,
button.btn-pri--disabled:hover:focus:active,
button.btn-pri[disabled]:hover,
button.btn-pri[disabled]:hover:active,
button.btn-pri[disabled]:hover:focus,
button.btn-pri[disabled]:hover:focus:active,
button.btn-pri,
button.btn-pri:active,
button.btn-pri:focus,
button.btn-pri:focus:active {
  background-color: rgba(var(--primary-300-rgb), 1);
  border: 1px solid rgba(var(--primary-300-rgb), 1);
  color: rgba(var(--light-200-rgb), 1);
}

.btn--disabled:hover:active, .btn--disabled:hover:focus:active, .btn[disabled]:hover:active, .btn[disabled]:hover:focus:active, .btn:active, .btn:focus:active,
.btn-pri--disabled:hover:active,
.btn-pri--disabled:hover:focus:active,
.btn-pri[disabled]:hover:active,
.btn-pri[disabled]:hover:focus:active,
.btn-pri:active,
.btn-pri:focus:active,
button--disabled:hover:active,
button--disabled:hover:focus:active,
button[disabled]:hover:active,
button[disabled]:hover:focus:active,
button:active,
button:focus:active,
button.btn--disabled:hover:active,
button.btn--disabled:hover:focus:active,
button.btn[disabled]:hover:active,
button.btn[disabled]:hover:focus:active,
button.btn:active,
button.btn:focus:active,
button.btn-pri--disabled:hover:active,
button.btn-pri--disabled:hover:focus:active,
button.btn-pri[disabled]:hover:active,
button.btn-pri[disabled]:hover:focus:active,
button.btn-pri:active,
button.btn-pri:focus:active {
  border-color: transparent;
  outline: 1px solid rgba(var(--primary-300-rgb), 1);
}

.btn:hover,
.btn-pri:hover,
button:hover,
button.btn:hover,
button.btn-pri:hover {
  background-color: rgba(var(--light-200-rgb), 1);
  border: 1px solid rgba(var(--light-200-rgb), 1);
  color: rgba(var(--primary-300-rgb), 1);
}

.btn--inverse, .btn--inverse--disabled:hover, .btn--inverse[disabled]:hover,
.btn-pri--inverse,
.btn-pri--inverse--disabled:hover,
.btn-pri--inverse[disabled]:hover,
button--inverse,
button--inverse--disabled:hover,
button--inverse[disabled]:hover,
button.btn--inverse,
button.btn--inverse--disabled:hover,
button.btn--inverse[disabled]:hover,
button.btn-pri--inverse,
button.btn-pri--inverse--disabled:hover,
button.btn-pri--inverse[disabled]:hover {
  background-color: rgba(var(--light-200-rgb), 1);
  border: 1px solid rgba(var(--light-200-rgb), 1);
  color: rgba(var(--primary-300-rgb), 1);
}

.btn--inverse:hover,
.btn-pri--inverse:hover,
button--inverse:hover,
button.btn--inverse:hover,
button.btn-pri--inverse:hover {
  background-color: rgba(var(--primary-300-rgb), 1);
  border: 1px solid rgba(var(--primary-300-rgb), 1);
  color: rgba(var(--light-200-rgb), 1);
}

.btn--outline, .btn--outline--disabled:hover, .btn--outline[disabled]:hover,
.btn-pri--outline,
.btn-pri--outline--disabled:hover,
.btn-pri--outline[disabled]:hover,
button--outline,
button--outline--disabled:hover,
button--outline[disabled]:hover,
button.btn--outline,
button.btn--outline--disabled:hover,
button.btn--outline[disabled]:hover,
button.btn-pri--outline,
button.btn-pri--outline--disabled:hover,
button.btn-pri--outline[disabled]:hover {
  background-color: transparent;
  border: 1px solid rgba(var(--primary-300-rgb), 1);
  color: rgba(var(--primary-300-rgb), 1);
}

.btn--outline:hover,
.btn-pri--outline:hover,
button--outline:hover,
button.btn--outline:hover,
button.btn-pri--outline:hover {
  background-color: rgba(var(--primary-300-rgb), 1);
  color: rgba(var(--light-200-rgb), 1);
  border: 1px solid rgba(var(--primary-300-rgb), 1);
}

.btn--ghost, .btn--ghost--disabled:hover, .btn--ghost[disabled]:hover,
.btn-pri--ghost,
.btn-pri--ghost--disabled:hover,
.btn-pri--ghost[disabled]:hover,
button--ghost,
button--ghost--disabled:hover,
button--ghost[disabled]:hover,
button.btn--ghost,
button.btn--ghost--disabled:hover,
button.btn--ghost[disabled]:hover,
button.btn-pri--ghost,
button.btn-pri--ghost--disabled:hover,
button.btn-pri--ghost[disabled]:hover {
  background-color: rgba(var(--primary-300-rgb), 0.1);
  border: 1px solid transparent;
  color: rgba(var(--primary-300-rgb), 1);
}

.btn--ghost:hover,
.btn-pri--ghost:hover,
button--ghost:hover,
button.btn--ghost:hover,
button.btn-pri--ghost:hover {
  background-color: rgba(var(--primary-300-rgb), 0.3);
  border: 1px solid transparent;
  color: rgba(var(--primary-300-rgb), 1);
}

.btn--link, .btn--link--disabled:hover, .btn--link[disabled]:hover,
.btn-pri--link,
.btn-pri--link--disabled:hover,
.btn-pri--link[disabled]:hover,
button--link,
button--link--disabled:hover,
button--link[disabled]:hover,
button.btn--link,
button.btn--link--disabled:hover,
button.btn--link[disabled]:hover,
button.btn-pri--link,
button.btn-pri--link--disabled:hover,
button.btn-pri--link[disabled]:hover {
  color: rgba(var(--primary-300-rgb), 1);
  background-color: transparent;
  border: none;
  padding: 0px;
  height: fit-content;
  width: fit-content;
}

.btn--link:hover,
.btn-pri--link:hover,
button--link:hover,
button.btn--link:hover,
button.btn-pri--link:hover {
  background-color: transparent;
  border: none;
  color: rgba(var(--primary-300-rgb), 1);
}

.btn--disabled, .btn[disabled],
.btn-pri--disabled,
.btn-pri[disabled],
button--disabled,
button[disabled],
button.btn--disabled,
button.btn[disabled],
button.btn-pri--disabled,
button.btn-pri[disabled] {
  filter: grayscale(1);
  cursor: not-allowed;
}

.btn, .btn--md,
.btn-pri,
.btn-pri--md,
button,
button--md,
button.btn,
button.btn--md,
button.btn-pri,
button.btn-pri--md {
  font-size: 1em;
  padding: 6px 12px;
}

.btn--xs,
.btn-pri--xs,
button--xs,
button.btn--xs,
button.btn-pri--xs {
  font-size: 0.8em;
  padding: 4px 8px;
}

.btn--sm,
.btn-pri--sm,
button--sm,
button.btn--sm,
button.btn-pri--sm {
  font-size: 0.9em;
  padding: 5px 10px;
}

.btn--lg,
.btn-pri--lg,
button--lg,
button.btn--lg,
button.btn-pri--lg {
  font-size: 1.2em;
  padding: 8px 16px;
}

.btn--xl,
.btn-pri--xl,
button--xl,
button.btn--xl,
button.btn-pri--xl {
  font-size: 1.4em;
  padding: 10px 20px;
}

button.btn-sec,
.btn-sec {
  border-radius: 0;
}

button.btn-sec--disabled:hover, button.btn-sec--disabled:hover:active, button.btn-sec--disabled:hover:focus, button.btn-sec--disabled:hover:focus:active, button.btn-sec[disabled]:hover, button.btn-sec[disabled]:hover:active, button.btn-sec[disabled]:hover:focus, button.btn-sec[disabled]:hover:focus:active, button.btn-sec, button.btn-sec:active, button.btn-sec:focus, button.btn-sec:focus:active,
.btn-sec--disabled:hover,
.btn-sec--disabled:hover:active,
.btn-sec--disabled:hover:focus,
.btn-sec--disabled:hover:focus:active,
.btn-sec[disabled]:hover,
.btn-sec[disabled]:hover:active,
.btn-sec[disabled]:hover:focus,
.btn-sec[disabled]:hover:focus:active,
.btn-sec,
.btn-sec:active,
.btn-sec:focus,
.btn-sec:focus:active {
  background-color: rgba(var(--secondary-300-rgb), 1);
  border: 1px solid rgba(var(--secondary-300-rgb), 1);
  color: rgba(var(--light-200-rgb), 1);
}

button.btn-sec--disabled:hover:active, button.btn-sec--disabled:hover:focus:active, button.btn-sec[disabled]:hover:active, button.btn-sec[disabled]:hover:focus:active, button.btn-sec:active, button.btn-sec:focus:active,
.btn-sec--disabled:hover:active,
.btn-sec--disabled:hover:focus:active,
.btn-sec[disabled]:hover:active,
.btn-sec[disabled]:hover:focus:active,
.btn-sec:active,
.btn-sec:focus:active {
  border-color: transparent;
  outline: 1px solid rgba(var(--secondary-300-rgb), 1);
}

button.btn-sec:hover,
.btn-sec:hover {
  background-color: rgba(var(--light-200-rgb), 1);
  border: 1px solid rgba(var(--light-200-rgb), 1);
  color: rgba(var(--secondary-300-rgb), 1);
}

button.btn-sec--inverse, button.btn-sec--inverse--disabled:hover, button.btn-sec--inverse[disabled]:hover,
.btn-sec--inverse,
.btn-sec--inverse--disabled:hover,
.btn-sec--inverse[disabled]:hover {
  background-color: rgba(var(--light-200-rgb), 1);
  border: 1px solid rgba(var(--light-200-rgb), 1);
  color: rgba(var(--secondary-300-rgb), 1);
}

button.btn-sec--inverse:hover,
.btn-sec--inverse:hover {
  background-color: rgba(var(--secondary-300-rgb), 1);
  border: 1px solid rgba(var(--secondary-300-rgb), 1);
  color: rgba(var(--light-200-rgb), 1);
}

button.btn-sec--outline, button.btn-sec--outline--disabled:hover, button.btn-sec--outline[disabled]:hover,
.btn-sec--outline,
.btn-sec--outline--disabled:hover,
.btn-sec--outline[disabled]:hover {
  background-color: transparent;
  border: 1px solid rgba(var(--secondary-300-rgb), 1);
  color: rgba(var(--secondary-300-rgb), 1);
}

button.btn-sec--outline:hover,
.btn-sec--outline:hover {
  background-color: rgba(var(--secondary-300-rgb), 1);
  color: rgba(var(--light-200-rgb), 1);
  border: 1px solid rgba(var(--secondary-300-rgb), 1);
}

button.btn-sec--ghost, button.btn-sec--ghost--disabled:hover, button.btn-sec--ghost[disabled]:hover,
.btn-sec--ghost,
.btn-sec--ghost--disabled:hover,
.btn-sec--ghost[disabled]:hover {
  background-color: rgba(var(--secondary-300-rgb), 0.1);
  border: 1px solid transparent;
  color: rgba(var(--secondary-300-rgb), 1);
}

button.btn-sec--ghost:hover,
.btn-sec--ghost:hover {
  background-color: rgba(var(--secondary-300-rgb), 0.3);
  border: 1px solid transparent;
  color: rgba(var(--secondary-300-rgb), 1);
}

button.btn-sec--link, button.btn-sec--link--disabled:hover, button.btn-sec--link[disabled]:hover,
.btn-sec--link,
.btn-sec--link--disabled:hover,
.btn-sec--link[disabled]:hover {
  color: rgba(var(--secondary-300-rgb), 1);
  background-color: transparent;
  border: none;
  padding: 0px;
  height: fit-content;
  width: fit-content;
}

button.btn-sec--link:hover,
.btn-sec--link:hover {
  background-color: transparent;
  border: none;
  color: rgba(var(--secondary-300-rgb), 1);
}

button.btn-sec--disabled, button.btn-sec[disabled],
.btn-sec--disabled,
.btn-sec[disabled] {
  filter: grayscale(1);
  cursor: not-allowed;
}

button.btn-sec, button.btn-sec--md,
.btn-sec,
.btn-sec--md {
  font-size: 1em;
  padding: 6px 12px;
}

button.btn-sec--xs,
.btn-sec--xs {
  font-size: 0.8em;
  padding: 4px 8px;
}

button.btn-sec--sm,
.btn-sec--sm {
  font-size: 0.9em;
  padding: 5px 10px;
}

button.btn-sec--lg,
.btn-sec--lg {
  font-size: 1.2em;
  padding: 8px 16px;
}

button.btn-sec--xl,
.btn-sec--xl {
  font-size: 1.4em;
  padding: 10px 20px;
}

.dropdown-menu.dropdown-shinyWidgets {
  width: 100%;
  border-radius: 0;
}

.dropdown-menu.dropdown-shinyWidgets .btn-dropdown-container {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.dropdown-menu.dropdown-shinyWidgets .btn-dropdown-container__option {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 5px;
}

.dropdown-menu.dropdown-shinyWidgets .btn-dropdown-container__option i {
  width: 20px;
}

.dropdown-menu.dropdown-shinyWidgets .btn-dropdown-container__option:hover {
  background-color: var(--light-400);
}

.timeline-slider-input {
  height: fit-content;
}

.timeline-slider-input .shiny-input-container {
  display: flex;
  flex-flow: row-reverse;
  gap: 20px;
  padding: 15px 30px 0 0;
  margin-bottom: 0;
}

.timeline-slider-input .shiny-input-container .irs {
  flex-grow: 1;
}

.timeline-slider-input .shiny-input-container .irs--shiny {
  margin-top: -15px;
}

.timeline-slider-input .shiny-input-container .irs--shiny span.irs-min,
.timeline-slider-input .shiny-input-container .irs--shiny span.irs-max {
  /* !important, because the 3rd party library for the slider sometimes sets
            this to visible using inline styles. This means we can't style it without
            the !important tag.
          */
  visibility: hidden !important;
}

.timeline-slider-input .shiny-input-container .irs--shiny .irs-bar--single {
  background: none;
}

.timeline-slider-input .shiny-input-container .irs--shiny .irs-bar, .timeline-slider-input .shiny-input-container .irs--shiny .irs-bar--single.irs-bar--cumulative {
  background: var(--primary-300);
}

.timeline-slider-input .shiny-input-container .irs--shiny .irs-handle,
.timeline-slider-input .shiny-input-container .irs--shiny .irs-bar--single.irs-bar--cumulative {
  background: var(--primary-300);
}

.timeline-slider-input .shiny-input-container .irs--shiny .irs-handle:hover {
  background-color: var(--primary-400);
  /* Darkened --green */
}

.timeline-slider-input .shiny-input-container .irs--shiny .irs-handle:active,
.timeline-slider-input .shiny-input-container .irs--shiny .irs-handle:focus,
.timeline-slider-input .shiny-input-container .irs--shiny .irs-handle:focus-visible {
  color: var(--primary-200);
  background-color: var(--primary-200);
  border-color: var(--primary-200);
  box-shadow: 0 0 0 0.25rem rgba(0, 194, 123, 0.25);
}

.timeline-slider-input .shiny-input-container .irs--shiny ~ .slider-animate-container {
  width: 30px;
  height: 30px;
  background: var(--primary-300);
  border-radius: 50%;
  text-align: center;
  text-anchor: middle;
  align-self: center;
}

.timeline-slider-input .shiny-input-container .irs--shiny ~ .slider-animate-container .slider-animate-button {
  line-height: 30px;
  color: white;
  margin-left: 2px;
}

.timeline-slider-input .shiny-input-container .irs--shiny > .irs .irs-to,
.timeline-slider-input .shiny-input-container .irs--shiny > .irs .irs-from,
.timeline-slider-input .shiny-input-container .irs--shiny > .irs .irs-single {
  color: black;
  background: none;
  margin-top: 5px;
}

.timeline-slider-input.double.animating .interactive .irs.irs--shiny .irs-bar,
.timeline-slider-input.double.animating .interactive .irs.irs--shiny .irs-handle,
.timeline-slider-input.double.animating .interactive .irs.irs--shiny .irs-handle:hover, .timeline-slider-input.double.animating .interactive .irs--shiny .irs-bar,
.timeline-slider-input.double.animating .interactive .irs--shiny .irs-handle,
.timeline-slider-input.double.animating .interactive .irs--shiny .irs-handle:hover {
  background-color: var(--primary-300);
  filter: grayscale(0.75);
}

.timeline-slider-input.double.animating .interactive .irs-min,
.timeline-slider-input.double.animating .interactive .irs-max,
.timeline-slider-input.double.animating .interactive .irs-to,
.timeline-slider-input.double.animating .interactive .irs-from {
  visibility: hidden;
  display: none;
}

.timeline-slider-input.double.animating .timeline-marker-non-interactive .irs-single,
.timeline-slider-input.double.animating .timeline-marker-non-interactive .irs-handle.single {
  visibility: visible;
}

.timeline-slider-input .interactive .slider-animate-container {
  visibility: visible;
  pointer-events: unset;
}

.timeline-slider-input .timeline-marker-non-interactive {
  margin-top: -61px;
}

.timeline-slider-input .timeline-marker-non-interactive .irs.irs--shiny *,
.timeline-slider-input .timeline-marker-non-interactive .slider-animate-container {
  visibility: hidden;
  pointer-events: none;
}

.timeline-slider-input .timeline-marker-non-interactive .irs.irs--shiny .irs-grid-text {
  /* Important because 3rd party library sets styles inline */
  visibility: hidden !important;
}

.timeline-slider-input .timeline-marker-non-interactive .irs-handle.single {
  background-color: black;
}

.timeline-slider-input.double .irs.irs--shiny .irs-bar {
  cursor: ew-resize;
}

.timeline-slider-input.double .interactive .slider-animate-container {
  visibility: hidden;
  pointer-events: none;
}

.timeline-slider-input.double .timeline-marker-non-interactive .slider-animate-container {
  visibility: visible;
  pointer-events: unset;
}

.timeline-slider-input .irs-grid-pol:has(+ .irs-grid-text[style*='visibility: hidden']) {
  background-color: lightgrey;
  height: 3px;
}

.timeline-slider-input .timeline-range-descriptor {
  text-align: center;
  font-size: 0.75rem;
  font-weight: bold;
  margin: 0 auto;
  display: inherit;
}

header .header-banner {
  height: 46px;
  display: flex;
  justify-content: center;
  align-items: center;
}

header .header-banner p {
  margin: 0;
}

header .header-main {
  padding-top: 30px;
  padding-bottom: 30px;
}

header .disabled {
  opacity: 0.5;
  pointer-events: none;
}

header #header-nav-container {
  display: flex;
  flex-direction: row;
  gap: 15px;
}

header #header-nav-container .accordion {
  position: relative;
  width: 28px;
}

header #header-nav-container .accordion .accordion-item {
  position: absolute;
  right: 0;
  width: fit-content;
  border: none;
  background: transparent;
}

header #header-nav-container .accordion .accordion-item .accordion-header {
  width: fit-content;
  margin-left: auto;
}

header #header-nav-container .accordion .accordion-item .accordion-header button {
  border: 1px solid var(--light-200);
}

header #header-nav-container .accordion .accordion-item .accordion-header button:hover {
  border: 1px solid var(--light-200);
  transform: scale(1.05);
}

header #header-nav-container .accordion .accordion-item .accordion-header button:focus {
  border: 1px solid var(--primary-300);
  background: unset;
  outline: unset;
  box-shadow: unset;
}

header #header-nav-container .accordion .accordion-item .accordion-header .accordion-button {
  padding: 0;
}

header #header-nav-container .accordion .accordion-item .accordion-header .accordion-button::after {
  display: none;
}

header #header-nav-container .accordion .accordion-item .accordion-header .accordion-button .accordion-icon {
  margin: 0;
}

header #header-nav-container .accordion .accordion-item .accordion-header .accordion-button .accordion-icon .icon {
  aspect-ratio: 1/1;
}

header #header-nav-container .accordion .accordion-item .accordion-body {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  z-index: 100;
  position: relative;
  background: white;
}

header #header-nav-container .accordion .accordion-item .accordion-body .nav-menu-content {
  text-wrap: nowrap;
}

header #header-nav-container .accordion .accordion-item .accordion-body .nav-menu-content a {
  color: var(--dark-400);
  text-decoration: none;
}

footer {
  display: flex;
  justify-content: space-between;
  background-color: #f5f5f5;
  min-height: var(--footer-height);
}

footer p {
  margin: 0;
}

footer > div {
  padding-top: var(--page-y-spacing);
  padding-bottom: var(--page-y-spacing);
}

footer #footer-top-section {
  padding-top: 30px;
  padding-bottom: 30px;
  flex-grow: 1;
  justify-content: space-between;
}

footer #footer-top-section h5 {
  margin-top: auto;
}

footer #footer-top-section #footer-left-logos {
  height: 90px;
  margin-bottom: 30px;
}

footer #footer-top-section a {
  margin-bottom: 1rem;
}

footer #footer-top-section .epi-logo {
  padding-bottom: 8px;
  height: 38px;
}

footer #footer-top-section #footer-need-help {
  margin-top: 35px;
  margin-bottom: 1rem;
  text-align: end;
}

footer #footer-bottom-section {
  padding-top: 20px;
  padding-bottom: 20px;
}

footer #footer-bottom-section > div {
  gap: 10px;
}

footer #footer-bottom-section a {
  color: var(--light-200);
  text-decoration: none;
}

footer #release-notes-footer-section {
  margin-left: auto;
  text-align: right;
  width: fit-content;
}

footer #release-notes-footer-section p {
  margin-bottom: 1rem;
}

footer #scroll-to-top-btn {
  display: flex;
  flex-direction: row;
  color: var(--light-200);
  background: var(--primary-300);
  gap: 10px;
  align-self: flex-end;
  padding: 10px;
  margin-right: var(--page-x-spacing);
  text-decoration: none;
}

footer #scroll-to-top-btn :hover {
  text-decoration: underline;
}

footer #scroll-to-top-btn img {
  height: 30%;
}

.gt_shiny .rt-sort-right {
  margin-left: auto;
}

.dataTables_wrapper {
  box-shadow: none !important;
}

.dataTables_wrapper table.dataTable {
  border-collapse: collapse;
}

.dataTables_wrapper table.dataTable thead th {
  border-bottom: 2px solid var(--dark-400) !important;
  font-weight: bold;
}

.dataTables_wrapper table.dataTable thead th.sorting::before, .dataTables_wrapper table.dataTable thead th.sorting::after {
  opacity: 0 !important;
}

.dataTables_wrapper table.dataTable thead th.sorting_asc::before, .dataTables_wrapper table.dataTable thead th.sorting_desc::after {
  opacity: 1 !important;
}

.dataTables_wrapper table.dataTable thead th.sorting_asc::after, .dataTables_wrapper table.dataTable thead th.sorting_desc::before {
  opacity: 0 !important;
}

.dataTables_wrapper table.dataTable tbody td {
  background-color: var(--light-200) !important;
  border-bottom: 1px solid var(--dark-400) !important;
  box-shadow: none !important;
  align-content: center;
}

.dataTables_wrapper table.dataTable tbody tr.odd > *,
.dataTables_wrapper table.dataTable tbody tr.even > * {
  box-shadow: none !important;
  background-color: var(--light-200) !important;
}

.dataTables_wrapper .dataTables_paginate {
  padding-top: 12px !important;
}

.dataTables_wrapper .dataTables_paginate .pagination {
  gap: 0;
}

.dataTables_wrapper .dataTables_paginate .pagination .page-item .page-link {
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--primary-300) !important;
  font-weight: normal;
  padding: 4px 4px !important;
  margin: 0;
  border-radius: 0 !important;
  text-decoration: none !important;
}

.dataTables_wrapper .dataTables_paginate .pagination .page-item .page-link:hover, .dataTables_wrapper .dataTables_paginate .pagination .page-item .page-link:active, .dataTables_wrapper .dataTables_paginate .pagination .page-item .page-link:focus {
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--primary-300) !important;
  text-decoration: none !important;
}

.dataTables_wrapper .dataTables_paginate .pagination .page-item.active .page-link {
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--primary-300) !important;
  font-weight: bold;
  border-bottom: 2px solid var(--primary-300) !important;
  text-decoration: none !important;
}

.dataTables_wrapper .dataTables_paginate .pagination .page-item.disabled .page-link {
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--light-600) !important;
  text-decoration: none !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button,
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.previous,
.dataTables_wrapper .dataTables_paginate .paginate_button.next {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--primary-300) !important;
  font-weight: normal;
  padding: 4px 8px !important;
  margin: 0 2px;
  border-radius: 0 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover, .dataTables_wrapper .dataTables_paginate .paginate_button:active, .dataTables_wrapper .dataTables_paginate .paginate_button:focus,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:active,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:focus,
.dataTables_wrapper .dataTables_paginate .paginate_button.previous:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.previous:active,
.dataTables_wrapper .dataTables_paginate .paginate_button.previous:focus,
.dataTables_wrapper .dataTables_paginate .paginate_button.next:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.next:active,
.dataTables_wrapper .dataTables_paginate .paginate_button.next:focus {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--primary-300) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:active,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:focus {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--primary-300) !important;
  font-weight: bold;
  border-bottom: 2px solid var(--primary-300) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--light-600) !important;
  cursor: default;
}

.gradient-white-circle {
  position: absolute;
  height: 16px;
  width: 16px;
  top: 8px;
  border-radius: 100px;
  background: var(--light-200);
  border: 1px solid var(--dark-400);
}

/**
 * Loading spinners
 *
 * Two variants:
 * 1. Full-page spinner — covers the entire viewport during initial load and page navigation
 * 2. Search/section spinner — covers a specific content area while data loads
 *
 * Uses the project's CSS custom properties for brand colours and spacing.
 */
/* ==========================================================================
   Loader parent container
   ========================================================================== */
.loader-parent {
  width: 100vw;
  height: 300px;
  background-color: var(--light-200);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  margin: var(--spacing-12) 0;
  /* Full-page variant — fixed overlay */
  /* Loading text */
  /* Ripple animation element */
}

.loader-parent.full-page {
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
}

.loader-parent .loading-text {
  color: var(--primary-300);
  font-family: var(--font-primary);
  font-weight: var(--font-weight-header);
  margin-bottom: var(--spacing-4);
}

.loader-parent .loader {
  width: 200px;
  height: 200px;
  display: inline-block;
  position: relative;
}

.loader-parent .loader::before, .loader-parent .loader::after {
  content: '';
  box-sizing: border-box;
  width: 200px;
  height: 200px;
  border-radius: var(--radius-full);
  border: 2px solid var(--primary-300);
  position: absolute;
  left: 0;
  top: 0;
  animation: animloader 2s linear infinite;
}

.loader-parent .loader::after {
  animation-delay: 1s;
}

/* ==========================================================================
   Search content visibility toggle
   ========================================================================== */
.hide-search-content {
  visibility: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  max-height: 0 !important;
}

/* ==========================================================================
   Existing button/inline spinner utilities (preserved)
   ========================================================================== */
.spinner-container {
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-5);
}

.spinner-visible {
  display: flex !important;
}

.spinner {
  border: 4px solid var(--light-500);
  border-top: 4px solid var(--primary-300);
  border-radius: var(--radius-full);
  width: 30px;
  height: 30px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.btn-spinner-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-4);
}

.btn--loading {
  position: relative;
  pointer-events: none;
  color: transparent !important;
  background-color: var(--light-600) !important;
}

.btn--loading::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1em;
  height: 1em;
  border-radius: var(--radius-full);
  border: 2px solid currentColor;
  border-top-color: transparent;
  color: var(--light-200);
  animation: spin 0.75s linear infinite;
}

/* ==========================================================================
   DISCONNECT OVERLAY
   Custom disconnect/reconnect modal that replaces the default Shiny behavior.
   ========================================================================== */
.disconnect-overlay {
  position: fixed;
  inset: 0;
  background: rgba(var(--dark-400-rgb), 0.65);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.disconnect-modal {
  background: var(--light-200);
  padding: var(--spacing-10);
  border-radius: var(--radius-lg);
  text-align: center;
  min-width: 320px;
  max-width: 40vw;
  box-shadow: 0 4px 20px rgba(var(--dark-400-rgb), 0.3);
}

.disconnect-modal__title {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-header);
  color: var(--primary-400);
  margin-bottom: var(--spacing-4);
}

.disconnect-modal__message {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-body);
  color: var(--dark-200);
  margin-bottom: var(--spacing-4);
}

.disconnect-modal__note {
  font-size: 0.8rem;
  color: var(--dark-200);
  margin-bottom: var(--spacing-6);
}

.disconnect-modal__actions {
  display: flex;
  gap: var(--spacing-4);
  justify-content: center;
}

.disconnect-modal__btn {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-header);
  border-radius: var(--radius-sm);
  padding: var(--spacing-2) var(--spacing-6);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.disconnect-modal__btn--primary {
  background: var(--primary-300);
  color: var(--light-200);
  border-color: var(--primary-300);
}

.disconnect-modal__btn--primary:hover {
  background: var(--primary-400);
  border-color: var(--primary-400);
}

.custom-tooltip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.custom-tooltip ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 1rem;
}

#home-page #home-banner-container {
  background-image: url("../img/other/home/banner.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

#home-page #home-banner-container #home-genome-overlay {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
  opacity: 0.5;
  pointer-events: none;
}

#home-page #home-banner-container #home-genome-overlay::after, #home-page #home-banner-container #home-genome-overlay::before {
  content: '';
  position: fixed;
  top: -50%;
  left: -50%;
  background-image: URL("../img/other/home/genome-overlay.png");
  width: 200%;
  height: 200%;
  background-size: 832px 441px;
  background-repeat: repeat;
  transform: rotate(-20deg);
  transform-origin: center;
  pointer-events: none;
  position: absolute;
}

#home-page #home-banner-container #home-genome-overlay::before {
  opacity: 1;
  animation: movePattern 20s linear infinite;
  z-index: -2;
}

#home-page #home-banner-container #home-genome-overlay::after {
  opacity: 0.4;
  animation: movePatternOffset 20s linear infinite;
  z-index: -3;
}

#home-page #home-feature_tiles-container img {
  background-color: var(--info-300);
  min-height: 200px;
  margin-bottom: 12px;
  border: none;
}

#home-page #home-explore-data-section .section-tile-title {
  margin: 10px 0;
}

#home-page #home-video-container > div {
  background-color: var(--info-300);
  min-height: 300px;
}

#biodiversity-page .checkbox span {
  font-weight: normal;
}

#biodiversity-page .saved-searches-section {
  padding: 30px;
}

#biodiversity-page .saved-searches-section h4 {
  font-weight: bold;
  margin-bottom: 1.5rem;
}

#biodiversity-page .saved-searches-section .saved-search-item {
  border: 1px solid var(--primary-300);
  background: var(--light-200);
  color: var(--primary-300);
  margin-right: 30px;
  position: relative;
  padding-right: 35px;
}

#biodiversity-page .saved-searches-section .saved-search-item:hover {
  background: var(--light-300);
}

#biodiversity-page .saved-searches-section .saved-search-item::after {
  content: '➜';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

#biodiversity-page #biodiversity-please_search {
  display: flex;
  background-color: var(--light-300);
  margin: 0;
  justify-content: center;
  align-items: center;
  padding-top: 50px;
  padding-bottom: 50px;
  margin-bottom: 50px;
}

#biodiversity-page #biodiversity-please_search p {
  margin: 0;
}

#biodiversity-page .display-settings {
  background-color: var(--light-500);
}

#biodiversity-page .display-settings label {
  font-weight: normal;
}

#biodiversity-page .display-settings .form-group {
  width: auto;
}

#biodiversity-page .display-settings .custom-ref-dates-button {
  padding-bottom: 20px;
  padding-right: 20px;
}

#biodiversity-page .display-settings input[type='checkbox'] {
  border-radius: 0;
}

.no-results-found {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
}

.no-results-found h3 {
  font-size: 1.5em;
  margin-bottom: 10px;
}

.no-results-found p {
  font-size: 1em;
}

.release-note-section h4 {
  font-weight: bold;
  padding-bottom: 30px;
}

#faqs-parent .accordion {
  color: var(--dark-400);
}

#faqs-parent .accordion .accordion-header > .accordion-button,
#faqs-parent .accordion .accordion-item {
  background-color: var(--light-200);
  border: none;
  color: var(--dark-400);
  border-radius: 0;
}

#faqs-parent .accordion .accordion-header > .accordion-button {
  font-weight: bold;
  padding: 10px 20px;
  color: var(--dark-400);
}

#faqs-parent .accordion .accordion-header > .accordion-button.active, #faqs-parent .accordion .accordion-header > .accordion-button:active, #faqs-parent .accordion .accordion-header > .accordion-button.focus, #faqs-parent .accordion .accordion-header > .accordion-button:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--primary-300-rgb), 0);
}

#faqs-parent .accordion .accordion-header > .accordion-button:active {
  outline-color: var(--light-200);
}

#faqs-parent .accordion .accordion-header > .accordion-button .accordion-icon {
  color: var(--dark-400);
}

#faqs-parent .accordion .accordion-header > .accordion-button::after {
  background-image: url("../img/icons/caret-down-dark.svg");
  height: 7px;
  width: 10px;
  background-size: cover;
}

#faqs-parent .accordion .accordion-body {
  padding: 1rem 1.25rem;
  color: var(--dark-400);
}

#faqs-parent .accordion .accordion-body .form-group {
  width: 260px;
}

#faqs-parent .accordion .accordion-body .form-group:has(.p-switch) {
  margin-bottom: 10px;
}

#faqs-parent .accordion .accordion-body .timeline-slider-input .form-group {
  width: 100%;
}

#faqs-parent .accordion {
  border-bottom: 1px solid var(--dark-400);
}

#faqs-parent .accordion .accordion-header > .accordion-button {
  padding: 20px 0;
  border-top: 1px solid var(--dark-400);
}

/** 
Species gallery which appears on the:
- Biodiversity page
*/
.species-gallery .gallery-card {
  display: grid;
  grid-template-columns: 0.3fr 0.7fr;
  gap: var(--spacing-6);
  background-color: var(--light-200);
  border: 1px solid var(--dark-400);
  margin: auto;
  padding: var(--spacing-6);
  width: 100%;
  height: 100%;
}

.species-gallery .gallery-card__img-container {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--light-400);
  aspect-ratio: 1 / 1;
}

.species-gallery .gallery-card__img-container:has(.gallery-card__placeholder) {
  background-color: var(--secondary-300);
}

.species-gallery .gallery-card__img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.species-gallery .gallery-card__placeholder {
  width: 70%;
}

.species-gallery .gallery-card__info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-left: var(--spacing-4);
}

.species-gallery .gallery-card__info .short-link {
  color: var(--dark-400);
}

.species-table__img-container {
  background-color: var(--light-400);
  height: 50px;
  margin-right: 10px;
  aspect-ratio: 1/1;
  object-fit: cover;
}

.search-module-container {
  background-color: var(--light-400);
  color: white;
}

.search-module-container .search-module-header {
  display: flex;
  justify-content: flex-end;
}

.search-module-container .search-module-header .search-mode-controls .btn-group {
  border: 1px solid var(--primary-300);
  border-radius: 0;
  padding: var(--spacing-1);
}

.search-module-container .search-module-header .search-mode-controls .btn-group input[checked='checked'] + label {
  background-color: var(--primary-300);
  border-color: var(--primary-300);
}

.search-module-container .search-module-header .search-mode-controls .btn-group input:not([checked='checked']) + label {
  background-color: transparent;
  border-color: transparent;
  color: var(--primary-300);
}

.search-module-container .search-module-body .search-filters .filter-group {
  padding: 10px 0;
  border-top: 1px solid var(--dark-400);
  display: flex;
  align-items: flex-end;
  flex-direction: row;
  gap: 30px;
}

.search-module-container .search-module-body .input-group-text {
  border: none;
}

.search-module-container .search-module-body .db-last-updated-note {
  font-style: italic;
  font-size: 12px;
  margin-top: -15px;
}

.search-module-container .search-module-footer {
  display: flex;
  justify-content: flex-end;
  gap: 24px;
}

.search-module-container .taxonomy-loading {
  position: relative;
  pointer-events: none;
}

.search-module-container .taxonomy-loading::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(200, 200, 200, 0.5);
  z-index: 1000;
  border-radius: 4px;
}

.search-module-container .taxonomy-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  margin-left: -12px;
  border: 3px solid #bdbdbd;
  border-top-color: #666;
  border-radius: 50%;
  animation: input-loading-spin 0.8s linear infinite;
  z-index: 1001;
}

.toro-container {
  position: relative;
}

.toro-container .map-filters-container {
  position: absolute;
  top: 0;
  left: 0;
}

.toro-container .map-filters-container .accordion {
  color: var(--light-200);
}

.toro-container .map-filters-container .accordion .accordion-header > .accordion-button,
.toro-container .map-filters-container .accordion .accordion-item {
  background-color: var(--primary-300);
  border: none;
  color: var(--light-200);
  border-radius: 0;
}

.toro-container .map-filters-container .accordion .accordion-header > .accordion-button {
  font-weight: bold;
  padding: 10px 20px;
  color: var(--light-200);
}

.toro-container .map-filters-container .accordion .accordion-header > .accordion-button.active, .toro-container .map-filters-container .accordion .accordion-header > .accordion-button:active, .toro-container .map-filters-container .accordion .accordion-header > .accordion-button.focus, .toro-container .map-filters-container .accordion .accordion-header > .accordion-button:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--primary-300-rgb), 0);
}

.toro-container .map-filters-container .accordion .accordion-header > .accordion-button:active {
  outline-color: var(--primary-300);
}

.toro-container .map-filters-container .accordion .accordion-header > .accordion-button .accordion-icon {
  color: var(--light-200);
}

.toro-container .map-filters-container .accordion .accordion-header > .accordion-button::after {
  background-image: url("../img/icons/caret-down-light.svg");
  height: 7px;
  width: 10px;
  background-size: cover;
}

.toro-container .map-filters-container .accordion .accordion-body {
  padding: 1rem 1.25rem;
  color: var(--light-200);
}

.toro-container .map-filters-container .accordion .accordion-body .form-group {
  width: 260px;
}

.toro-container .map-filters-container .accordion .accordion-body .form-group:has(.p-switch) {
  margin-bottom: 10px;
}

.toro-container .map-filters-container .accordion .accordion-body .timeline-slider-input .form-group {
  width: 100%;
}

.toro-container .map-filters-container .accordion {
  min-width: calc(2.5rem + 260px);
  color: var(--light-200);
}

.toro-container .map-filters-container .accordion .form-group .pretty.p-switch .state::before {
  border-color: var(--light-200);
  background-color: var(--light-200) !important;
  border-width: 2px;
  top: 50%;
  transform: translateY(-50%);
}

.toro-container .map-filters-container .accordion .form-group .pretty.p-switch .state label {
  font-weight: normal;
}

.toro-container .map-filters-container .accordion .form-group .pretty.p-switch .state label::after {
  left: 2px;
  background-color: var(--light-600) !important;
  top: 50%;
  transform: translateY(-50%) !important;
}

.toro-container .map-filters-container .accordion .form-group .pretty.p-switch input:checked ~ .state::before {
  border-color: var(--light-200);
  background-color: var(--light-200) !important;
}

.toro-container .map-filters-container .accordion .form-group .pretty.p-switch input:checked ~ .state label::after {
  background-color: var(--primary-300) !important;
  left: 1em;
}

.toro-container .map-filters-container .accordion .accordion-icon {
  height: 34px;
}

.toro-container .map-legend-control {
  position: absolute;
  top: 10px;
  right: 10px;
}

.toro-container .map-legend-control .accordion {
  color: var(--dark-400);
}

.toro-container .map-legend-control .accordion .accordion-header > .accordion-button,
.toro-container .map-legend-control .accordion .accordion-item {
  background-color: var(--light-400);
  border: none;
  color: var(--dark-400);
  border-radius: 0;
}

.toro-container .map-legend-control .accordion .accordion-header > .accordion-button {
  font-weight: bold;
  padding: 10px 20px;
  color: var(--dark-400);
}

.toro-container .map-legend-control .accordion .accordion-header > .accordion-button.active, .toro-container .map-legend-control .accordion .accordion-header > .accordion-button:active, .toro-container .map-legend-control .accordion .accordion-header > .accordion-button.focus, .toro-container .map-legend-control .accordion .accordion-header > .accordion-button:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--primary-300-rgb), 0);
}

.toro-container .map-legend-control .accordion .accordion-header > .accordion-button:active {
  outline-color: var(--light-400);
}

.toro-container .map-legend-control .accordion .accordion-header > .accordion-button .accordion-icon {
  color: var(--dark-400);
}

.toro-container .map-legend-control .accordion .accordion-header > .accordion-button::after {
  background-image: url("../img/icons/caret-down-dark.svg");
  height: 7px;
  width: 10px;
  background-size: cover;
}

.toro-container .map-legend-control .accordion .accordion-body {
  padding: 1rem 1.25rem;
  color: var(--dark-400);
}

.toro-container .map-legend-control .accordion .accordion-body .form-group {
  width: 260px;
}

.toro-container .map-legend-control .accordion .accordion-body .form-group:has(.p-switch) {
  margin-bottom: 10px;
}

.toro-container .map-legend-control .accordion .accordion-body .timeline-slider-input .form-group {
  width: 100%;
}

.toro-container .map-legend-control .accordion {
  min-width: calc(2.5rem + 180px);
}

.toro-container .map-legend-control .accordion .accordion-body {
  padding: 10px;
}

.toro-container .map-legend-control .map-legend__key {
  display: flex;
  flex-direction: row;
  gap: 5px;
  align-items: center;
}

.toro-container .map-legend-control .map-legend__icon {
  height: 12px;
  width: 12px;
  border-radius: 100%;
  border-width: 1px;
  border-style: solid;
}

.toro-container .mapbox-gl-draw_ctrl-draw-btn {
  pointer-events: none;
  z-index: 0;
  visibility: hidden;
  padding: 0;
}

.toro-container .maplibregl-ctrl-bottom-right {
  display: flex;
  flex-direction: column;
  margin: 0 10px 10px 0;
}

.toro-container .maplibregl-ctrl-bottom-right > div {
  margin: 0;
  box-shadow: none;
  background-color: var(--light-200);
  border-radius: 0;
}

.toro-container .maplibregl-ctrl-bottom-right > div button,
.toro-container .maplibregl-ctrl-bottom-right > div button:focus {
  width: 25px;
  height: 25px;
  border: 1px solid var(--dark-400);
  border-radius: 0;
  padding: 0;
}

.map-bottom-panel {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 30px;
  margin-top: 15px;
}

@media (max-width: 821px) {
  .map-bottom-panel {
    grid-template-columns: 1fr;
  }
}

.map-bottom-panel .map-bottom-control .accordion {
  color: var(--dark-400);
}

.map-bottom-panel .map-bottom-control .accordion .accordion-header > .accordion-button,
.map-bottom-panel .map-bottom-control .accordion .accordion-item {
  background-color: var(--light-400);
  border: none;
  color: var(--dark-400);
  border-radius: 0;
}

.map-bottom-panel .map-bottom-control .accordion .accordion-header > .accordion-button {
  font-weight: bold;
  padding: 10px 20px;
  color: var(--dark-400);
}

.map-bottom-panel .map-bottom-control .accordion .accordion-header > .accordion-button.active, .map-bottom-panel .map-bottom-control .accordion .accordion-header > .accordion-button:active, .map-bottom-panel .map-bottom-control .accordion .accordion-header > .accordion-button.focus, .map-bottom-panel .map-bottom-control .accordion .accordion-header > .accordion-button:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--primary-300-rgb), 0);
}

.map-bottom-panel .map-bottom-control .accordion .accordion-header > .accordion-button:active {
  outline-color: var(--light-400);
}

.map-bottom-panel .map-bottom-control .accordion .accordion-header > .accordion-button .accordion-icon {
  color: var(--dark-400);
}

.map-bottom-panel .map-bottom-control .accordion .accordion-header > .accordion-button::after {
  background-image: url("../img/icons/caret-down-dark.svg");
  height: 7px;
  width: 10px;
  background-size: cover;
}

.map-bottom-panel .map-bottom-control .accordion .accordion-body {
  padding: 1rem 1.25rem;
  color: var(--dark-400);
}

.map-bottom-panel .map-bottom-control .accordion .accordion-body .form-group {
  width: 260px;
}

.map-bottom-panel .map-bottom-control .accordion .accordion-body .form-group:has(.p-switch) {
  margin-bottom: 10px;
}

.map-bottom-panel .map-bottom-control .accordion .accordion-body .timeline-slider-input .form-group {
  width: 100%;
}

.map-bottom-panel .map-bottom-control .accordion .accordion-header .accordion-title {
  font-weight: bold;
}

.map-bottom-panel .map-bottom-control .accordion .accordion-header .accordion-icon {
  height: 16px;
  width: 16px;
  border: 1px solid var(--primary-300);
  padding: 2px;
}

.map-bottom-panel .map-bottom-control .accordion .accordion-header .accordion-icon > img {
  width: 100%;
  display: none;
}

.map-bottom-panel .map-bottom-control .accordion .accordion-header .accordion-button[aria-expanded='true'] {
  border-bottom: 1px solid rgba(var(--dark-200-rgb), 0.5);
}

.map-bottom-panel .map-bottom-control .accordion .accordion-header .accordion-button[aria-expanded='true'] .accordion-icon > img {
  display: block;
}

.map-bottom-panel .map-bottom-control.map-areas-control .map-areas-control__content .btn-dropdown-input,
.map-bottom-panel .map-bottom-control.map-areas-control .map-areas-control__content .btn {
  width: 100%;
}

.map-bottom-panel .map-bottom-control.map-areas-control .map-areas-control__content .btn {
  flex-direction: row;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.map-bottom-panel .map-bottom-control.map-areas-control .map-areas-control__content .btn > p {
  margin: 0;
  font-weight: bold;
  width: 100%;
}

.maplibregl-popup:has(.maplibregl-popup-content .samples-map-popup),
.maplibregl-popup .maplibregl-popup-content:has(.samples-map-popup) {
  min-width: 250px;
}

.maplibregl-popup:has(.maplibregl-popup-content .samples-map-popup) {
  padding-bottom: 35px;
}

.maplibregl-popup .maplibregl-popup-content:has(.samples-map-popup) {
  border-radius: var(--radius-md);
}

.maplibregl-popup .maplibregl-popup-content .samples-map-popup .maplibregl-popup-close-button {
  display: none;
}

.maplibregl-popup .maplibregl-popup-content .samples-map-popup hr {
  border-color: var(--primary-300);
  margin: 5px 0;
}

.maplibregl-popup .maplibregl-popup-content .samples-map-popup a {
  color: var(--primary-300);
}

.legend-selector_chips-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.legend-selector_chip {
  display: flex;
  justify-content: space-between;
  width: 300px;
  border: 1px solid black;
  border-radius: 5px;
  padding: 5px;
}

.legend-selector_chip button {
  padding: unset;
  background: none;
  border: none;
  cursor: pointer;
}

.legend-selector_chip .btn:hover {
  color: inherit;
  background: inherit;
  border: none;
}

.legend-selector_chip i {
  display: block;
  padding: 5px;
}

.exporter_module_button {
  color: grey;
  text-align: right;
  min-width: 130px;
}

.exporter_module_container {
  padding-left: 10%;
}

.exporter_module_container a.shiny-download-link.disabled {
  pointer-events: unset;
  cursor: not-allowed;
}

#chat-page div#chat-final-answer-text {
  font-size: 20px;
}

#chat-page .form-control.shiny-input-textarea {
  font-size: 1.25rem !important;
}

#chat-page .spinner-container {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

#chat-page .spinner-visible {
  display: flex !important;
}

#chat-page .spinner {
  border: 4px solid #f3f3f3;
  /* Light grey */
  border-top: 4px solid #007bff;
  /* Bootstrap blue */
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

#chat-page .text-visible {
  display: block;
}

#chat-page .text-invisible {
  display: none;
}

#chat-page > div:first-child > .shiny-text-output {
  margin-left: auto;
  width: fit-content;
}

#chat-page > div {
  padding: 0;
}

#chat-page > div h5 {
  font-weight: bold;
  margin: 0.75rem 0;
}

#chat-page div:first-child .form-group {
  max-width: unset;
  width: 100%;
}

#chat-page div:first-child .form-group textarea.shiny-input-textarea {
  border-radius: 0px;
  border: 1px solid black;
  width: 100%;
  min-height: 200px;
}

#chat-page div:first-child .form-group + div {
  gap: 1rem;
  align-items: end;
}

#chat-page div:first-child .form-group + div .white-btn {
  padding: 0.5rem;
  aspect-ratio: 1/1;
  height: 100%;
  justify-self: end;
  font-size: 1.4rem;
  line-height: 1.2rem;
}

#chat-page #chat-python_output h1 {
  font-size: 16px;
  color: #444;
  font-weight: bold;
  font-style: italic;
  font-family: 'Courier';
}

#chat-page .accordion {
  margin-top: 2rem;
  max-height: 300px;
  overflow-y: auto;
}

#chat-page .accordion-header button {
  font-weight: bold;
}

#chat-page p:empty {
  display: none;
}

#chat-page #show-example-text {
  align-items: center;
  gap: 0.5rem;
  text-decoration: underline;
  font-size: 16px;
}

#chat-page #show-example-text bslib-tooltip {
  pointer-events: none;
}

#biodiversity-samples_over_time-container #biodiversity-samples_over_time-samples-settings {
  width: fit-content;
  min-width: 25%;
  gap: 20px;
}

#biodiversity-samples_over_time-container #biodiversity-samples_over_time-samples-settings #reference_dates {
  display: none;
}

@keyframes movePattern {
  from {
    background-position: 0 0;
    transform: rotate(-10deg);
  }
  to {
    background-position: 832px 0px;
    transform: rotate(-10deg);
  }
}

@keyframes movePatternOffset {
  from {
    background-position: 0 0;
    transform: rotate(-11deg);
  }
  to {
    background-position: 832px 0;
    transform: rotate(-11deg);
  }
}

@keyframes input-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes animloader {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

.panel-auth {
  background-size: cover !important;
}

.panel-auth .panel-primary {
  background: white;
  padding: 30px;
  border-radius: 25px;
  box-shadow: 0px 0px 5px 3px black;
}

.panel-auth .panel-primary #auth-shinymanager-auth-head {
  display: none;
}