/* ROOT */

:root {
  /* Bootstrap */
  --length-1: .25rem;
  --length-2: .5rem;
  --length-3: 1rem;
  --length-4: 1.5rem;
  --length-5: 3rem;
  /* Ext */
  --length-6: 6rem;
  --length-7: 9rem;
  --ratio-1x1: 100%;
  --ratio-3x4: calc((100% / 3) * 4);
  --ratio-2x3: calc((100% / 2) * 3);
}



/* POSITION */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  .position-sm-absolute {
    position: absolute;
  }
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .position-md-absolute {
    position: absolute;
  }
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .position-lg-absolute {
    position: absolute;
  }
}
/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .position-xl-absolute {
    position: absolute;
  }
}
/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
  .position-xxl-absolute {
    position: absolute;
  }
}
/* 3xl devices */
@media (min-width: 1920px) {
  .position-3xl-absolute {
    position: absolute;
  }
}
/* 4xl devices */
@media (min-width: 2560px) {
  .position-4xl-absolute {
    position: absolute;
  }
}
/* 4xl devices */
@media (min-width: 3840px) {
  .position-5xl-absolute {
    position: absolute;
  }
}




/* MARGIN */

/* length-6 */
.m-6 {
  margin: var(--length-6) !important;
}
.mx-6 {
  margin-left: var(--length-6) !important;
  margin-right: var(--length-6) !important;
}
.my-6 {
  margin-top: var(--length-6) !important;
  margin-bottom: var(--length-6) !important;
}
.ms-6 {
  margin-left: var(--length-6) !important;
}
.me-6 {
  margin-right: var(--length-6) !important;
}

.mt-6 {
  margin-top: var(--length-6) !important;
}
.mb-6 {
  margin-bottom: var(--length-6) !important;
}
/* length-7 */
.m-7 {
  margin: var(--length-7) !important;
}
.mx-7 {
  margin-left: var(--length-7) !important;
  margin-right: var(--length-7) !important;
}
.my-7 {
  margin-top: var(--length-7) !important;
  margin-bottom: var(--length-7) !important;
}
.my-7 {
  margin-top: var(--length-7) !important;
  margin-bottom: var(--length-7) !important;
}
.ms-7 {
  margin-left: var(--length-7) !important;
}
.me-7 {
  margin-right: var(--length-7) !important;
}

