/** Shopify CDN: Minification failed

Line 1305:0 Unexpected "@media"

**/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Helvetica, Sans-Serif;
  letter-spacing: 0.015em;
}

p {
  margin-bottom: 0;
}
img {
  width: 100%;
}
a {
  text-decoration: none;
  color: inherit;
}

p,
ul,
li,
a::not(.f-w-700),
div {
  font-weight: 300;
}

:root {
  /* resposive settings */
  --mobile-start: 1023px;

  /* font fix */
  --font-body-weight: 300;

  /* colors */
  --primary: #836A4D;
  --secondary: #062BAE;
  --back: #E1DAD3;
  --black: #1D1D10;
  --white: #F8F6F5;

  /* gutter */
  --gutter: 15px;

  /* spacings */
  --spacing-xxxs: 5px;
  --spacing-xxs: 13px;
  --spacing-xs: 21px;
  --spacing-s: 30px;
  --spacing-m: 55px;
  --spacing-l: 89px;
  --spacing-xl: 144px;

  /* spacings */
  --spacing-5: 0.5rem;
  --spacing-10: 1rem;
  --spacing-15: 1.5rem;
  --spacing-20: 2rem;
  --spacing-30: 3rem;
  --spacing-35: 3.5rem;
  --spacing-40: 4rem;
  --spacing-50: 5rem;
  --spacing-60: 6rem;
  --spacing-70: 7rem;
  --spacing-80: 8rem;
  --spacing-90: 9rem;
  --spacing-100: 10rem;
  --spacing-120: 12rem;
  --spacing-150: 15rem;
  --spacing-180: 18rem;
  --spacing-200: 20rem;
  --spacing-240: 24rem;

  /* round edges */
  --round: 9px;
}

html,
body {
  color: var(--black);
  letter-spacing: 0 !important;
}