.mt-7 {
  margin-top: var(--length-7) !important;
}
.mb-7 {
  margin-bottom: var(--length-7) !important;
}
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  /* length-6 */
  .m-sm-6 {
    margin: var(--length-6) !important;
  }
  .mx-sm-6 {
    margin-left: var(--length-6) !important;
    margin-right: var(--length-6) !important;
  }
  .my-sm-6 {
    margin-top: var(--length-6) !important;
    margin-bottom: var(--length-6) !important;
  }
  .ms-sm-6 {
    margin-left: var(--length-6) !important;
  }
  .me-sm-6 {
    margin-right: var(--length-6) !important;
  }

  .mt-sm-6 {
    margin-top: var(--length-6) !important;
  }
  .mb-sm-6 {
    margin-bottom: var(--length-6) !important;
  }
  /* length-7 */
  .m-sm-7 {
    margin: var(--length-7) !important;
  }
  .mx-sm-7 {
    margin-left: var(--length-7) !important;
    margin-right: var(--length-7) !important;
  }
  .my-sm-7 {
    margin-top: var(--length-7) !important;
    margin-bottom: var(--length-7) !important;
  }
  .my-sm-7 {
    margin-top: var(--length-7) !important;
    margin-bottom: var(--length-7) !important;
  }
  .ms-sm-7 {
    margin-left: var(--length-7) !important;
  }
  .me-sm-7 {
    margin-right: var(--length-7) !important;
  }

  .mt-sm-7 {
    margin-top: var(--length-7) !important;
  }
  .mb-sm-7 {
    margin-bottom: var(--length-7) !important;
  }
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  /* length-6 */
  .m-md-6 {
    margin: var(--length-6) !important;
  }
  .mx-md-6 {
    margin-left: var(--length-6) !important;
    margin-right: var(--length-6) !important;
  }
  .my-md-6 {
    margin-top: var(--length-6) !important;
    margin-bottom: var(--length-6) !important;
  }
  .ms-md-6 {
    margin-left: var(--length-6) !important;
  }
  .me-md-6 {
    margin-right: var(--length-6) !important;
  }
  .mt-md-6 {
    margin-top: var(--length-6) !important;
  }
  .mb-md-6 {
    margin-bottom: var(--length-6) !important;
  }
  /* length-7 */
  .m-md-7 {
    margin: var(--length-7) !important;
  }
  .mx-md-7 {
    margin-left: var(--length-7) !important;
    margin-right: var(--length-7) !important;
  }
  .my-md-7 {
    margin-top: var(--length-7) !important;
    margin-bottom: var(--length-7) !important;
  }
  .ms-md-7 {
    margin-left: var(--length-7) !important;
  }
  .me-md-7 {
    margin-right: var(--length-7) !important;
  }
  .mt-md-7 {
    margin-top: var(--length-7) !important;
  }
  .mb-md-7 {
    margin-bottom: var(--length-7) !important;
  }
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  /* length-6 */
  .m-lg-6 {
    margin: var(--length-6) !important;
  }
  .mx-lg-6 {
    margin-left: var(--length-6) !important;
    margin-right: var(--length-6) !important;
  }
  .my-lg-6 {
    margin-top: var(--length-6) !important;
    margin-bottom: var(--length-6) !important;
  }
  .ms-lg-6 {
    margin-left: var(--length-6) !important;
  }
  .me-lg-6 {
    margin-right: var(--length-6) !important;
  }

  .mt-lg-6 {
    margin-top: var(--length-6) !important;
  }
  .mb-lg-6 {
    margin-bottom: var(--length-6) !important;
  }
  /* length-7 */
  .m-lg-7 {
    margin: var(--length-7) !important;
  }
  .mx-lg-7 {
    margin-left: var(--length-7) !important;
    margin-right: var(--length-7) !important;
  }
  .my-lg-7 {
    margin-top: var(--length-7) !important;
    margin-bottom: var(--length-7) !important;
  }
  .ms-lg-7 {
    margin-left: var(--length-7) !important;
  }
  .me-lg-7 {
    margin-right: var(--length-7) !important;
  }
  .mt-lg-7 {
    margin-top: var(--length-7) !important;
  }
  .mb-lg-7 {
    margin-bottom: var(--length-7) !important;
  }
}
/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  /* length-6 */
  .m-xl-6 {
    margin: var(--length-6) !important;
  }
  .mx-xl-6 {
    margin-left: var(--length-6) !important;
    margin-right: var(--length-6) !important;
  }
  .my-xl-6 {
    margin-top: var(--length-6) !important;
    margin-bottom: var(--length-6) !important;
  }
  .ms-xl-6 {
    margin-left: var(--length-6) !important;
  }
  .me-xl-6 {
    margin-right: var(--length-6) !important;
  }
  .mt-xl-6 {
    margin-top: var(--length-6) !important;
  }
  .mb-xl-6 {
    margin-bottom: var(--length-6) !important;
  }
  /* length-7 */
  .m-xl-7 {
    margin: var(--length-7) !important;
  }
  .mx-xl-7 {
    margin-left: var(--length-7) !important;
    margin-right: var(--length-7) !important;
  }
  .my-xl-7 {
    margin-top: var(--length-7) !important;
    margin-bottom: var(--length-7) !important;
  }
  .ms-xl-7 {
    margin-left: var(--length-7) !important;
  }
  .me-xl-7 {
    margin-right: var(--length-7) !important;
  }
  .mt-xl-7 {
    margin-top: var(--length-7) !important;
  }
  .mb-xl-7 {
    margin-bottom: var(--length-7) !important;
  }
}
/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
  /* length-6 */
  .m-xxl-6 {
    margin: var(--length-6) !important;
  }
  .mx-xxl-6 {
    margin-left: var(--length-6) !important;
    margin-right: var(--length-6) !important;
  }
  .my-xxl-6 {
    margin-top: var(--length-6) !important;
    margin-bottom: var(--length-6) !important;
  }
  .ms-xxl-6 {
    margin-left: var(--length-6) !important;
  }
  .me-xxl-6 {
    margin-right: var(--length-6) !important;
  }
  .mt-xxl-6 {
    margin-top: var(--length-6) !important;
  }
  .mb-xxl-6 {
    margin-bottom: var(--length-6) !important;
  }
  /* length-7 */
  .m-xxl-7 {
    margin: var(--length-7) !important;
  }
  .mx-xxl-7 {
    margin-left: var(--length-7) !important;
    margin-right: var(--length-7) !important;
  }
  .my-xxl-7 {
    margin-top: var(--length-7) !important;
    margin-bottom: var(--length-7) !important;
  }
  .ms-xxl-7 {
    margin-left: var(--length-7) !important;
  }
  .me-xxl-7 {
    margin-right: var(--length-7) !important;
  }
  .mt-xxl-7 {
    margin-top: var(--length-7) !important;
  }
  .mb-xxl-7 {
    margin-bottom: var(--length-7) !important;
  }
}
/* 3xl devices */
@media (min-width: 1920px) {
  /* length-4 */
  .m-3xl-4 {
    margin: var(--length-4) !important;
  }
  .mx-3xl-4 {
    margin-left: var(--length-4) !important;
    margin-right: var(--length-4) !important;
  }
  .my-3xl-4 {
    margin-top: var(--length-4) !important;
    margin-bottom: var(--length-4) !important;
  }
  .ms-3xl-4 {
    margin-left: var(--length-4) !important;
  }
  .me-3xl-4 {
    margin-right: var(--length-4) !important;
  }
  .mt-3xl-4 {
    margin-top: var(--length-4) !important;
  }
  .mb-3xl-4 {
    margin-bottom: var(--length-4) !important;
  }
  /* length-6 */
  .m-3xl-6 {
    margin: var(--length-6) !important;
  }
  .mx-3xl-6 {
    margin-left: var(--length-6) !important;
    margin-right: var(--length-6) !important;
  }
  .my-3xl-6 {
    margin-top: var(--length-6) !important;
    margin-bottom: var(--length-6) !important;
  }
  .ms-3xl-6 {
    margin-left: var(--length-6) !important;
  }
  .me-3xl-6 {
    margin-right: var(--length-6) !important;
  }
  .mt-3xl-6 {
    margin-top: var(--length-6) !important;
  }
  .mb-3xl-6 {
    margin-bottom: var(--length-6) !important;
  }
  /* length-7 */
  .m-3xl-7 {
    margin: var(--length-7) !important;
  }
  .mx-3xl-7 {
    margin-left: var(--length-7) !important;
    margin-right: var(--length-7) !important;
  }
  .my-3xl-7 {
    margin-top: var(--length-7) !important;
    margin-bottom: var(--length-7) !important;
  }
  .ms-3xl-7 {
    margin-left: var(--length-7) !important;
  }
  .me-3xl-7 {
    margin-right: var(--length-7) !important;
  }
  .mt-3xl-7 {
    margin-top: var(--length-7) !important;
  }
  .mb-3xl-7 {
    margin-bottom: var(--length-7) !important;
  }
}
/* 4xl devices */
@media (min-width: 2560px) {
  /* length-6 */
  .m-4xl-6 {
    margin: var(--length-6) !important;
  }
  .mx-4xl-6 {
    margin-left: var(--length-6) !important;
    margin-right: var(--length-6) !important;
  }
  .my-4xl-6 {
    margin-top: var(--length-6) !important;
    margin-bottom: var(--length-6) !important;
  }
  .ms-4xl-6 {
    margin-left: var(--length-6) !important;
  }
  .me-4xl-6 {
    margin-right: var(--length-6) !important;
  }
  .mt-4xl-6 {
    margin-top: var(--length-6) !important;
  }
  .mb-4xl-6 {
    margin-bottom: var(--length-6) !important;
  }
  /* length-7 */
  .m-4xl-7 {
    margin: var(--length-7) !important;
  }
  .mx-4xl-7 {
    margin-left: var(--length-7) !important;
    margin-right: var(--length-7) !important;
  }
  .my-4xl-7 {
    margin-top: var(--length-7) !important;
    margin-bottom: var(--length-7) !important;
  }
  .ms-4xl-7 {
    margin-left: var(--length-7) !important;
  }
  .me-4xl-7 {
    margin-right: var(--length-7) !important;
  }
  .mt-4xl-7 {
    margin-top: var(--length-7) !important;
  }
  .mb-4xl-7 {
    margin-bottom: var(--length-7) !important;
  }
}
/* 5xl devices */
@media (min-width: 3840px) {
  /* length-6 */
  .m-5xl-6 {
    margin: var(--length-6) !important;
  }
  .mx-5xl-6 {
    margin-left: var(--length-6) !important;
    margin-right: var(--length-6) !important;
  }
  .my-5xl-6 {
    margin-top: var(--length-6) !important;
    margin-bottom: var(--length-6) !important;
  }
  .ms-5xl-6 {
    margin-left: var(--length-6) !important;
  }
  .me-5xl-6 {
    margin-right: var(--length-6) !important;
  }
  .mt-5xl-6 {
    margin-top: var(--length-6) !important;
  }
  .mb-5xl-6 {
    margin-bottom: var(--length-6) !important;
  }
  /* length-7 */
  .m-5xl-7 {
    margin: var(--length-7) !important;
  }
  .mx-5xl-7 {
    margin-left: var(--length-7) !important;
    margin-right: var(--length-7) !important;
  }
  .my-5xl-7 {
    margin-top: var(--length-7) !important;
    margin-bottom: var(--length-7) !important;
  }
  .ms-5xl-7 {
    margin-left: var(--length-7) !important;
  }
  .me-5xl-7 {
    margin-right: var(--length-7) !important;
  }
  .mt-5xl-7 {
    margin-top: var(--length-7) !important;
  }
  .mb-5xl-7 {
    margin-bottom: var(--length-7) !important;
  }
}


/* PADDING */

/* length-6 */
.p-6 {
  padding: var(--length-6) !important;
}
.px-6 {
  padding-left: var(--length-6) !important;
  padding-right: var(--length-6) !important;
}
.py-6 {
  padding-top: var(--length-6) !important;
  padding-bottom: var(--length-6) !important;
}
.ps-6 {
  padding-left: var(--length-6) !important;
}
.pe-6 {
  padding-right: var(--length-6) !important;
}
.pt-6 {
  padding-top: var(--length-6) !important;
}
.pb-6 {
  padding-bottom: var(--length-6) !important;
}
/* length-7 */
.p-7 {
  padding: var(--length-7) !important;
}
.px-7 {
  padding-left: var(--length-7) !important;
  padding-right: var(--length-7) !important;
}
.py-7 {
  padding-top: var(--length-7) !important;
  padding-bottom: var(--length-7) !important;
}
.ps-7 {
  padding-left: var(--length-7) !important;
}
.pe-7 {
  padding-right: var(--length-7) !important;
}
.pt-7 {
  padding-top: var(--length-7) !important;
}
.pb-7 {
  padding-bottom: var(--length-7) !important;
}
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  /* length-6 */
  .p-sm-6 {
    padding: var(--length-6) !important;
  }
  .px-sm-6 {
    padding-left: var(--length-6) !important;
    padding-right: var(--length-6) !important;
  }
  .py-sm-6 {
    padding-top: var(--length-6) !important;
    padding-bottom: var(--length-6) !important;
  }
  .ps-sm-6 {
    padding-left: var(--length-6) !important;
  }
  .pe-sm-6 {
    padding-right: var(--length-6) !important;
  }
  .pt-sm-6 {
    padding-top: var(--length-6) !important;
  }
  .pb-sm-6 {
    padding-bottom: var(--length-6) !important;
  }
  /* length-7 */
  .p-sm-7 {
    padding: var(--length-7) !important;
  }
  .px-sm-7 {
    padding-left: var(--length-7) !important;
    padding-right: var(--length-7) !important;
  }
  .py-sm-7 {
    padding-top: var(--length-7) !important;
    padding-bottom: var(--length-7) !important;
  }
  .ps-sm-7 {
    padding-left: var(--length-7) !important;
  }
  .pe-sm-7 {
    padding-right: var(--length-7) !important;
  }
  .pt-sm-7 {
    padding-top: var(--length-7) !important;
  }
  .pb-sm-7 {
    padding-bottom: var(--length-7) !important;
  }
}
/* pedium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  /* length-6 */
  .p-md-6 {
    padding: var(--length-6) !important;
  }
  .px-md-6 {
    padding-left: var(--length-6) !important;
    padding-right: var(--length-6) !important;
  }
  .py-md-6 {
    padding-top: var(--length-6) !important;
    padding-bottom: var(--length-6) !important;
  }
  .ps-md-6 {
    padding-left: var(--length-6) !important;
  }
  .pe-md-6 {
    padding-right: var(--length-6) !important;
  }
  .pt-md-6 {
    padding-top: var(--length-6) !important;
  }
  .pb-md-6 {
    padding-bottom: var(--length-6) !important;
  }
  /* length-7 */
  .p-md-7 {
    padding: var(--length-7) !important;
  }
  .px-md-7 {
    padding-left: var(--length-7) !important;
    padding-right: var(--length-7) !important;
  }
  .py-md-7 {
    padding-top: var(--length-7) !important;
    padding-bottom: var(--length-7) !important;
  }
  .ps-md-7 {
    padding-left: var(--length-7) !important;
  }
  .pe-md-7 {
    padding-right: var(--length-7) !important;
  }
  .pt-md-7 {
    padding-top: var(--length-7) !important;
  }
  .pb-md-7 {
    padding-bottom: var(--length-7) !important;
  }
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  /* length-6 */
  .p-lg-6 {
    padding: var(--length-6) !important;
  }
  .px-lg-6 {
    padding-left: var(--length-6) !important;
    padding-right: var(--length-6) !important;
  }
  .py-lg-6 {
    padding-top: var(--length-6) !important;
    padding-bottom: var(--length-6) !important;
  }
  .ps-lg-6 {
    padding-left: var(--length-6) !important;
  }
  .pe-lg-6 {
    padding-right: var(--length-6) !important;
  }
  .pt-lg-6 {
    padding-top: var(--length-6) !important;
  }
  .pb-lg-6 {
    padding-bottom: var(--length-6) !important;
  }
  /* length-7 */
  .p-lg-7 {
    padding: var(--length-7) !important;
  }
  .px-lg-7 {
    padding-left: var(--length-7) !important;
    padding-right: var(--length-7) !important;
  }
  .py-lg-7 {
    padding-top: var(--length-7) !important;
    padding-bottom: var(--length-7) !important;
  }
  .ps-lg-7 {
    padding-left: var(--length-7) !important;
  }
  .pe-lg-7 {
    padding-right: var(--length-7) !important;
  }
  .pt-lg-7 {
    padding-top: var(--length-7) !important;
  }
  .pb-lg-7 {
    padding-bottom: var(--length-7) !important;
  }
}
/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  /* length-6 */
  .p-xl-6 {
    padding: var(--length-6) !important;
  }
  .px-xl-6 {
    padding-left: var(--length-6) !important;
    padding-right: var(--length-6) !important;
  }
  .py-xl-6 {
    padding-top: var(--length-6) !important;
    padding-bottom: var(--length-6) !important;
  }
  .ps-xl-6 {
    padding-left: var(--length-6) !important;
  }
  .pe-xl-6 {
    padding-right: var(--length-6) !important;
  }
  .pt-xl-6 {
    padding-top: var(--length-6) !important;
  }
  .pb-xl-6 {
    padding-bottom: var(--length-6) !important;
  }
  /* length-7 */
  .p-xl-7 {
    padding: var(--length-7) !important;
  }
  .px-xl-7 {
    padding-left: var(--length-7) !important;
    padding-right: var(--length-7) !important;
  }
  .py-xl-7 {
    padding-top: var(--length-7) !important;
    padding-bottom: var(--length-7) !important;
  }
  .ps-xl-7 {
    padding-left: var(--length-7) !important;
  }
  .pe-xl-7 {
    padding-right: var(--length-7) !important;
  }
  .pt-xl-7 {
    padding-top: var(--length-7) !important;
  }
  .pb-xl-7 {
    padding-bottom: var(--length-7) !important;
  }
}
/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
  /* length-6 */
  .p-xxl-6 {
    padding: var(--length-6) !important;
  }
  .px-xxl-6 {
    padding-left: var(--length-6) !important;
    padding-right: var(--length-6) !important;
  }
  .py-xxl-6 {
    padding-top: var(--length-6) !important;
    padding-bottom: var(--length-6) !important;
  }
  .ps-xxl-6 {
    padding-left: var(--length-6) !important;
  }
  .pe-xxl-6 {
    padding-right: var(--length-6) !important;
  }
  .pt-xxl-6 {
    padding-top: var(--length-6) !important;
  }
  .pb-xxl-6 {
    padding-bottom: var(--length-6) !important;
  }
  /* length-7 */
  .p-xxl-7 {
    padding: var(--length-7) !important;
  }
  .px-xxl-7 {
    padding-left: var(--length-7) !important;
    padding-right: var(--length-7) !important;
  }
  .py-xxl-7 {
    padding-top: var(--length-7) !important;
    padding-bottom: var(--length-7) !important;
  }
  .ps-xxl-7 {
    padding-left: var(--length-7) !important;
  }
  .pe-xxl-7 {
    padding-right: var(--length-7) !important;
  }
  .pt-xxl-7 {
    padding-top: var(--length-7) !important;
  }
  .pb-xxl-7 {
    padding-bottom: var(--length-7) !important;
  }
}
/* 3xl devices */
@media (min-width: 1920px) {
  /* length-6 */
  .p-3xl-6 {
    padding: var(--length-6) !important;
  }
  .px-3xl-6 {
    padding-left: var(--length-6) !important;
    padding-right: var(--length-6) !important;
  }
  .py-3xl-6 {
    padding-top: var(--length-6) !important;
    padding-bottom: var(--length-6) !important;
  }
  .ps-3xl-6 {
    padding-left: var(--length-6) !important;
  }
  .pe-3xl-6 {
    padding-right: var(--length-6) !important;
  }
  .pt-3xl-6 {
    padding-top: var(--length-6) !important;
  }
  .pb-3xl-6 {
    padding-bottom: var(--length-6) !important;
  }
  /* length-7 */
  .p-3xl-7 {
    padding: var(--length-7) !important;
  }
  .px-3xl-7 {
    padding-left: var(--length-7) !important;
    padding-right: var(--length-7) !important;
  }
  .py-3xl-7 {
    padding-top: var(--length-7) !important;
    padding-bottom: var(--length-7) !important;
  }
  .ps-3xl-7 {
    padding-left: var(--length-7) !important;
  }
  .pe-3xl-7 {
    padding-right: var(--length-7) !important;
  }
  .pt-3xl-7 {
    padding-top: var(--length-7) !important;
  }
  .pb-3xl-7 {
    padding-bottom: var(--length-7) !important;
  }
}
/* 4xl devices */
@media (min-width: 2560px) {
  /* length-6 */
  .p-4xl-6 {
    padding: var(--length-6) !important;
  }
  .px-4xl-6 {
    padding-left: var(--length-6) !important;
    padding-right: var(--length-6) !important;
  }
  .py-4xl-6 {
    padding-top: var(--length-6) !important;
    padding-bottom: var(--length-6) !important;
  }
  .ps-4xl-6 {
    padding-left: var(--length-6) !important;
  }
  .pe-4xl-6 {
    padding-right: var(--length-6) !important;
  }
  .pt-4xl-6 {
    padding-top: var(--length-6) !important;
  }
  .pb-4xl-6 {
    padding-bottom: var(--length-6) !important;
  }
  /* length-7 */
  .p-4xl-7 {
    padding: var(--length-7) !important;
  }
  .px-4xl-7 {
    padding-left: var(--length-7) !important;
    padding-right: var(--length-7) !important;
  }
  .py-4xl-7 {
    padding-top: var(--length-7) !important;
    padding-bottom: var(--length-7) !important;
  }
  .ps-4xl-7 {
    padding-left: var(--length-7) !important;
  }
  .pe-4xl-7 {
    padding-right: var(--length-7) !important;
  }
  .pt-4xl-7 {
    padding-top: var(--length-7) !important;
  }
  .pb-4xl-7 {
    padding-bottom: var(--length-7) !important;
  }
}
/* 5xl devices */
@media (min-width: 3840px) {
  /* length-6 */
  .p-5xl-6 {
    padding: var(--length-6) !important;
  }
  .px-5xl-6 {
    padding-left: var(--length-6) !important;
    padding-right: var(--length-6) !important;
  }
  .py-5xl-6 {
    padding-top: var(--length-6) !important;
    padding-bottom: var(--length-6) !important;
  }
  .ps-5xl-6 {
    padding-left: var(--length-6) !important;
  }
  .pe-5xl-6 {
    padding-right: var(--length-6) !important;
  }
  .pt-5xl-6 {
    padding-top: var(--length-6) !important;
  }
  .pb-5xl-6 {
    padding-bottom: var(--length-6) !important;
  }
  /* length-7 */
  .p-5xl-7 {
    padding: var(--length-7) !important;
  }
  .px-5xl-7 {
    padding-left: var(--length-7) !important;
    padding-right: var(--length-7) !important;
  }
  .py-5xl-7 {
    padding-top: var(--length-7) !important;
    padding-bottom: var(--length-7) !important;
  }
  .ps-5xl-7 {
    padding-left: var(--length-7) !important;
  }
  .pe-5xl-7 {
    padding-right: var(--length-7) !important;
  }
  .pt-5xl-7 {
    padding-top: var(--length-7) !important;
  }
  .pb-5xl-7 {
    padding-bottom: var(--length-7) !important;
  }
}