/* FLEX */
.flex-row {
  display: flex;
  flex-wrap: wrap;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

/* —————————————————— LAYOUT —————————————————— */

/* CONTAINERS */
.container-full-desktop {
  width: calc(100% - 11rem);
  margin: auto;
}

@media only screen and (max-width: 1023px) {
  .container-full-desktop {
    width: calc(100% - 68px);
    margin: auto;
  }
}

.w50 {
  width: 50%;
}
.max-h-100 {
  max-height: 100vh;
}
.vh-100 {
  height: 100vh;
}
/* —————————————————— BACKGROUNDS —————————————————— */
.b-primary {
  background-color: var(--primary);
}
.b-secondary {
  background-color: var(--secondary);
}
.b-back {
  background-color: var(--back);
}
.b-black {
  background-color: var(--black);
}
.b-white {
  background-color: var(--white);
}

/* —————————————————— COLORS —————————————————— */
.c-primary {
  color: var(--primary);
}
.c-secondary {
  color: var(--secondary);
}
.c-back {
  color: var(--back);
}
.c-black {
  color: var(--black);
}
.c-white {
  color: var(--white);
}

/* —————————————————— MARGINS / PADDINGS —————————————————— */
.py-xxxs {
  padding-top: var(--spacing-xxxs);
  padding-bottom: var(--spacing-xxxs);
}
.py-xxs {
  padding-top: var(--spacing-xxs);
  padding-bottom: var(--spacing-xxs);
}
.py-xs {
  padding-top: var(--spacing-xs);
  padding-bottom: var(--spacing-xs);
}
.py-s {
  padding-top: var(--spacing-s);
  padding-bottom: var(--spacing-s);
}
.py-m {
  padding-top: var(--spacing-m);
  padding-bottom: var(--spacing-m);
}
.py-l {
  padding-top: var(--spacing-l);
  padding-bottom: var(--spacing-l);
}
.py-xl {
  padding-top: var(--spacing-xl);
  padding-bottom: var(--spacing-xl);
}

.px-xxxs {
  padding-right: var(--spacing-xxxs);
  padding-left: var(--spacing-xxxs);
}
.px-xxs {
  padding-right: var(--spacing-xxs);
  padding-left: var(--spacing-xxs);
}
.px-xs {
  padding-right: var(--spacing-xs);
  padding-left: var(--spacing-xs);
}
.px-s {
  padding-right: var(--spacing-s);
  padding-left: var(--spacing-s);
}
.px-m {
  padding-right: var(--spacing-m);
  padding-left: var(--spacing-m);
}
.px-l {
  padding-right: var(--spacing-l);
  padding-left: var(--spacing-l);
}
.px-xl {
  padding-right: var(--spacing-xl);
  padding-left: var(--spacing-xl);
}

.pb-xxxs {
  padding-bottom: var(--spacing-xxxs);
}
.pb-xxs {
  padding-bottom: var(--spacing-xxs);
}
.pb-xs {
  padding-bottom: var(--spacing-xs);
}
.pb-s {
  padding-bottom: var(--spacing-s);
}
.pb-m {
  padding-bottom: var(--spacing-m);
}
.pb-l {
  padding-bottom: var(--spacing-l);
}
.pb-xl {
  padding-bottom: var(--spacing-xl);
}

.pt-xxxs {
  padding-top: var(--spacing-xxxs);
}
.pt-xxs {
  padding-top: var(--spacing-xxs);
}
.pt-xs {
  padding-top: var(--spacing-xs);
}
.pt-s {
  padding-top: var(--spacing-s);
}
.pt-m {
  padding-top: var(--spacing-m);
}
.pt-l {
  padding-top: var(--spacing-l);
}
.pt-xl {
  padding-top: var(--spacing-xl);
}

.pl-xxxs {
  padding-left: var(--spacing-xxxs);
}
.pl-xxs {
  padding-left: var(--spacing-xxs);
}
.pl-xs {
  padding-left: var(--spacing-xs);
}
.pl-s {
  padding-left: var(--spacing-s);
}
.pl-m {
  padding-left: var(--spacing-m);
}
.pl-l {
  padding-left: var(--spacing-l);
}
.pl-xl {
  padding-left: var(--spacing-xl);
}

.pr-xxxs {
  padding-right: var(--spacing-xxxs);
}
.pr-xxs {
  padding-right: var(--spacing-xxs);
}
.pr-xs {
  padding-right: var(--spacing-xs);
}
.pr-s {
  padding-right: var(--spacing-s);
}
.pr-m {
  padding-right: var(--spacing-m);
}
.pr-l {
  padding-right: var(--spacing-l);
}
.pr-xl {
  padding-right: var(--spacing-xl);
}



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

.mx-xxxs {
  margin-right: var(--spacing-xxxs);
  margin-left: var(--spacing-xxxs);
}
.mx-xxs {
  margin-right: var(--spacing-xxs);
  margin-left: var(--spacing-xxs);
}
.mx-xs {
  margin-right: var(--spacing-xs);
  margin-left: var(--spacing-xs);
}
.mx-s {
  margin-right: var(--spacing-s);
  margin-left: var(--spacing-s);
}
.mx-m {
  margin-right: var(--spacing-m);
  margin-left: var(--spacing-m);
}
.mx-l {
  margin-right: var(--spacing-l);
  margin-left: var(--spacing-l);
}
.mx-xl {
  margin-right: var(--spacing-xl);
  margin-left: var(--spacing-xl);
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.mb-xxxs {
  margin-bottom: var(--spacing-xxxs);
}
.mb-xxs {
  margin-bottom: var(--spacing-xxs);
}
.mb-xs {
  margin-bottom: var(--spacing-xs);
}
.mb-s {
  margin-bottom: var(--spacing-s);
}
.mb-m {
  margin-bottom: var(--spacing-m);
}
.mb-l {
  margin-bottom: var(--spacing-l);
}
.mb-xl {
  margin-bottom: var(--spacing-xl);
}

.mt-xxxs {
  margin-top: var(--spacing-xxxs);
}
.mt-xxs {
  margin-top: var(--spacing-xxs);
}
.mt-xs {
  margin-top: var(--spacing-xs);
}
.mt-s {
  margin-top: var(--spacing-s);
}
.mt-m {
  margin-top: var(--spacing-m);
}
.mt-l {
  margin-top: var(--spacing-l);
}
.mt-xl {
  margin-top: var(--spacing-xl);
}

.ml-xxxs {
  margin-left: var(--spacing-xxxs);
}
.ml-xxs {
  margin-left: var(--spacing-xxs);
}
.ml-xs {
  margin-left: var(--spacing-xs);
}
.ml-s {
  margin-left: var(--spacing-s);
}
.ml-m {
  margin-left: var(--spacing-m);
}
.ml-l {
  margin-left: var(--spacing-l);
}
.ml-xl {
  margin-left: var(--spacing-xl);
}

.mr-xxs {
  margin-right: var(--spacing-xxxs);
}
.mr-xxs {
  margin-right: var(--spacing-xxs);
}
.mr-xs {
  margin-right: var(--spacing-xs);
}
.mr-s {
  margin-right: var(--spacing-s);
}
.mr-m {
  margin-right: var(--spacing-m);
}
.mr-l {
  margin-right: var(--spacing-l);
}
.mr-xl {
  margin-right: var(--spacing-xl);
}

@media only screen and (max-width: 1023px) {

  .py-m-xxxs {
    padding-top: var(--spacing-xxxs);
    padding-bottom: var(--spacing-xxxs);
  }
  .py-m-xxs {
    padding-top: var(--spacing-xxs);
    padding-bottom: var(--spacing-xxs);
  }
  .py-m-xs {
    padding-top: var(--spacing-xs);
    padding-bottom: var(--spacing-xs);
  }
  .py-m-s {
    padding-top: var(--spacing-s);
    padding-bottom: var(--spacing-s);
  }
  .py-m-m {
    padding-top: var(--spacing-m);
    padding-bottom: var(--spacing-m);
  }
  .py-m-l {
    padding-top: var(--spacing-l);
    padding-bottom: var(--spacing-l);
  }
  .py-m-xl {
    padding-top: var(--spacing-xl);
    padding-bottom: var(--spacing-xl);
  }

  .px-m-xxxs {
    padding-right: var(--spacing-xxxs);
    padding-left: var(--spacing-xxxs);
  }
  .px-m-xxs {
    padding-right: var(--spacing-xxs);
    padding-left: var(--spacing-xxs);
  }
  .px-m-xs {
    padding-right: var(--spacing-xs);
    padding-left: var(--spacing-xs);
  }
  .px-m-s {
    padding-right: var(--spacing-s);
    padding-left: var(--spacing-s);
  }
  .px-m-m {
    padding-right: var(--spacing-m);
    padding-left: var(--spacing-m);
  }
  .px-m-l {
    padding-right: var(--spacing-l);
    padding-left: var(--spacing-l);
  }
  .px-m-xl {
    padding-right: var(--spacing-xl);
    padding-left: var(--spacing-xl);
  }

  .pb-m-xxxs {
    padding-bottom: var(--spacing-xxxs);
  }
  .pb-m-xxs {
    padding-bottom: var(--spacing-xxs);
  }
  .pb-m-xs {
    padding-bottom: var(--spacing-xs);
  }
  .pb-m-s {
    padding-bottom: var(--spacing-s);
  }
  .pb-m-m {
    padding-bottom: var(--spacing-m);
  }
  .pb-m-l {
    padding-bottom: var(--spacing-l);
  }
  .pb-m-xl {
    padding-bottom: var(--spacing-xl);
  }

  .pt-m-xxxs {
    padding-top: var(--spacing-xxxs);
  }
  .pt-m-xxs {
    padding-top: var(--spacing-xxs);
  }
  .pt-m-xs {
    padding-top: var(--spacing-xs);
  }
  .pt-m-s {
    padding-top: var(--spacing-s);
  }
  .pt-m-m {
    padding-top: var(--spacing-m);
  }
  .pt-m-l {
    padding-top: var(--spacing-l);
  }
  .pt-m-xl {
    padding-top: var(--spacing-xl);
  }

  .pl-m-xxxs {
    padding-left: var(--spacing-xxxs);
  }
  .pl-m-xxs {
    padding-left: var(--spacing-xxs);
  }
  .pl-m-xs {
    padding-left: var(--spacing-xs);
  }
  .pl-m-s {
    padding-left: var(--spacing-s);
  }
  .pl-m-m {
    padding-left: var(--spacing-m);
  }
  .pl-m-l {
    padding-left: var(--spacing-l);
  }
  .pl-m-xl {
    padding-left: var(--spacing-xl);
  }

  .pr-m-xxxs {
    padding-right: var(--spacing-xxxs);
  }
  .pr-m-xxs {
    padding-right: var(--spacing-xxs);
  }
  .pr-m-xs {
    padding-right: var(--spacing-xs);
  }
  .pr-m-s {
    padding-right: var(--spacing-s);
  }
  .pr-m-m {
    padding-right: var(--spacing-m);
  }
  .pr-m-l {
    padding-right: var(--spacing-l);
  }
  .pr-m-xl {
    padding-right: var(--spacing-xl);
  }



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

  .mx-m-xxxs {
    margin-right: var(--spacing-xxxs);
    margin-left: var(--spacing-xxxs);
  }
  .mx-m-xxs {
    margin-right: var(--spacing-xxs);
    margin-left: var(--spacing-xxs);
  }
  .mx-m-xs {
    margin-right: var(--spacing-xs);
    margin-left: var(--spacing-xs);
  }
  .mx-m-s {
    margin-right: var(--spacing-s);
    margin-left: var(--spacing-s);
  }
  .mx-m-m {
    margin-right: var(--spacing-m);
    margin-left: var(--spacing-m);
  }
  .mx-m-l {
    margin-right: var(--spacing-l);
    margin-left: var(--spacing-l);
  }
  .mx-m-xl {
    margin-right: var(--spacing-xl);
    margin-left: var(--spacing-xl);
  }

  .mx-m-auto {
    margin-left: auto;
    margin-right: auto;
  }

  .mb-m-xxxs {
    margin-bottom: var(--spacing-xxxs);
  }
  .mb-m-xxs {
    margin-bottom: var(--spacing-xxs);
  }
  .mb-m-xs {
    margin-bottom: var(--spacing-xs);
  }
  .mb-m-s {
    margin-bottom: var(--spacing-s);
  }
  .mb-m-m {
    margin-bottom: var(--spacing-m);
  }
  .mb-m-l {
    margin-bottom: var(--spacing-l);
  }
  .mb-m-xl {
    margin-bottom: var(--spacing-xl);
  }

  .mt-m-xxxs {
    margin-top: var(--spacing-xxxs);
  }
  .mt-m-xxs {
    margin-top: var(--spacing-xxs);
  }
  .mt-m-xs {
    margin-top: var(--spacing-xs);
  }
  .mt-m-s {
    margin-top: var(--spacing-s);
  }
  .mt-m-m {
    margin-top: var(--spacing-m);
  }
  .mt-m-l {
    margin-top: var(--spacing-l);
  }
  .mt-m-xl {
    margin-top: var(--spacing-xl);
  }

  .ml-m-xxxs {
    margin-left: var(--spacing-xxxs);
  }
  .ml-m-xxs {
    margin-left: var(--spacing-xxs);
  }
  .ml-m-xs {
    margin-left: var(--spacing-xs);
  }
  .ml-m-s {
    margin-left: var(--spacing-s);
  }
  .ml-m-m {
    margin-left: var(--spacing-m);
  }
  .ml-m-l {
    margin-left: var(--spacing-l);
  }
  .ml-m-xl {
    margin-left: var(--spacing-xl);
  }

  .mr-m-xxs {
    margin-right: var(--spacing-xxxs);
  }
  .mr-m-xxs {
    margin-right: var(--spacing-xxs);
  }
  .mr-m-xs {
    margin-right: var(--spacing-xs);
  }
  .mr-m-s {
    margin-right: var(--spacing-s);
  }
  .mr-m-m {
    margin-right: var(--spacing-m);
  }
  .mr-m-l {
    margin-right: var(--spacing-l);
  }
  .mr-m-xl {
    margin-right: var(--spacing-xl);
  }
}

.stop {
  clear: both;
}

a {
  text-decoration: none;
  color: inherit;
}
a:hover {
  text-decoration: none;
  color: inherit;
}

.trs-02 {
  transition: all 0.2s;
  -webkit-transition: all 0.2s;
}
.trs-05 {
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
}
.trs-1 {
  transition: all 1s;
  -webkit-transition: all 1s;
}
.trs-15 {
  transition: all 1.5s;
  -webkit-transition: all 1.5s;
}
.trs-2 {
  transition: all 2s;
  -webkit-transition: all 2s;
}

.align-c {
  text-align: center;
}
.align-l {
  text-align: left;
}
.align-r {
  text-align: right;
}

@media only screen and (max-width: 1023px) {
  .align-xs-c {
    text-align: center;
  }
  .align-xs-r {
    text-align: right;
  }
  .align-xs-l {
    text-align: left;
  }
}


.t-u {
  text-transform: uppercase;
}
.t-l {
  text-transform: lowercase;
}
.t-cap {
  text-transform: capitalize;
}
.t-underline {
  text-decoration: underline;
}

.full-div {
  width: 100%;
  height: 100%;
}

.back-cover {
  background-size: cover;
  background-position: center center;
}
.ofit-cover {
  object-fit: cover;
}

.d-ib {
  display: inline-block;
}
.d-b {
  display: block;
}
.d-f {
  display: flex;
  gap: var(--gutter);
}
.d-ig {
  display: inline-grid;
}
.d-g {
  display: grid;
}
.d-none {
  display: none;
}

.grid-4-cols {
  grid-template-columns: repeat(4, 1fr);
  column-gap: 5px;
  row-gap: var(--spacing-m);
}
.row-gap-tight {
  row-gap: 5px;
}

.grid-full-align {
  align-items: center;
  justify-content: center;
}

.w100 {
  width: 100%;
}
.w90 {
  width: 90%;
}
.w80 {
  width: 80%;
}
.h100 {
  height: 100%;
}
.w0 {
  width: 0;
}
.h0 {
  height: 0;
}
.vh100 {
  height: 100vh;
}

/* CURSOR */
.c-pointer {
  cursor: pointer;
}

/* POSITION */
.p-r {
  position: relative;
}
.p-a {
  position: absolute;
}
.p-f {
  position: fixed;
}
.p-s {
  position: sticky;
}

.p-0 {
  top: 0;
  left: 0;
}
.p-t-0 {
  top: 0;
}
.p-r-0 {
  right: 0;
}
.p-b-0 {
  bottom: 0;
}
.p-l-0 {
  left: 0;
}

/* Z-INDEX */
.l-0 {
  z-index: 0;
}
.l-1 {
  z-index: 1;
}
.l-2 {
  z-index: 2;
}
.l-3 {
  z-index: 3;
}
.l-4 {
  z-index: 4;
}
.l-5 {
  z-index: 5;
}
.l-10 {
  z-index: 10;
}
.l-11 {
  z-index: 11;
}
.l-12 {
  z-index: 12;
}
.l-13 {
  z-index: 13;
}
.l-14 {
  z-index: 14;
}
.l-101 {
  z-index: 100;
}
.l-101 {
  z-index: 101;
}
.l-102 {
  z-index: 102;
}
.l-103 {
  z-index: 103;
}
.l-104 {
  z-index: 104;
}
.l-105 {
  z-index: 105;
}
.l-999 {
  z-index: 999;
}
.l-1000 {
  z-index: 1000;
}
.l-1001 {
  z-index: 1001;
}
.l-1002 {
  z-index: 1002;
}
.l-1003 {
  z-index: 1003;
}
.l-1004 {
  z-index: 1004;
}
.l-1005 {
  z-index: 1005;
}


.d-ib {
  display: inline-block;
}
.d-b {
  display: block;
}
.d-none {
  display: none;
}

.d-grid {
  display: grid;
}
.grid-full-align {
  align-items: center;
}
.grid-vert-align {
  align-items: center;
}


.op-0 {
  opacity: 0;
}
.op-1 {
  opacity: 1;
}


.of-h {
  overflow: hidden;
}
.of-s {
  overflow: scroll;
}



/* BLOCK ALIGN */
.ver-align {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: block;
}
.hor-align {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: block;
}
.full-align {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


.f-left {
  float: left
}
.f-right {
  float: right;
}
.stop {
  clear: both;
}



.c1 {
  width: 99%;
  float: left;
}
.c2 {
  width: 49%;
  margin-right: 1%;
  float: left;
}
.c3 {
  width: 32.333%;
  margin-right: 1%;
  float: left;
}
.c4 {
  width: 24%;
  margin-right: 1%;
  float: left;
}
.c5 {
  width: 19%;
  margin-right: 1%;
  float: left;
}
.c6 {
  width: 15.666%;
  margin-right: 1%;
  float: left;
}

.t-size-1 {
  font-size: 0.9rem;
}
.t-size-2 {
  font-size: 1rem;
}
.t-size-3 {
  font-size: 1.25rem;
}
.t-size-4 {
  font-size: 1.3rem;
}
.t-size-5 {
  font-size: 1.4rem;
}
.t-size-6 {
  font-size: 1.8rem;
}
.t-size-65 {
  font-size: 2rem;
}
.t-size-65-1 {
  font-size: 2.1rem;
}
.t-size-7 {
  font-size: 2.4rem;
}
.t-size-75 {
  font-size: 2.8rem;
}
.t-size-8 {
  font-size: 3.2rem;
}
.t-size-9 {
  font-size: 3.6rem;
}


.t-lh-1 {
  line-height: 1 !important
}
.t-lh-11 {
  line-height: 1.1
}
.t-lh-12 {
  line-height: 1.2
}
.t-lh-13 {
  line-height: 1.3
}
.t-lh-14 {
  line-height: 1.4
}
.t-lh-15 {
  line-height: 1.5
}
.t-lh-16 {
  line-height: 1.6
}

.circle {
  border-radius: 50%;
}

.br-5 {
  border-radius: 5px;
}
.br-10 {
  border-radius: 10px;
}
.br-15 {
  border-radius: 15px;
}
.br-20 {
  border-radius: 20px;
}
.br-25 {
  border-radius: 25px;
}
.br-30 {
  border-radius: 30px;
}
.br-35 {
  border-radius: 35px;
}

.br-t-25 {
  border-radius: 25px 25px 0 0;
}
.br-t-30 {
  border-radius: 30px 30px 0 0;
}
.br-t-35 {
  border-radius: 35px 35px 0 0;
}



.br-2b {
  border-radius: 2vw;
}
.br-3b {
  border-radius: 3vw;
}
.br-4b {
  border-radius: 4vw;
}


.horizontal-scroll-father {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
.horizontal-scroll-child {
  scroll-snap-align: center;
  flex-shrink: 0;
}

.notransition {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}

.f-w-200 {
  font-weight: 200;
}
.f-w-300 {
  font-weight: 300;
}
.f-w-400 {
  /*font-weight:400;*/
  font-weight: 300;
}
.f-w-500 {
  font-weight: 500;
}
.f-w-600 {
  /*font-weight:600;*/
  font-weight: 500;
}
.f-w-700 {
  /*font-weight:700;*/
  font-weight: 500;
}
.f-w-800 {
  font-weight: 700;
}

.break-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}




.op-01 { opacity: 0.1; }
.op-02 { opacity: 0.2; }
.op-03 { opacity: 0.3; }
.op-04 { opacity: 0.4; }
.op-05 { opacity: 0.5; }
.op-06 { opacity: 0.6; }
.op-07 { opacity: 0.7; }
.op-08 { opacity: 0.8; }
.op-09 { opacity: 0.9; }
.op-1 { opacity: 1; }


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

.w0 { width: 0%;}
.w10 { width: 10%;}
.w20 { width: 20%;}
.w30 { width: 30%;}
.w40 { width: 40%;}
.w45 { width: 45%;}
.w50 { width: 50%;}
.w55 { width: 55%;}
.w60 { width: 60%;}
.w65 { width: 65%;}
.w70 { width: 70%;}
.w75 { width: 75%;}
.w80 { width: 80%;}
.w85 { width: 85%;}
.w90 { width: 90%;}
.w95 { width: 95%;}
.w100 { width: 100%;}
.vw100 { width: 100vw; width: 100dwh; }s


@media only screen and (max-width: 1023px) {
  .m-h-fit-content { height: fit-content; }

  .w-m-0 { width: 0%;}
  .w-m-10 { width: 10%;}
  .w-m-20 { width: 20%;}
  .w-m-30 { width: 30%;}
  .w-m-40 { width: 40%;}
  .w-m-45 { width: 45%;}
  .w-m-50 { width: 50%;}
  .w-m-55 { width: 55%;}
  .w-m-60 { width: 60%;}
  .w-m-65 { width: 65%;}
  .w-m-70 { width: 70%;}
  .w-m-75 { width: 75%;}
  .w-m-80 { width: 80%;}
  .w-m-85 { width: 85%;}
  .w-m-90 { width: 90%;}
  .w-m-95 { width: 95%;}
  .w-m-100 { width: 100%;}
}



/* —————————————————— MARGINS / PADDINGS —————————————————— */
.p-0 { padding: 0; }
.p-5 { padding: var(--spacing-5); }
.p-10 { padding: var(--spacing-1); }
.p-15 { padding: var(--spacing-15); }
.p-20 { padding: var(--spacing-20); }
.p-30 { padding: var(--spacing-30); }
.p-40 { padding: var(--spacing-40); }
.p-50 { padding: var(--spacing-50); }
.p-60 { padding: var(--spacing-60); }
.p-80 { padding: var(--spacing-80); }
.p-90 { padding: var(--spacing-90); }
.p-100 { padding: var(--spacing-100); }
.p-120 { padding: var(--spacing-120); }
.p-150 { padding: var(--spacing-150); }
.p-180 { padding: var(--spacing-180); }
.p-200 { padding: var(--spacing-200); }
.p-240 { padding: var(--spacing-240); }

.py-0 { padding-top: 0; padding-bottom: 0; }
.py-5 { padding-top: var(--spacing-5); padding-bottom: var(--spacing-5); }
.py-10 { padding-top: var(--spacing-10); padding-bottom: var(--spacing-10); }
.py-15 { padding-top: var(--spacing-15); padding-bottom: var(--spacing-15); }
.py-20 { padding-top: var(--spacing-20); padding-bottom: var(--spacing-20); }
.py-30 { padding-top: var(--spacing-30); padding-bottom: var(--spacing-30); }
.py-35 { padding-top: var(--spacing-35); padding-bottom: var(--spacing-35); }
.py-40 { padding-top: var(--spacing-40); padding-bottom: var(--spacing-40); }
.py-50 { padding-top: var(--spacing-50); padding-bottom: var(--spacing-50); }
.py-60 { padding-top: var(--spacing-60); padding-bottom: var(--spacing-60); }
.py-80 { padding-top: var(--spacing-80); padding-bottom: var(--spacing-80); }
.py-100 { padding-top: var(--spacing-100); padding-bottom: var(--spacing-100); }
.py-120 { padding-top: var(--spacing-120); padding-bottom: var(--spacing-120); }
.py-240 { padding-top: var(--spacing-240); padding-bottom: var(--spacing-240); }


.px-0 { padding-right: 0; padding-left: 0; }
.px-5 { padding-right: var(--spacing-5); padding-left: var(--spacing-5); }
.px-10 { padding-right: var(--spacing-10); padding-left: var(--spacing-10); }
.px-15 { padding-right: var(--spacing-15); padding-left: var(--spacing-15); }
.px-20 { padding-right: var(--spacing-20); padding-left: var(--spacing-20); }
.px-30 { padding-right: var(--spacing-30); padding-left: var(--spacing-30); }
.px-40 { padding-right: var(--spacing-40); padding-left: var(--spacing-40); }
.px-50 { padding-right: var(--spacing-50); padding-left: var(--spacing-50); }
.px-60 { padding-right: var(--spacing-60); padding-left: var(--spacing-60); }
.px-80 { padding-right: var(--spacing-80); padding-left: var(--spacing-80); }
.px-100 { padding-right: var(--spacing-100); padding-left: var(--spacing-100); }
.px-120 { padding-right: var(--spacing-120); padding-left: var(--spacing-120); }
.px-200 { padding-right: var(--spacing-200); padding-left: var(--spacing-200); }
.px-240 { padding-right: var(--spacing-240); padding-left: var(--spacing-240); }


.pb-0 { padding-bottom: 0; }
.pb-5 { padding-bottom: var(--spacing-5); }
.pb-10 { padding-bottom: var(--spacing-1); }
.pb-15 { padding-bottom: var(--spacing-15); }
.pb-20 { padding-bottom: var(--spacing-20); }
.pb-30 { padding-bottom: var(--spacing-30); }
.pb-40 { padding-bottom: var(--spacing-40); }
.pb-50 { padding-bottom: var(--spacing-50); }
.pb-60 { padding-bottom: var(--spacing-60); }
.pb-80 { padding-bottom: var(--spacing-80); }
.pb-90 { padding-bottom: var(--spacing-90); }
.pb-100 { padding-bottom: var(--spacing-100); }
.pb-120 { padding-bottom: var(--spacing-120); }
.pb-150 { padding-bottom: var(--spacing-150); }
.pb-180 { padding-bottom: var(--spacing-180); }
.pb-200 { padding-bottom: var(--spacing-200); }
.pb-240 { padding-bottom: var(--spacing-240); }

.pt-0 { padding-top: 0; }
.pt-5 { padding-top: var(--spacing-5); }
.pt-10 { padding-top: var(--spacing-1); }
.pt-15 { padding-top: var(--spacing-15); }
.pt-20 { padding-top: var(--spacing-20); }
.pt-30 { padding-top: var(--spacing-30); }
.pt-40 { padding-top: var(--spacing-40); }
.pt-60 { padding-top: var(--spacing-60); }
.pt-80 { padding-top: var(--spacing-80); }
.pt-90 { padding-top: var(--spacing-90); }
.pt-100 { padding-top: var(--spacing-100); }
.pt-120 { padding-top: var(--spacing-120); }
.pt-150 { padding-top: var(--spacing-150); }
.pt-180 { padding-top: var(--spacing-180); }
.pt-200 { padding-top: var(--spacing-200); }
.pt-240 { padding-top: var(--spacing-240); }


.pl-0 { padding-left: 0; }
.pl-5 { padding-left: var(--spacing-5); }
.pl-10 { padding-left: var(--spacing-1); }
.pl-15 { padding-left: var(--spacing-15); }
.pl-20 { padding-left: var(--spacing-20); }
.pl-30 { padding-left: var(--spacing-30); }
.pl-40 { padding-left: var(--spacing-40); }
.pl-60 { padding-left: var(--spacing-60); }
.pl-80 { padding-left: var(--spacing-80); }
.pl-100 { padding-left: var(--spacing-100); }
.pl-120 { padding-left: var(--spacing-120); }
.pl-200 { padding-left: var(--spacing-200); }
.pl-240 { padding-left: var(--spacing-240); }

.pr-0 { padding-right: 0; }
.pr-5 { padding-right: var(--spacing-5); }
.pr-10 { padding-right: var(--spacing-1); }
.pr-15 { padding-right: var(--spacing-15); }
.pr-20 { padding-right: var(--spacing-20); }
.pr-30 { padding-right: var(--spacing-30); }
.pr-40 { padding-right: var(--spacing-40); }
.pr-60 { padding-right: var(--spacing-60); }
.pr-80 { padding-right: var(--spacing-80); }
.pr-100 { padding-right: var(--spacing-100); }
.pr-120 { padding-right: var(--spacing-120); }
.pr-200 { padding-right: var(--spacing-200); }
.pr-240 { padding-right: var(--spacing-240); }


.my-0 { margin-top: 0; margin-bottom: 0; }
.my-5 { padding-top: var(--spacing-5); padding-bottom: var(--spacing-5); }
.my-10 { padding-top: var(--spacing-10); padding-bottom: var(--spacing-10); }
.my-15 { margin-top: var(--spacing-15); margin-bottom: var(--spacing-15); }
.my-20 { margin-top: var(--spacing-20); margin-bottom: var(--spacing-20); }
.my-30 { margin-top: var(--spacing-30); margin-bottom: var(--spacing-30); }
.my-40 { margin-top: var(--spacing-40); margin-bottom: var(--spacing-40); }
.my-60 { margin-top: var(--spacing-60); margin-bottom: var(--spacing-60); }
.my-80 { margin-top: var(--spacing-80); margin-bottom: var(--spacing-80); }
.my-100 { margin-top: var(--spacing-100); margin-bottom: var(--spacing-100); }
.my-120 { margin-top: var(--spacing-120); margin-bottom: var(--spacing-120); }
.my-240 { margin-top: var(--spacing-240); margin-bottom: var(--spacing-240); }

.mx-0 { margin-right: 0; margin-left: 0; }
.mx-5 { margin-right: var(--spacing-5); margin-left: var(--spacing-5); }
.mx-10 { margin-right: var(--spacing-10); margin-left: var(--spacing-10); }
.mx-15 { margin-right: var(--spacing-15); margin-left: var(--spacing-15); }
.mx-20 { margin-right: var(--spacing-20); margin-left: var(--spacing-20); }
.mx-30 { margin-right: var(--spacing-30); margin-left: var(--spacing-30); }
.mx-40 { margin-right: var(--spacing-40); margin-left: var(--spacing-40); }
.mx-60 { margin-right: var(--spacing-60); margin-left: var(--spacing-60); }
.mx-80 { margin-right: var(--spacing-80); margin-left: var(--spacing-80); }
.mx-100 { margin-right: var(--spacing-100); margin-left: var(--spacing-100); }
.mx-120 { margin-right: var(--spacing-120); margin-left: var(--spacing-120); }
.mx-240 { margin-right: var(--spacing-240); margin-left: var(--spacing-240); }

.mx-auto { margin-left: auto; margin-right: auto; }

.mb-0 { margin-bottom: 0; }
.mb-5 { margin-bottom: var(--spacing-5); }
.mb-10 { margin-bottom: var(--spacing-10); }
.mb-15 { margin-bottom: var(--spacing-15); }
.mb-20 { margin-bottom: var(--spacing-20); }
.mb-30 { margin-bottom: var(--spacing-30); }
.mb-40 { margin-bottom: var(--spacing-40); }
.mb-50 { margin-bottom: var(--spacing-50); }
.mb-60 { margin-bottom: var(--spacing-60); }
.mb-80 { margin-bottom: var(--spacing-80); }
.mb-100 { margin-bottom: var(--spacing-100); }
.mb-120 { margin-bottom: var(--spacing-120); }
.mb-150 { margin-bottom: var(--spacing-150); }
.mb-180 { margin-bottom: var(--spacing-180); }
.mb-200 { margin-bottom: var(--spacing-200); }
.mb-240 { margin-bottom: var(--spacing-240); }


.mt-0 { margin-top: 0; }
.mt-5 { margin-top: var(--spacing-5); }
.mt-10 { margin-top: var(--spacing-10); }
.mt-15 { margin-top: var(--spacing-15); }
.mt-20 { margin-top: var(--spacing-20); }
.mt-30 { margin-top: var(--spacing-30); }
.mt-40 { margin-top: var(--spacing-40); }
.mt-50 { margin-top: var(--spacing-50); }
.mt-60 { margin-top: var(--spacing-60); }
.mt-80 { margin-top: var(--spacing-80); }
.mt-100 { margin-top: var(--spacing-100); }
.mt-120 { margin-top: var(--spacing-120); }
.mt-200 { margin-top: var(--spacing-200); }
.mt-240 { margin-top: var(--spacing-240); }

.ml-0 { margin-left: 0; }
.ml-5 { margin-left: var(--spacing-5); }
.ml-10 { margin-left: var(--spacing-10); }
.ml-15 { margin-left: var(--spacing-15); }
.ml-20 { margin-left: var(--spacing-20); }
.ml-30 { margin-left: var(--spacing-30); }
.ml-40 { margin-left: var(--spacing-40); }
.ml-60 { margin-left: var(--spacing-60); }
.ml-80 { margin-left: var(--spacing-80); }
.ml-100 { margin-left: var(--spacing-100); }
.ml-120 { margin-left: var(--spacing-120); }
.ml-240 { margin-left: var(--spacing-240); }

.mr-0 { margin-right: 0; }
.mr-5 { margin-right: var(--spacing-5); }
.mr-10 { margin-right: var(--spacing-10); }
.mr-15 { margin-right: var(--spacing-15); }
.mr-20 { margin-right: var(--spacing-20); }
.mr-30 { margin-right: var(--spacing-30); }
.mr-40 { margin-right: var(--spacing-40); }
.mr-60 { margin-right: var(--spacing-60); }
.mr-80 { margin-right: var(--spacing-80); }
.mr-100 { margin-right: var(--spacing-100); }
.mr-120 { margin-right: var(--spacing-120); }
.mr-240 { margin-right: var(--spacing-240); }

.mx-auto { margin-left: auto; margin-right: auto; }


@media only screen and (max-width: 900px) {

    .p-m-0 { padding: 0; }
    .p-m-5 { padding: var(--spacing-5); }
    .p-m-10 { padding: var(--spacing-1); }
    .p-m-15 { padding: var(--spacing-15); }
    .p-m-20 { padding: var(--spacing-20); }
    .p-m-30 { padding: var(--spacing-30); }
    .p-m-40 { padding: var(--spacing-40); }
    .p-m-50 { padding: var(--spacing-50); }
    .p-m-60 { padding: var(--spacing-60); }
    .p-m-80 { padding: var(--spacing-80); }
    .p-m-90 { padding: var(--spacing-90); }
    .p-m-100 { padding: var(--spacing-100); }
    .p-m-120 { padding: var(--spacing-120); }
    .p-m-150 { padding: var(--spacing-150); }
    .p-m-180 { padding: var(--spacing-180); }
    .p-m-200 { padding: var(--spacing-200); }
    .p-m-240 { padding: var(--spacing-240); }

    .py-m-0 { padding-top: 0; padding-bottom: 0; }
    .py-m-5 { padding-top: var(--spacing-5); padding-bottom: var(--spacing-5); }
    .py-m-10 { padding-top: var(--spacing-10); padding-bottom: var(--spacing-10); }
    .py-m-15 { padding-top: var(--spacing-15); padding-bottom: var(--spacing-15); }
    .py-m-20 { padding-top: var(--spacing-20); padding-bottom: var(--spacing-20); }
    .py-m-30 { padding-top: var(--spacing-30); padding-bottom: var(--spacing-30); }
    .py-m-40 { padding-top: var(--spacing-40); padding-bottom: var(--spacing-40); }
    .py-m-50 { padding-top: var(--spacing-50); padding-bottom: var(--spacing-50); }
    .py-m-60 { padding-top: var(--spacing-60); padding-bottom: var(--spacing-60); }
    .py-m-80 { padding-top: var(--spacing-80); padding-bottom: var(--spacing-80); }
    .py-m-100 { padding-top: var(--spacing-100); padding-bottom: var(--spacing-100); }
    .py-m-120 { padding-top: var(--spacing-120); padding-bottom: var(--spacing-120); }
    .py-m-240 { padding-top: var(--spacing-240); padding-bottom: var(--spacing-240); }
    
    
    .px-m-0 { padding-right: 0; padding-left: 0; }
    .px-m-5 { padding-right: var(--spacing-5); padding-left: var(--spacing-5); }
    .px-m-10 { padding-right: var(--spacing-10); padding-left: var(--spacing-10); }
    .px-m-15 { padding-right: var(--spacing-15); padding-left: var(--spacing-15); }
    .px-m-20 { padding-right: var(--spacing-20); padding-left: var(--spacing-20); }
    .px-m-30 { padding-right: var(--spacing-30); padding-left: var(--spacing-30); }
    .px-m-40 { padding-right: var(--spacing-40); padding-left: var(--spacing-40); }
    .px-m-50 { padding-right: var(--spacing-50); padding-left: var(--spacing-50); }
    .px-m-60 { padding-right: var(--spacing-60); padding-left: var(--spacing-60); }
    .px-m-80 { padding-right: var(--spacing-80); padding-left: var(--spacing-80); }
    .px-m-100 { padding-right: var(--spacing-100); padding-left: var(--spacing-100); }
    .px-m-120 { padding-right: var(--spacing-120); padding-left: var(--spacing-120); }
    .px-m-240 { padding-right: var(--spacing-240); padding-left: var(--spacing-240); }
    
    
    .pb-m-0 { padding-bottom: 0; }
    .pb-m-5 { padding-bottom: var(--spacing-5); }
    .pb-m-10 { padding-bottom: var(--spacing-10); }
    .pb-m-15 { padding-bottom: var(--spacing-15); }
    .pb-m-20 { padding-bottom: var(--spacing-20); }
    .pb-m-30 { padding-bottom: var(--spacing-30); }
    .pb-m-40 { padding-bottom: var(--spacing-40); }
    .pb-m-60 { padding-bottom: var(--spacing-60); }
    .pb-m-80 { padding-bottom: var(--spacing-80); }
    .pb-m-100 { padding-bottom: var(--spacing-100); }
    .pb-m-120 { padding-bottom: var(--spacing-120); }
    .pb-m-240 { padding-bottom: var(--spacing-240); }
    
    .pt-m-0 { padding-top: 0; }
    .pt-m-5 { padding-top: var(--spacing-5); }
    .pt-m-10 { padding-top: var(--spacing-10); }
    .pt-m-15 { padding-top: var(--spacing-15); }
    .pt-m-20 { padding-top: var(--spacing-20); }
    .pt-m-30 { padding-top: var(--spacing-30); }
    .pt-m-40 { padding-top: var(--spacing-40); }
    .pt-m-50 { padding-top: var(--spacing-50); }
    .pt-m-60 { padding-top: var(--spacing-60); }
    .pt-m-80 { padding-top: var(--spacing-80); }
    .pt-m-100 { padding-top: var(--spacing-100); }
    .pt-m-120 { padding-top: var(--spacing-120); }
    .pt-m-240 { padding-top: var(--spacing-240); }
    
    
    .pl-m-0 { padding-left: 0; }
    .pl-m-5 { padding-left: var(--spacing-5); }
    .pl-m-10 { padding-left: var(--spacing-10); }
    .pl-m-15 { padding-left: var(--spacing-15); }
    .pl-m-20 { padding-left: var(--spacing-20); }
    .pl-m-30 { padding-left: var(--spacing-30); }
    .pl-m-40 { padding-left: var(--spacing-40); }
    .pl-m-60 { padding-left: var(--spacing-60); }
    .pl-m-80 { padding-left: var(--spacing-80); }
    .pl-m-100 { padding-left: var(--spacing-100); }
    .pl-m-120 { padding-left: var(--spacing-120); }
    .pl-m-240 { padding-left: var(--spacing-240); }
    
    .pr-m-0 { padding-right: 0; }
    .pr-m-5 { padding-right: var(--spacing-5); }
    .pr-m-10 { padding-right: var(--spacing-1); }
    .pr-m-15 { padding-right: var(--spacing-15); }
    .pr-m-20 { padding-right: var(--spacing-20); }
    .pr-m-30 { padding-right: var(--spacing-30); }
    .pr-m-40 { padding-right: var(--spacing-40); }
    .pr-m-60 { padding-right: var(--spacing-60); }
    .pr-m-80 { padding-right: var(--spacing-80); }
    .pr-m-100 { padding-right: var(--spacing-100); }
    .pr-m-120 { padding-right: var(--spacing-120); }
    .pr-m-240 { padding-right: var(--spacing-240); }
    
    
    .my-m-0 { margin-top: 0; margin-bottom: 0; }
    .my-m-5 { padding-top: var(--spacing-5); padding-bottom: var(--spacing-5); }
    .my-m-10 { padding-top: var(--spacing-10); padding-bottom: var(--spacing-10); }
    .my-m-15 { margin-top: var(--spacing-15); margin-bottom: var(--spacing-15); }
    .my-m-20 { margin-top: var(--spacing-20); margin-bottom: var(--spacing-20); }
    .my-m-30 { margin-top: var(--spacing-30); margin-bottom: var(--spacing-30); }
    .my-m-40 { margin-top: var(--spacing-40); margin-bottom: var(--spacing-40); }
    .my-m-60 { margin-top: var(--spacing-60); margin-bottom: var(--spacing-60); }
    .my-m-80 { margin-top: var(--spacing-80); margin-bottom: var(--spacing-80); }
    .my-m-100 { margin-top: var(--spacing-100); margin-bottom: var(--spacing-100); }
    .my-m-120 { margin-top: var(--spacing-120); margin-bottom: var(--spacing-120); }
    .my-m-240 { margin-top: var(--spacing-240); margin-bottom: var(--spacing-240); }
    
    .mx-m-0 { margin-right: 0; margin-left: 0; }
    .mx-m-5 { margin-right: var(--spacing-5); margin-left: var(--spacing-5); }
    .mx-m-10 { margin-right: var(--spacing-10); margin-left: var(--spacing-10); }
    .mx-m-15 { margin-right: var(--spacing-15); margin-left: var(--spacing-15); }
    .mx-m-20 { margin-right: var(--spacing-20); margin-left: var(--spacing-20); }
    .mx-m-30 { margin-right: var(--spacing-30); margin-left: var(--spacing-30); }
    .mx-m-40 { margin-right: var(--spacing-40); margin-left: var(--spacing-40); }
    .mx-m-60 { margin-right: var(--spacing-60); margin-left: var(--spacing-60); }
    .mx-m-80 { margin-right: var(--spacing-80); margin-left: var(--spacing-80); }
    .mx-m-100 { margin-right: var(--spacing-100); margin-left: var(--spacing-100); }
    .mx-m-120 { margin-right: var(--spacing-120); margin-left: var(--spacing-120); }
    .mx-m-240 { margin-right: var(--spacing-240); margin-left: var(--spacing-240); }
    
    .mx-m-auto { margin-left: auto; margin-right: auto; }
    
    .mb-m-0 { margin-bottom: 0; }
    .mb-m-5 { margin-bottom: var(--spacing-5); }
    .mb-m-10 { margin-bottom: var(--spacing-10); }
    .mb-m-15 { margin-bottom: var(--spacing-15); }
    .mb-m-20 { margin-bottom: var(--spacing-20); }
    .mb-m-30 { margin-bottom: var(--spacing-30); }
    .mb-m-40 { margin-bottom: var(--spacing-40); }
    .mb-m-60 { margin-bottom: var(--spacing-60); }
    .mb-m-70 { margin-bottom: var(--spacing-70); }
    .mb-m-80 { margin-bottom: var(--spacing-80); }
    .mb-m-100 { margin-bottom: var(--spacing-100); }
    .mb-m-120 { margin-bottom: var(--spacing-120); }
    .mb-m-240 { margin-bottom: var(--spacing-240); }
    
    
    .mt-m-0 { margin-top: 0; }
    .mt-m-5 { margin-top: var(--spacing-5); }
    .mt-m-10 { margin-top: var(--spacing-10); }
    .mt-m-15 { margin-top: var(--spacing-15); }
    .mt-m-20 { margin-top: var(--spacing-20); }
    .mt-m-30 { margin-top: var(--spacing-30); }
    .mt-m-40 { margin-top: var(--spacing-40); }
    .mt-m-60 { margin-top: var(--spacing-60); }
    .mt-m-80 { margin-top: var(--spacing-80); }
    .mt-m-100 { margin-top: var(--spacing-100); }
    .mt-m-120 { margin-top: var(--spacing-120); }
    .mt-m-240 { margin-top: var(--spacing-240); }
    
    .ml-m-0 { margin-left: 0; }
    .ml-m-5 { margin-left: var(--spacing-5); }
    .ml-m-10 { margin-left: var(--spacing-10); }
    .ml-m-15 { margin-left: var(--spacing-15); }
    .ml-m-20 { margin-left: var(--spacing-20); }
    .ml-m-30 { margin-left: var(--spacing-30); }
    .ml-m-40 { margin-left: var(--spacing-40); }
    .ml-m-60 { margin-left: var(--spacing-60); }
    .ml-m-80 { margin-left: var(--spacing-80); }
    .ml-m-100 { margin-left: var(--spacing-100); }
    .ml-m-120 { margin-left: var(--spacing-120); }
    .ml-m-240 { margin-left: var(--spacing-240); }
    
    .mr-m-0 { margin-right: 0; }
    .mr-m-5 { margin-right: var(--spacing-5); }
    .mr-m-10 { margin-right: var(--spacing-10); }
    .mr-m-15 { margin-right: var(--spacing-15); }
    .mr-m-20 { margin-right: var(--spacing-20); }
    .mr-m-30 { margin-right: var(--spacing-30); }
    .mr-m-40 { margin-right: var(--spacing-40); }
    .mr-m-60 { margin-right: var(--spacing-60); }
    .mr-m-80 { margin-right: var(--spacing-80); }
    .mr-m-100 { margin-right: var(--spacing-100); }
    .mr-m-120 { margin-right: var(--spacing-120); }
    .mr-m-240 { margin-right: var(--spacing-240); }    

}