/* RATIO */

/* ratio-3x4 */
.ratio-3x4 {
  position: relative;
  width: 100%;
}
.ratio-3x4 > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.ratio-3x4::before {
  display: block;
  content: "";
}
.ratio-3x4::before {
  padding-top: var(--ratio-3x4);
}
/* ratio-2x3 */
.ratio-2x3 {
  position: relative;
  width: 100%;
}
.ratio-2x3 > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.ratio-2x3::before {
  display: block;
  content: "";
}
.ratio-2x3::before {
  padding-top: var(--ratio-2x3);
}
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
}
/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
}
/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
  /* ratio-1x1 */
  .ratio-xxl-1x1 {
    position: relative;
    width: 100%;
  }
  .ratio-xxl-1x1 > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .ratio-xxl-1x1::before {
    display: block;
    content: "";
  }
  .ratio-xxl-1x1::before {
    padding-top: var(--ratio-1x1);
  }
}
/* 3xl devices */
@media (min-width: 1920px) {
}
/* 4xl devices */
@media (min-width: 2560px) {
}
/* 4xl devices */
@media (min-width: 3840px) {
}






/* ROW / ROW-COLS */

/* 3xl devices */
/*
@media (min-width: 1920px) {
  .row-cols-3xl-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
}
*/
/* 4xl devices */
/*
@media (min-width: 2560px) {
  .row-cols-4xl-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
}
*/
/* 5xl devices */
/*
@media (min-width: 3840px) {
  .row-cols-5xl-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
}
*/



/* COL */

/* 3xl devices */
@media (min-width: 1920px) {
  .col-3xl-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-3xl-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-3xl-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-3xl-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-3xl-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
}
/* 4xl devices */
@media (min-width: 2560px) {
  .col-4xl-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-4xl-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-4xl-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-4xl-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-4xl-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
}
/* 5xl devices */
@media (min-width: 3840px) {
  .col-5xl-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-5xl-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-5xl-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-4xl-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-5xl-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
}




/* DISPLAY */

/* 3xl devices */
@media (min-width: 1920px) {
  .d-3xl-none {
    display: none !important;
  }
  .d-3xl-block {
    display: block !important;
  }
}
/* 4xl devices */
@media (min-width: 2560px) {
  .d-4xl-none {
    display: none !important;
  }
  .d-4xl-block {
    display: block !important;
  }
}
/* 5xl devices */
@media (min-width: 3840px) {
  .d-5xl-none {
    display: none !important;
  }
  .d-5xl-block {
    display: block !important;
  }
}




/* OVERFLOW */
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
}
/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .overflow-xl-hidden {
    overflow: hidden !important;
  }
  .overflow-xl-scroll {
    overflow: scroll !important;
  }
}
/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
  .overflow-xxl-hidden {
    overflow: hidden !important;
  }
  .overflow-xxl-scroll {
    overflow: scroll !important;
  }
}
/* 3xl devices */
@media (min-width: 1920px) {
  .overflow-3xl-hidden {
    overflow: hidden !important;
  }
  .overflow-3xl-scroll {
    overflow: scroll !important;
  }
}
/* 4xl devices */
@media (min-width: 2560px) {
  .overflow-4xl-hidden {
    overflow: hidden !important;
  }
  .overflow-4xl-scroll {
    overflow: scroll !important;
  }
}
/* 5xl devices */
@media (min-width: 3840px) {
  .overflow-5xl-hidden {
    overflow: hidden !important;
  }
  .overflow-5xl-scroll {
    overflow: scroll !important;
  }
}



/* VIEWPORT */
.vh-100 {
  height: 100svh !important;
}