*,
:after,
:before {
  box-sizing: border-box
}

:after,
:before {
  text-decoration: inherit;
  vertical-align: inherit
}

html {
  cursor: default;
  line-height: 1.5;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  -webkit-tap-highlight-color: transparent;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  word-break: break-word
}

body {
  margin: 0
}

h1 {
  font-size: 2em;
  margin: .67em 0
}

dl dl,
dl ol,
dl ul,
ol dl,
ol ol,
ol ul,
ul dl,
ul ol,
ul ul {
  margin: 0
}

hr {
  height: 0;
  overflow: visible
}

main {
  display: block
}

nav ol,
nav ul {
  list-style: none;
  padding: 0
}

pre {
  font-family: monospace, monospace;
  font-size: 1em
}

a {
  background-color: transparent
}

abbr[title] {
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted
}

b,
strong {
  font-weight: bolder
}

code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em
}

small {
  font-size: 80%
}

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle
}

audio,
video {
  display: inline-block
}

audio:not([controls]) {
  display: none;
  height: 0
}

iframe,
img {
  border-style: none
}

svg:not([fill]) {
  fill: currentColor
}

svg:not(:root) {
  overflow: hidden
}

button,
input,
select {
  margin: 0
}

button {
  overflow: visible;
  text-transform: none
}

[type=button],
[type=reset],
[type=submit],
button {
  -webkit-appearance: button
}

fieldset {
  border: 1px solid #a0a0a0;
  padding: .35em .75em .625em
}

input {
  overflow: visible
}

legend {
  color: inherit;
  display: table;
  max-width: 100%;
  white-space: normal
}

progress {
  display: inline-block;
  vertical-align: baseline
}

select {
  text-transform: none
}

textarea {
  margin: 0;
  overflow: auto;
  resize: vertical
}

[type=checkbox],
[type=radio] {
  padding: 0
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto
}

::-webkit-input-placeholder {
  color: inherit;
  opacity: .54
}

::-webkit-search-decoration {
  -webkit-appearance: none
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit
}

::-moz-focus-inner {
  border-style: none;
  padding: 0
}

:-moz-focusring {
  outline: 1px dotted ButtonText
}

:-moz-ui-invalid {
  box-shadow: none
}

details,
dialog {
  display: block
}

dialog {
  background-color: #fff;
  border: solid;
  color: #000;
  height: -moz-fit-content;
  height: fit-content;
  left: 0;
  margin: auto;
  padding: 1em;
  position: absolute;
  right: 0;
  width: -moz-fit-content;
  width: fit-content
}

dialog:not([open]) {
  display: none
}

summary {
  display: list-item
}

canvas {
  display: inline-block
}

template {
  display: none
}

[tabindex],
a,
area,
button,
input,
label,
select,
summary,
textarea {
  touch-action: manipulation
}

[hidden] {
  display: none
}

[aria-busy=true] {
  cursor: progress
}

[aria-controls] {
  cursor: pointer
}

[aria-disabled=true],
[disabled] {
  cursor: not-allowed
}

[aria-hidden=false][hidden] {
  display: initial
}

[aria-hidden=false][hidden]:not(:focus) {
  clip: rect(0, 0, 0, 0);
  position: absolute
}

abbr,
address,
article,
aside,
audio,
b,
blockquote,
body,
canvas,
caption,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
p,
pre,
q,
samp,
section,
small,
span,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
ul,
var,
video {
  background: transparent;
  border: 0;
  font-size: 100%;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: baseline
}

body {
  line-height: 1
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block
}

nav ul {
  list-style: none
}

blockquote,
q {
  quotes: none
}

blockquote:after,
blockquote:before,
q:after,
q:before {
  content: "";
  content: none
}

a {
  background: transparent;
  font-size: 100%;
  margin: 0;
  padding: 0;
  vertical-align: baseline
}

ins {
  text-decoration: none
}

ins,
mark {
  background-color: #ff9;
  color: #000
}

mark {
  font-style: italic;
  font-weight: 700
}

del {
  text-decoration: line-through
}

abbr[title],
dfn[title] {
  border-bottom: 1px dotted;
  cursor: help
}

hr {
  border: 0;
  border-top: 1px solid #ccc;
  display: block;
  height: 1px;
  margin: 1em 0;
  padding: 0
}

input,
select {
  vertical-align: middle
}

@font-face {
  font-display: swap;
  font-family: Exo\ 2;
  font-style: normal;
  font-weight: 900;
  src: url(../fonts/Exo2-Black.woff2) format("woff2"), url(../fonts/Exo2-Black.woff) format("woff")
}

@font-face {
  font-display: swap;
  font-family: Exo\ 2;
  font-style: italic;
  font-weight: 900;
  src: url(../fonts/Exo2-BlackItalic.woff2) format("woff2"), url(../fonts/Exo2-BlackItalic.woff) format("woff")
}

@font-face {
  font-display: swap;
  font-family: Exo\ 2;
  font-style: normal;
  font-weight: 700;
  src: url(../fonts/Exo2-Bold.woff2) format("woff2"), url(../fonts/Exo2-Bold.woff) format("woff")
}

@font-face {
  font-display: swap;
  font-family: Exo\ 2;
  font-style: italic;
  font-weight: 700;
  src: url(../fonts/Exo2-BoldItalic.woff2) format("woff2"), url(../fonts/Exo2-BoldItalic.woff) format("woff")
}

@font-face {
  font-display: swap;
  font-family: Exo\ 2;
  font-style: normal;
  font-weight: 700;
  src: url(../fonts/Exo2-ExtraBold.woff2) format("woff2"), url(../fonts/Exo2-ExtraBold.woff) format("woff")
}

@font-face {
  font-display: swap;
  font-family: Exo\ 2;
  font-style: italic;
  font-weight: 700;
  src: url(../fonts/Exo2-ExtraBoldItalic.woff2) format("woff2"), url(../fonts/Exo2-ExtraBoldItalic.woff) format("woff")
}

@font-face {
  font-display: swap;
  font-family: Exo\ 2;
  font-style: normal;
  font-weight: 200;
  src: url(../fonts/Exo2-ExtraLight.woff2) format("woff2"), url(../fonts/Exo2-ExtraLight.woff) format("woff")
}

@font-face {
  font-display: swap;
  font-family: Exo\ 2;
  font-style: italic;
  font-weight: 200;
  src: url(../fonts/Exo2-ExtraLightItalic.woff2) format("woff2"), url(../fonts/Exo2-ExtraLightItalic.woff) format("woff")
}

@font-face {
  font-display: swap;
  font-family: Exo\ 2;
  font-style: italic;
  font-weight: 400;
  src: url(../fonts/Exo2-Italic.woff2) format("woff2"), url(../fonts/Exo2-Italic.woff) format("woff")
}

@font-face {
  font-display: swap;
  font-family: Exo\ 2;
  font-style: normal;
  font-weight: 300;
  src: url(../fonts/Exo2-Light.woff2) format("woff2"), url(../fonts/Exo2-Light.woff) format("woff")
}

@font-face {
  font-display: swap;
  font-family: Exo\ 2;
  font-style: italic;
  font-weight: 300;
  src: url(../fonts/Exo2-LightItalic.woff2) format("woff2"), url(../fonts/Exo2-LightItalic.woff) format("woff")
}

@font-face {
  font-display: swap;
  font-family: Exo\ 2;
  font-style: normal;
  font-weight: 500;
  src: url(../fonts/Exo2-Medium.woff2) format("woff2"), url(../fonts/Exo2-Medium.woff) format("woff")
}

@font-face {
  font-display: swap;
  font-family: Exo\ 2;
  font-style: italic;
  font-weight: 500;
  src: url(../fonts/Exo2-MediumItalic.woff2) format("woff2"), url(../fonts/Exo2-MediumItalic.woff) format("woff")
}

@font-face {
  font-display: swap;
  font-family: Exo\ 2;
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/Exo2-Regular.woff2) format("woff2"), url(../fonts/Exo2-Regular.woff) format("woff")
}

@font-face {
  font-display: swap;
  font-family: Exo\ 2;
  font-style: normal;
  font-weight: 600;
  src: url(../fonts/Exo2-SemiBold.woff2) format("woff2"), url(../fonts/Exo2-SemiBold.woff) format("woff")
}

@font-face {
  font-display: swap;
  font-family: Exo\ 2;
  font-style: italic;
  font-weight: 600;
  src: url(../fonts/Exo2-SemiBoldItalic.woff2) format("woff2"), url(../fonts/Exo2-SemiBoldItalic.woff) format("woff")
}

@font-face {
  font-display: swap;
  font-family: Exo\ 2;
  font-style: normal;
  font-weight: 100;
  src: url(../fonts/Exo2-Thin.woff2) format("woff2"), url(../fonts/Exo2-Thin.woff) format("woff")
}

@font-face {
  font-display: swap;
  font-family: Exo\ 2;
  font-style: italic;
  font-weight: 100;
  src: url(../fonts/Exo2-ThinItalic.woff2) format("woff2"), url(../fonts/Exo2-ThinItalic.woff) format("woff")
}

html {
  --brand: #0c6ad1;
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
  scrollbar-color: var(--brand) Canvas;
  scrollbar-gutter: stable
}

body,
html {
  overscroll-behavior-y: none
}

:root {
  --base-font-size: 1rem;
  --font-family: "Exo 2", sans-serif;
  --main: #181021;
  --yellow: #ffc818;
  --orange: orange;
  --purple: purple;
  --white: #fff;
  --red: red;
  --green: green;
  --blue: #0c6ad1;
  --blue-lights: #e0edff;
  --blue-light: #f7f8fc;
  --braun: braun;
  --black: #000;
  --grey: grey;
  --grey-light: #f0f3f7;
  accent-color: var(--brand);
  --size-5: 0.3125rem;
  --size-10: 0.625rem;
  --size-15: 0.9375rem;
  --size-16: 1rem;
  --size-20: 1.25rem;
  --size-25: 1.5625rem;
  --size-30: 1.875rem;
  --size-35: 2.1875rem;
  --size-40: 2.5rem;
  --size-45: 2.8125rem;
  --size-50: 3.125rem;
  --size-55: 3.4375rem;
  --size-60: 3.75rem;
  --size-65: 4.0625rem;
  --size-70: 4.375rem;
  --size-75: 4.6875rem;
  --size-80: 5rem;
  --size-85: 5.3125rem;
  --size-90: 5.625rem;
  --size-95: 5.9375rem;
  --size-100: 6.25rem;
  --h1-size: 35px;
  --h2-size: 1.875rem;
  --h3-size: 1.5625rem;
  --h4-size: 1.42rem;
  --h5-size: 1.375rem;
  --h6-size: 1.25rem;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1.125rem;
  --text-lg: 1.25rem;
  --text-xl: 1.375rem;
  --container-width: 80rem;
  --container-padding-x: 0.9375rem;
  --transition-duration: 0.2s;
  --transition-timing-function: ease-out
}

@media (prefers-reduced-motion:no-preference) {
  :root {
    scroll-behavior: smooth
  }
}

@media (prefers-reduced-motion:reduce) {
  @view-transition {
    navigation: none
  }
}

:focus {
  outline: none
}

:focus-visible {
  box-shadow: 0 0 5px rgba(0, 128, 0, .6);
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  transition: all var(--transition-duration) var(--transition-timing-function)
}

::-moz-selection {
  background-color: var(--brand);
  color: var(--white)
}

::selection {
  background-color: var(--brand);
  color: var(--white)
}

::marker {
  color: var(--brand)
}

:is(::-webkit-calendar-picker-indicator, ::-webkit-clear-button, ::-webkit-inner-spin-button, ::-webkit-outer-spin-button) {
  color: var(--brand)
}

body {
  background-color: var(--white);
  color: var(--main);
  font-family: var(--font-family);
  font-size: var(--base-font-size);
  font-style: normal;
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 400;
  line-height: 1.5;
  text-wrap: pretty
}

.font-2 {
  font-family: var(--second-family)
}

.lh-123 {
  line-height: 1.23
}

.lh-130 {
  line-height: 1.3
}

.lh-140 {
  line-height: 1.4
}

.lh-144 {
  line-height: 1.44
}

.lh-147 {
  line-height: 1.47
}

.h1,
h1 {
  font-size: var(--h1-size)
}

.h2,
h2 {
  font-size: var(--h2-size);
  line-height: 1
}

.h3,
h3 {
  font-size: var(--h3-size)
}

.h4,
h4 {
  font-size: var(--h4-size)
}

.h5,
h5 {
  font-size: var(--h5-size)
}

.h6,
h6 {
  font-size: var(--h6-size)
}

:where(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6) {
  font-weight: inherit;
  line-height: 1.2;
  text-wrap: balance
}

.h1 :where(h1, h2, h3, h4, h5, h6) {
  font-size: inherit
}

.h2 :where(h1, h2, h3, h4, h5, h6) {
  font-size: inherit
}

.h3 :where(h1, h2, h3, h4, h5, h6) {
  font-size: inherit
}

.h4 :where(h1, h2, h3, h4, h5, h6) {
  font-size: inherit
}

.h5 :where(h1, h2, h3, h4, h5, h6) {
  font-size: inherit
}

.h6 :where(h1, h2, h3, h4, h5, h6) {
  font-size: inherit
}

.text-pretty {
  text-wrap: pretty
}

.text-balance {
  text-wrap: balance
}

div.p:first-child,
p:first-child {
  margin-top: 0
}

ul:where(ul) {
  list-style-type: disc
}

a {
  -webkit-text-decoration-skip-ink: none;
  text-decoration-skip-ink: none;
  text-underline-offset: 3px
}

@media (hover:hover) and (pointer:fine) {
  a:hover {
    color: var(--blue);
    text-decoration: none
  }

  .hover-trans:hover {
    transform: translateY(-5px)
  }

  .hover-fill:hover {
    background-color: var(--bg-blue-lights);
    color: var(--blue) !important
  }

  .hover-blue:hover {
    background-color: var(--blue);
    color: var(--white)
  }

  .tabs a:hover {
    background-color: var(--blue);
    color: var(--white) !important
  }
}

img {
  border: none;
  display: inline-block;
  height: auto;
  max-width: 100%;
  position: relative;
  transition: transform var(--transition-duration) ease-in-out;
  vertical-align: bottom
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: normal;
  margin: 0
}

input[type=email],
input[type=number],
input[type=tel],
input[type=text] {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  margin: 0
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline-offset: -1px;
  outline-style: dashed;
  outline-width: 1px
}

input {
  transition: outline-color .3s ease, transform .3s ease
}

input:focus-visible:user-invalid,
input:user-invalid {
  animation: shake2 .3s ease;
  border: 0;
  outline: 2px solid var(--red)
}

input[type=checkbox] {
  accent-color: var(--brand);
  height: 1.5rem;
  width: 1.5em
}

teaxtarea,
textarea {
  max-height: 400px;
  min-height: 200px;
  resize: vertical
}

fieldset {
  border: none
}

button[disabled],
html input[disabled] {
  cursor: default;
  opacity: .7;
  pointer-events: none
}

.text-field__input[type=search]::-webkit-search-cancel-button,
.text-field__input[type=search]::-webkit-search-decoration,
.text-field__input[type=search]::-webkit-search-results-button,
.text-field__input[type=search]::-webkit-search-results-decoration {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none
}

.main-page {
  min-height: 100vh;
  overflow-x: hidden;
  overflow-x: clip;
  overflow-y: visible
}

@supports (height:100dvh) {
  .main-page {
    min-height: 100dvh
  }
}

.container {
  max-width: calc(var(--container-width) + var(--container-padding-x)*2);
  width: 100%
}

.container,
.container-fluid {
  margin-inline: auto;
  padding-inline: var(--container-padding-x)
}

.container-fluid {
  max-width: 1920px
}

.full-width {
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  max-width: 100vw;
  position: relative;
  right: 50%;
  width: 100vw
}

.embed-container {
  height: auto;
  max-width: 100%;
  overflow: hidden;
  padding-bottom: 56.25%;
  position: relative
}

.embed-container embed,
.embed-container iframe,
.embed-container object {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%
}

.grid,
[class*=grid-auto-] {
  display: grid;
  grid-gap: var(--grid-gap, 0)
}

.grid {
  --grid-cols: 12;
  grid-template-columns: repeat(var(--grid-cols), 1fr)
}

.grid>* {
  grid-column: span var(--span, 12) /span var(--span, 12)
}

.auto-grid {
  --min-column-size: 22rem;
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--min-column-size), 100%), 1fr))
}

.grid-4 {
  --grid-cols: 4
}

.grid-5 {
  --grid-cols: 5
}

.grid-6 {
  --grid-cols: 6
}

.grid-7 {
  --grid-cols: 7
}

.grid-8 {
  --grid-cols: 8
}

.grid-9 {
  --grid-cols: 9
}

.grid-10 {
  --grid-cols: 10
}

.grid-11 {
  --grid-cols: 11
}

.grid-auto-lg,
.grid-auto-md,
.grid-auto-sm,
.grid-auto-xl,
.grid-auto-xs {
  grid-template-columns: repeat(auto-fit, minmax(var(--col-min-width), 1fr))
}

.grid-auto-xs {
  --col-min-width: 8rem
}

.grid-auto-sm {
  --col-min-width: 10rem
}

.grid-auto-md {
  --col-min-width: 15rem
}

.grid-auto-lg {
  --col-min-width: 20rem
}

.grid-auto-xl {
  --col-min-width: 25rem
}

.grid-auto-cols {
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr))
}

.grid-auto-rows {
  grid-auto-rows: 1fr
}

#fixmenu {
  transition: all var(--transition-duration) ease-in-out;
  z-index: 888
}

.pop-politics {
  max-width: 50rem;
  padding: 2.5rem 1.875rem;
  width: 100%
}

.pop-politics-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1.875rem;
  text-align: center
}

.pop-scroll {
  max-height: 13.75rem;
  overflow-y: scroll
}

.pop-scroll p:not(:last-child) {
  margin-bottom: 1.25rem
}

.icon {
  --size: 1em;
  display: inline-block;
  flex-shrink: 0;
  font-size: var(--size);
  height: 1em;
  line-height: 1;
  max-width: none;
  width: 1em
}

.icon,
.icon use {
  color: inherit;
  fill: currentColor
}

.icon--3xs {
  --size: 8px
}

.icon--2xs {
  --size: 12px
}

.icon--xs {
  --size: 16px
}

.icon--sm {
  --size: 24px
}

.icon--md {
  --size: 32px
}

.icon--lg {
  --size: 48px
}

.icon--xl {
  --size: 64px
}

.icon--2xl {
  --size: 96px
}

.icon--3xl {
  --size: 128px
}

.icon-container {
  grid-template-columns: auto minmax(0, 1fr)
}

.icon--is-spinning {
  animation: icon-spin 1s linear infinite
}

.error {
  animation: shake .6s;
  color: var(--red) !important
}

form .error::-webkit-input-placeholder {
  color: var(--red) !important;
  outline: none
}

form .error:-moz-placeholder {
  color: var(--red) !important;
  outline: none
}

@keyframes shake {

  0%,
  to {
    transform: translateX(0)
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-.625rem)
  }

  20%,
  40%,
  60%,
  80% {
    transform: translateX(.625rem)
  }
}

@keyframes shake2 {

  0%,
  to {
    transform: translateX(0)
  }

  25%,
  75% {
    transform: translateX(-5px)
  }

  50% {
    transform: translateX(5px)
  }
}

@keyframes icon-spin {
  0% {
    transform: rotate(0deg)
  }

  to {
    transform: rotate(1turn)
  }
}

.btn-clear {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  border: 0;
  font-family: inherit;
  margin: 0;
  padding: 0
}

.but {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  text-decoration: none;
  transition: all var(--transition-duration) var(--transition-timing-function)
}

.but:active {
  position: relative;
  top: 1px
}

.d-none {
  display: none
}

.d-block {
  display: block
}

.d-inline {
  display: inline
}

.d-inline-block {
  display: inline-block
}

.d-grid {
  display: grid
}

.d-inline-grid {
  display: inline-grid
}

.d-flex {
  display: flex
}

.d-inline-flex {
  display: inline-flex
}

.d-flex-center {
  display: flex
}

.d-flex-center,
.d-inline-flex-center {
  align-items: center;
  justify-content: center
}

.d-inline-flex-center {
  display: inline-flex
}

.d-grid-center {
  display: grid;
  place-items: center
}

.d-inline-grid-center {
  display: inline-grid;
  place-items: center
}

.flex-row {
  flex-direction: row
}

.flex-column {
  flex-direction: column
}

.flex-row-reverse {
  flex-direction: row-reverse
}

.flex-column-reverse {
  flex-direction: column-reverse
}

.flex-wrap {
  flex-wrap: wrap
}

.flex-nowrap {
  flex-wrap: nowrap
}

.flex-wrap-reverse {
  flex-wrap: wrap-reverse
}

.flex-1 {
  flex: 1
}

.flex-none {
  flex: none
}

.flex-fill {
  flex: 1 1 auto
}

.flex-grow-0 {
  flex-grow: 0
}

.flex-grow-1 {
  flex-grow: 1
}

.flex-shrink-0 {
  flex-shrink: 0
}

.flex-shrink-1 {
  flex-shrink: 1
}

.justify-content-start {
  justify-content: flex-start
}

.justify-content-end {
  justify-content: flex-end
}

.justify-content-center {
  justify-content: center
}

.justify-content-between {
  justify-content: space-between
}

.justify-content-around {
  justify-content: space-around
}

.justify-content-evenly {
  justify-content: space-evenly
}

.align-items-start {
  align-items: flex-start
}

.align-items-end {
  align-items: flex-end
}

.align-items-center {
  align-items: center
}

.align-items-baseline {
  align-items: baseline
}

.align-items-stretch {
  align-items: stretch
}

.align-content-start {
  align-content: flex-start
}

.align-content-end {
  align-content: flex-end
}

.align-content-center {
  align-content: center
}

.align-content-between {
  align-content: space-between
}

.align-content-around {
  align-content: space-around
}

.align-content-stretch {
  align-content: stretch
}

.align-self-auto {
  align-self: auto
}

.align-self-start {
  align-self: flex-start
}

.align-self-end {
  align-self: flex-end
}

.align-self-center {
  align-self: center
}

.align-self-baseline {
  align-self: baseline
}

.align-self-stretch {
  align-self: stretch
}

.order-first {
  order: -1
}

.order-0 {
  order: 0
}

.order-1 {
  order: 1
}

.order-2 {
  order: 2
}

.order-3 {
  order: 3
}

.order-4 {
  order: 4
}

.order-5 {
  order: 5
}

.order-last {
  order: 6
}

.col-start {
  grid-column-start: 1
}

.col-end {
  grid-column-end: -1
}

.row-start {
  grid-row-start: 1
}

.row-end {
  grid-row-end: -1
}

.row-start-auto {
  grid-row-start: auto
}

.row-end-auto {
  grid-row-end: auto
}

.col-auto {
  grid-column: auto
}

.row-auto {
  grid-row: auto
}

.grid-cols-none {
  grid-template-columns: none
}

.grid-rows-none {
  grid-template-rows: none
}

.col-span-full {
  grid-column: 1/-1
}

.row-span-full {
  grid-row: 1/-1
}

.col-1 {
  --span: 1
}

.col-start-1 {
  grid-column-start: 1
}

.col-end-2 {
  grid-column-end: 2
}

.col-span-1 {
  grid-column: span 1/span 1
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr))
}

.row-1 {
  grid-row: span 1/span 1
}

.row-start-1 {
  grid-row-start: 1
}

.row-end-2 {
  grid-row-end: 2
}

.row-span-1 {
  grid-row: span 1/span 1
}

.grid-rows-1 {
  grid-template-rows: repeat(1, minmax(0, 1fr))
}

.col-2 {
  --span: 2
}

.col-start-2 {
  grid-column-start: 2
}

.col-end-3 {
  grid-column-end: 3
}

.col-span-2 {
  grid-column: span 2/span 2
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr))
}

.row-2 {
  grid-row: span 2/span 2
}

.row-start-2 {
  grid-row-start: 2
}

.row-end-3 {
  grid-row-end: 3
}

.row-span-2 {
  grid-row: span 2/span 2
}

.grid-rows-2 {
  grid-template-rows: repeat(2, minmax(0, 1fr))
}

.col-3 {
  --span: 3
}

.col-start-3 {
  grid-column-start: 3
}

.col-end-4 {
  grid-column-end: 4
}

.col-span-3 {
  grid-column: span 3/span 3
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr))
}

.row-3 {
  grid-row: span 3/span 3
}

.row-start-3 {
  grid-row-start: 3
}

.row-end-4 {
  grid-row-end: 4
}

.row-span-3 {
  grid-row: span 3/span 3
}

.grid-rows-3 {
  grid-template-rows: repeat(3, minmax(0, 1fr))
}

.col-4 {
  --span: 4
}

.col-start-4 {
  grid-column-start: 4
}

.col-end-5 {
  grid-column-end: 5
}

.col-span-4 {
  grid-column: span 4/span 4
}

.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr))
}

.row-4 {
  grid-row: span 4/span 4
}

.row-start-4 {
  grid-row-start: 4
}

.row-end-5 {
  grid-row-end: 5
}

.row-span-4 {
  grid-row: span 4/span 4
}

.grid-rows-4 {
  grid-template-rows: repeat(4, minmax(0, 1fr))
}

.col-5 {
  --span: 5
}

.col-start-5 {
  grid-column-start: 5
}

.col-end-6 {
  grid-column-end: 6
}

.col-span-5 {
  grid-column: span 5/span 5
}

.grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr))
}

.row-5 {
  grid-row: span 5/span 5
}

.row-start-5 {
  grid-row-start: 5
}

.row-end-6 {
  grid-row-end: 6
}

.row-span-5 {
  grid-row: span 5/span 5
}

.grid-rows-5 {
  grid-template-rows: repeat(5, minmax(0, 1fr))
}

.col-6 {
  --span: 6
}

.col-start-6 {
  grid-column-start: 6
}

.col-end-7 {
  grid-column-end: 7
}

.col-span-6 {
  grid-column: span 6/span 6
}

.grid-cols-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr))
}

.row-6 {
  grid-row: span 6/span 6
}

.row-start-6 {
  grid-row-start: 6
}

.row-end-7 {
  grid-row-end: 7
}

.row-span-6 {
  grid-row: span 6/span 6
}

.grid-rows-6 {
  grid-template-rows: repeat(6, minmax(0, 1fr))
}

.col-7 {
  --span: 7
}

.col-start-7 {
  grid-column-start: 7
}

.col-end-8 {
  grid-column-end: 8
}

.col-span-7 {
  grid-column: span 7/span 7
}

.grid-cols-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr))
}

.row-7 {
  grid-row: span 7/span 7
}

.row-start-7 {
  grid-row-start: 7
}

.row-end-8 {
  grid-row-end: 8
}

.row-span-7 {
  grid-row: span 7/span 7
}

.grid-rows-7 {
  grid-template-rows: repeat(7, minmax(0, 1fr))
}

.col-8 {
  --span: 8
}

.col-start-8 {
  grid-column-start: 8
}

.col-end-9 {
  grid-column-end: 9
}

.col-span-8 {
  grid-column: span 8/span 8
}

.grid-cols-8 {
  grid-template-columns: repeat(8, minmax(0, 1fr))
}

.row-8 {
  grid-row: span 8/span 8
}

.row-start-8 {
  grid-row-start: 8
}

.row-end-9 {
  grid-row-end: 9
}

.row-span-8 {
  grid-row: span 8/span 8
}

.grid-rows-8 {
  grid-template-rows: repeat(8, minmax(0, 1fr))
}

.col-9 {
  --span: 9
}

.col-start-9 {
  grid-column-start: 9
}

.col-end-10 {
  grid-column-end: 10
}

.col-span-9 {
  grid-column: span 9/span 9
}

.grid-cols-9 {
  grid-template-columns: repeat(9, minmax(0, 1fr))
}

.row-9 {
  grid-row: span 9/span 9
}

.row-start-9 {
  grid-row-start: 9
}

.row-end-10 {
  grid-row-end: 10
}

.row-span-9 {
  grid-row: span 9/span 9
}

.grid-rows-9 {
  grid-template-rows: repeat(9, minmax(0, 1fr))
}

.col-10 {
  --span: 10
}

.col-start-10 {
  grid-column-start: 10
}

.col-end-11 {
  grid-column-end: 11
}

.col-span-10 {
  grid-column: span 10/span 10
}

.grid-cols-10 {
  grid-template-columns: repeat(10, minmax(0, 1fr))
}

.row-10 {
  grid-row: span 10/span 10
}

.row-start-10 {
  grid-row-start: 10
}

.row-end-11 {
  grid-row-end: 11
}

.row-span-10 {
  grid-row: span 10/span 10
}

.grid-rows-10 {
  grid-template-rows: repeat(10, minmax(0, 1fr))
}

.col-11 {
  --span: 11
}

.col-start-11 {
  grid-column-start: 11
}

.col-end-12 {
  grid-column-end: 12
}

.col-span-11 {
  grid-column: span 11/span 11
}

.grid-cols-11 {
  grid-template-columns: repeat(11, minmax(0, 1fr))
}

.row-11 {
  grid-row: span 11/span 11
}

.row-start-11 {
  grid-row-start: 11
}

.row-end-12 {
  grid-row-end: 12
}

.row-span-11 {
  grid-row: span 11/span 11
}

.grid-rows-11 {
  grid-template-rows: repeat(11, minmax(0, 1fr))
}

.col-12 {
  --span: 12
}

.col-start-12 {
  grid-column-start: 12
}

.col-end-13 {
  grid-column-end: 13
}

.col-span-12 {
  grid-column: span 12/span 12
}

.grid-cols-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr))
}

.row-12 {
  grid-row: span 12/span 12
}

.row-start-12 {
  grid-row-start: 12
}

.row-end-13 {
  grid-row-end: 13
}

.row-span-12 {
  grid-row: span 12/span 12
}

.grid-rows-12 {
  grid-template-rows: repeat(12, minmax(0, 1fr))
}

.w-100 {
  width: 100%
}

.h-100 {
  height: 100%
}

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

.max-content {
  width: -moz-max-content;
  width: max-content
}

.m-0 {
  margin: 0
}

.m-auto {
  margin: auto
}

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

.mt-auto {
  margin-top: auto
}

.me-auto {
  margin-right: auto
}

.ms-auto {
  margin-left: auto
}

.mt-0 {
  margin-top: 0
}

.mt-10 {
  margin-top: var(--size-10)
}

.mt-15 {
  margin-top: var(--size-15)
}

.mt-16 {
  margin-top: var(--size-16)
}

.mt-20 {
  margin-top: var(--size-20)
}

.mt-30 {
  margin-top: var(--size-30)
}

.mt-40 {
  margin-top: var(--size-40)
}

.mt-50 {
  margin-top: var(--size-50)
}

.mt-60 {
  margin-top: var(--size-60)
}

.mt-70 {
  margin-top: var(--size-70)
}

.mt-80 {
  margin-top: var(--size-80)
}

.mt-90 {
  margin-top: var(--size-90)
}

.mt-100 {
  margin-top: var(--size-100)
}

.mb-0 {
  margin-bottom: 0
}

.mb-10 {
  margin-bottom: var(--size-10)
}

.mb-15 {
  margin-bottom: var(--size-15)
}

.mb-16 {
  margin-bottom: var(--size-16)
}

.mb-20 {
  margin-bottom: var(--size-20)
}

.mb-30 {
  margin-bottom: var(--size-30)
}

.mb-40 {
  margin-bottom: var(--size-40)
}

.mb-50 {
  margin-bottom: var(--size-50)
}

.mb-60 {
  margin-bottom: var(--size-60)
}

.mb-70 {
  margin-bottom: var(--size-70)
}

.mb-80 {
  margin-bottom: var(--size-80)
}

.mb-90 {
  margin-bottom: var(--size-90)
}

.mb-100 {
  margin-bottom: var(--size-100)
}

.p-0 {
  padding: 0
}

.p-10 {
  padding: var(--size-10)
}

.p-15 {
  padding: var(--size-15)
}

.p-16 {
  padding: var(--size-16)
}

.p-20 {
  padding: var(--size-20)
}

.p-30 {
  padding: var(--size-30)
}

.p-40 {
  padding: var(--size-40)
}

.p-50 {
  padding: var(--size-50)
}

.py-10 {
  padding-bottom: var(--size-10);
  padding-top: var(--size-10)
}

.py-15 {
  padding-bottom: var(--size-15);
  padding-top: var(--size-15)
}

.py-16 {
  padding-bottom: var(--size-16);
  padding-top: var(--size-16)
}

.py-20 {
  padding-bottom: var(--size-20);
  padding-top: var(--size-20)
}

.py-30 {
  padding-bottom: var(--size-30);
  padding-top: var(--size-30)
}

.py-40 {
  padding-bottom: var(--size-40);
  padding-top: var(--size-40)
}

.py-50 {
  padding-bottom: var(--size-50);
  padding-top: var(--size-50)
}

.px-10 {
  padding-left: var(--size-10);
  padding-right: var(--size-10)
}

.px-15 {
  padding-left: var(--size-15);
  padding-right: var(--size-15)
}

.px-16 {
  padding-left: var(--size-16);
  padding-right: var(--size-16)
}

.px-20 {
  padding-left: var(--size-20);
  padding-right: var(--size-20)
}

.px-30 {
  padding-left: var(--size-30);
  padding-right: var(--size-30)
}

.px-40 {
  padding-left: var(--size-40);
  padding-right: var(--size-40)
}

.px-50 {
  padding-left: var(--size-50);
  padding-right: var(--size-50)
}

.pt-0 {
  padding-top: 0
}

.pt-5 {
  padding-top: var(--size-5)
}

.pt-10 {
  padding-top: var(--size-10)
}

.pt-15 {
  padding-top: var(--size-15)
}

.pt-16 {
  padding-top: var(--size-16)
}

.pt-20 {
  padding-top: var(--size-20)
}

.pt-30 {
  padding-top: var(--size-30)
}

.pt-40 {
  padding-top: var(--size-40)
}

.pt-50 {
  padding-top: var(--size-50)
}

.pt-60 {
  padding-top: var(--size-60)
}

.pt-70 {
  padding-top: var(--size-70)
}

.pt-80 {
  padding-top: var(--size-80)
}

.pt-90 {
  padding-top: var(--size-90)
}

.pt-100 {
  padding-top: var(--size-100)
}

.pb-0 {
  padding-bottom: 0
}

.pb-10 {
  padding-bottom: var(--size-10)
}

.pb-15 {
  padding-bottom: var(--size-15)
}

.pb-16 {
  padding-bottom: var(--size-16)
}

.pb-20 {
  padding-bottom: var(--size-20)
}

.pb-30 {
  padding-bottom: var(--size-30)
}

.pb-40 {
  padding-bottom: var(--size-40)
}

.pb-50 {
  padding-bottom: var(--size-50)
}

.pb-60 {
  padding-bottom: var(--size-60)
}

.pb-70 {
  padding-bottom: var(--size-70)
}

.pb-80 {
  padding-bottom: var(--size-80)
}

.pb-90 {
  padding-bottom: var(--size-90)
}

.pb-100 {
  padding-bottom: var(--size-100)
}

.gap-5 {
  gap: var(--size-5)
}

.gap-x-5 {
  -moz-column-gap: var(--size-5);
  column-gap: var(--size-5)
}

.gap-y-5 {
  row-gap: var(--size-5)
}

.gap-10 {
  gap: var(--size-10)
}

.gap-x-10 {
  -moz-column-gap: var(--size-10);
  column-gap: var(--size-10)
}

.gap-y-10 {
  row-gap: var(--size-10)
}

.gap-15 {
  gap: var(--size-15)
}

.gap-x-15 {
  -moz-column-gap: var(--size-15);
  column-gap: var(--size-15)
}

.gap-y-15 {
  row-gap: var(--size-15)
}

.gap-16 {
  gap: var(--size-16)
}

.gap-x-16 {
  -moz-column-gap: var(--size-16);
  column-gap: var(--size-16)
}

.gap-y-16 {
  row-gap: var(--size-16)
}

.gap-20 {
  gap: var(--size-20)
}

.gap-x-20 {
  -moz-column-gap: var(--size-20);
  column-gap: var(--size-20)
}

.gap-y-20 {
  row-gap: var(--size-20)
}

.gap-25 {
  gap: var(--size-25)
}

.gap-x-25 {
  -moz-column-gap: var(--size-25);
  column-gap: var(--size-25)
}

.gap-y-25 {
  row-gap: var(--size-25)
}

.gap-30 {
  gap: var(--size-30)
}

.gap-x-30 {
  -moz-column-gap: var(--size-30);
  column-gap: var(--size-30)
}

.gap-y-30 {
  row-gap: var(--size-30)
}

.gap-35 {
  gap: var(--size-35)
}

.gap-x-35 {
  -moz-column-gap: var(--size-35);
  column-gap: var(--size-35)
}

.gap-y-35 {
  row-gap: var(--size-35)
}

.gap-40 {
  gap: var(--size-40)
}

.gap-x-40 {
  -moz-column-gap: var(--size-40);
  column-gap: var(--size-40)
}

.gap-y-40 {
  row-gap: var(--size-40)
}

.gap-45 {
  gap: var(--size-45)
}

.gap-x-45 {
  -moz-column-gap: var(--size-45);
  column-gap: var(--size-45)
}

.gap-y-45 {
  row-gap: var(--size-45)
}

.gap-50 {
  gap: var(--size-50)
}

.gap-x-50 {
  -moz-column-gap: var(--size-50);
  column-gap: var(--size-50)
}

.gap-y-50 {
  row-gap: var(--size-50)
}

.gap-55 {
  gap: var(--size-55)
}

.gap-x-55 {
  -moz-column-gap: var(--size-55);
  column-gap: var(--size-55)
}

.gap-y-55 {
  row-gap: var(--size-55)
}

.gap-60 {
  gap: var(--size-60)
}

.gap-x-60 {
  -moz-column-gap: var(--size-60);
  column-gap: var(--size-60)
}

.gap-y-60 {
  row-gap: var(--size-60)
}

.gap-65 {
  gap: var(--size-65)
}

.gap-x-65 {
  -moz-column-gap: var(--size-65);
  column-gap: var(--size-65)
}

.gap-y-65 {
  row-gap: var(--size-65)
}

.gap-70 {
  gap: var(--size-70)
}

.gap-x-70 {
  -moz-column-gap: var(--size-70);
  column-gap: var(--size-70)
}

.gap-y-70 {
  row-gap: var(--size-70)
}

.gap-75 {
  gap: var(--size-75)
}

.gap-x-75 {
  -moz-column-gap: var(--size-75);
  column-gap: var(--size-75)
}

.gap-y-75 {
  row-gap: var(--size-75)
}

.gap-80 {
  gap: var(--size-80)
}

.gap-x-80 {
  -moz-column-gap: var(--size-80);
  column-gap: var(--size-80)
}

.gap-y-80 {
  row-gap: var(--size-80)
}

.gap-85 {
  gap: var(--size-85)
}

.gap-x-85 {
  -moz-column-gap: var(--size-85);
  column-gap: var(--size-85)
}

.gap-y-85 {
  row-gap: var(--size-85)
}

.gap-90 {
  gap: var(--size-90)
}

.gap-x-90 {
  -moz-column-gap: var(--size-90);
  column-gap: var(--size-90)
}

.gap-y-90 {
  row-gap: var(--size-90)
}

.gap-95 {
  gap: var(--size-95)
}

.gap-x-95 {
  -moz-column-gap: var(--size-95);
  column-gap: var(--size-95)
}

.gap-y-95 {
  row-gap: var(--size-95)
}

.gap-100 {
  gap: var(--size-100)
}

.gap-x-100 {
  -moz-column-gap: var(--size-100);
  column-gap: var(--size-100)
}

.gap-y-100 {
  row-gap: var(--size-100)
}

.text-xl {
  font-size: var(--text-xl)
}

.text-lg {
  font-size: var(--text-lg)
}

.text-md {
  font-size: var(--text-md)
}

.text-sm {
  font-size: var(--text-sm)
}

.text-xs {
  font-size: var(--text-xs)
}

.lh-120 {
  line-height: 1.2
}

.lh-150 {
  line-height: 1.5
}

.text-start {
  text-align: left
}

.text-end {
  text-align: right
}

.text-center {
  text-align: center
}

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

.text-decoration-thick {
  text-decoration-thickness: 1px;
  text-underline-offset: 1px
}

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

.text-decoration-line-through {
  text-decoration: line-through
}

.text-decoration-hover a:hover,
.text-decoration-hover:hover {
  text-decoration: none
}

.text-lowercase {
  text-transform: lowercase
}

.text-uppercase {
  text-transform: uppercase
}

.text-capitalize {
  text-transform: capitalize
}

.text-wrap {
  white-space: normal
}

.text-nowrap {
  white-space: nowrap
}

.fst-italic {
  font-style: italic
}

.fst-normal {
  font-style: normal
}

.fw-light {
  font-weight: 300
}

.fw-lighter {
  font-weight: lighter
}

.fw-normal {
  font-weight: 400
}

.fw-500 {
  font-weight: 500
}

.fw-semibold {
  font-weight: 600
}

.fw-bold,
b,
strong {
  font-weight: 700
}

.fw-bolder {
  font-weight: bolder
}

.strike {
  text-decoration: line-through;
  text-decoration-color: red;
  text-decoration-thickness: 2px
}

.bg-main {
  background-color: var(--main)
}

.bg-white {
  background-color: var(--white)
}

.bg-yellow {
  background-color: var(--yellow)
}

.bg-orange {
  background-color: var(--orange)
}

.bg-braun {
  background-color: var(--braun)
}

.bg-purple {
  background-color: var(--purple)
}

.bg-green {
  background-color: var(--green)
}

.bg-red {
  background-color: var(--red)
}

.bg-blue {
  background-color: var(--blue)
}

.bg-blue-light {
  background-color: var(--blue-light)
}

.bg-blue-lights {
  background-color: var(--blue-lights)
}

.bg-grey {
  background-color: var(--grey)
}

.bg-grey-light {
  background-color: var(--grey-light)
}

.bg-black {
  background-color: var(--black)
}

.col-main {
  color: var(--main)
}

.col-white {
  color: var(--white)
}

.col-yellow {
  color: var(--yellow)
}

.col-orange {
  color: var(--orange)
}

.col-braun {
  color: var(--braun)
}

.col-purple {
  color: var(--purple)
}

.col-green {
  color: var(--green)
}

.col-red {
  color: var(--red)
}

.col-blue {
  color: var(--blue)
}

.col-grey {
  color: var(--grey)
}

.col-grey-light {
  color: var(--grey-light)
}

.col-black {
  color: var(--black)
}

.col-inherit {
  color: inherit
}

.position-static {
  position: static
}

.position-relative {
  position: relative
}

.position-absolute {
  position: absolute
}

.position-fixed {
  position: fixed
}

.position-sticky {
  position: sticky
}

.fixed-top {
  top: 0
}

.fixed-bottom,
.fixed-top {
  left: 0;
  position: fixed;
  right: 0;
  z-index: 1020
}

.fixed-bottom {
  bottom: 0
}

.sticky-top {
  position: sticky;
  top: -1px;
  z-index: 20
}

.sticky-bottom {
  bottom: 0;
  position: sticky;
  z-index: 1020
}

.position-center {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%)
}

.zi1 {
  z-index: 1
}

.zi2 {
  z-index: 2
}

.zi3 {
  z-index: 3
}

.zi4 {
  z-index: 4
}

.zi5 {
  z-index: 5
}

.zi-1 {
  z-index: -1
}

.link-position {
  inset: 0
}

.inset:before {
  content: "";
  height: 100%;
  inset: 0;
  position: absolute;
  width: 100%;
  z-index: -1
}

.rounded-full {
  border-radius: 50%
}

.rounded-5 {
  border-radius: var(--size-5)
}

.rounded-10 {
  border-radius: var(--size-10)
}

.rounded-15 {
  border-radius: var(--size-15)
}

.rounded-20 {
  border-radius: var(--size-20)
}

.rounded-25 {
  border-radius: var(--size-25)
}

.rounded-30 {
  border-radius: var(--size-30)
}

.inner-radius {
  --outer-radius: 1em;
  --padding: 0.5em;
  --inner-radius: calc(var(--outer-radius) - var(--padding))
}

.list-unstyled {
  list-style: none;
  padding-left: 0
}

.overflow-hidden {
  overflow: hidden
}

.overflow-y-auto {
  overflow-y: auto
}

.overflow-x-auto {
  overflow-x: auto
}

.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  border: 0;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  clip: rect(0 0 0 0);
  clip-path: inset(100%)
}

.sr-only {
  white-space: nowrap !important
}

.screen-reader-text,
.sr-only {
  border: 0 !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  clip-path: inset(50%) !important;
  word-wrap: normal !important
}

.hidden-box {
  display: none
}

.cursor-pointer {
  cursor: pointer
}

.pointer-events {
  pointer-events: none
}

.scroll-snap {
  --gap: 1rem;
  display: grid;
  grid-gap: var(--gap);
  grid-auto-columns: 30%;
  grid-auto-flow: column;
  overflow-x: scroll;
  scroll-padding: var(--gap);
  scroll-snap-type: x mandatory
}

.scroll-snap>* {
  scroll-snap-align: start
}

.img-fluid {
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: 50%;
  object-position: 50%;
  width: 100%
}

.transition-duration {
  transition-duration: var(--transition-duration)
}

.transition-timing-function {
  transition-timing-function: var(--transition-timing-function)
}

.transition-color-bg {
  transition-property: color, background-color
}

.trans {
  transition: all var(--transition-duration) var(--transition-timing-function)
}

.child {
  background-color: violet;
  padding: 1rem
}

.box-logo {
  color: var(--blue) !important;
  font-weight: 700;
  text-underline-offset: 5px;
  text-transform: uppercase;
  font-size: 30px;
}

/* start media */

@media (min-width:32rem) {
  .text-uppercase\@xs {
    text-transform: uppercase
  }

  .text-capitalize\@xs {
    text-transform: capitalize
  }

  .text-wrap\@xs {
    white-space: normal
  }

  .text-nowrap\@xs {
    white-space: nowrap
  }

  .w-auto\@xs {
    width: auto
  }

  .w-100\@xs {
    width: 100%
  }

  .h-100\@xs {
    height: 100%
  }

  .d-block\@xs {
    display: block
  }

  .d-none\@xs {
    display: none
  }

  .d-inline\@xs {
    display: inline
  }

  .d-inline-block\@xs {
    display: inline-block
  }

  .d-grid\@xs {
    display: grid
  }

  .d-flex\@xs {
    display: flex
  }

  .d-flex-center\@xs {
    align-items: center;
    display: flex;
    justify-content: center
  }

  .d-inline-flex\@xs {
    display: inline-flex
  }

  .d-inline-flex-center\@xs {
    align-items: center;
    display: inline-flex;
    justify-content: center
  }

  .position-absolute\@xs {
    position: absolute
  }

  .sticky-top\@xs {
    position: sticky;
    top: 0;
    z-index: 5
  }

  .text-center\@xs {
    text-align: center
  }

  .text-start\@xs {
    text-align: left
  }

  .text-end\@xs {
    text-align: right
  }

  .flex-fill\@xs {
    flex: 1 1 auto
  }

  .flex-row\@xs {
    flex-direction: row
  }

  .flex-column\@xs {
    flex-direction: column
  }

  .flex-row-reverse\@xs {
    flex-direction: row-reverse
  }

  .flex-column-reverse\@xs {
    flex-direction: column-reverse
  }

  .flex-grow-0\@xs {
    flex-grow: 0
  }

  .flex-grow-1\@xs {
    flex-grow: 1
  }

  .flex-shrink-0\@xs {
    flex-shrink: 0
  }

  .flex-shrink-1\@xs {
    flex-shrink: 1
  }

  .flex-wrap\@xs {
    flex-wrap: wrap
  }

  .flex-nowrap\@xs {
    flex-wrap: nowrap
  }

  .flex-wrap-reverse\@xs {
    flex-wrap: wrap-reverse
  }

  .justify-content-start\@xs {
    justify-content: flex-start
  }

  .justify-content-end\@xs {
    justify-content: flex-end
  }

  .justify-content-center\@xs {
    justify-content: center
  }

  .justify-content-between\@xs {
    justify-content: space-between
  }

  .justify-content-around\@xs {
    justify-content: space-around
  }

  .justify-content-evenly\@xs {
    justify-content: space-evenly
  }

  .align-items-start\@xs {
    align-items: flex-start
  }

  .align-items-end\@xs {
    align-items: flex-end
  }

  .align-items-center\@xs {
    align-items: center
  }

  .align-items-baseline\@xs {
    align-items: baseline
  }

  .align-items-stretch\@xs {
    align-items: stretch
  }

  .align-content-start\@xs {
    align-content: flex-start
  }

  .align-content-end\@xs {
    align-content: flex-end
  }

  .align-content-center\@xs {
    align-content: center
  }

  .align-content-between\@xs {
    align-content: space-between
  }

  .align-content-around\@xs {
    align-content: space-around
  }

  .align-content-stretch\@xs {
    align-content: stretch
  }

  .align-self-auto\@xs {
    align-self: auto
  }

  .align-self-start\@xs {
    align-self: flex-start
  }

  .align-self-end\@xs {
    align-self: flex-end
  }

  .align-self-center\@xs {
    align-self: center
  }

  .align-self-baseline\@xs {
    align-self: baseline
  }

  .align-self-stretch\@xs {
    align-self: stretch
  }

  .order-1\@xs {
    order: 1
  }

  .order-2\@xs {
    order: 2
  }

  .order-3\@xs {
    order: 3
  }

  .order-4\@xs {
    order: 4
  }

  .order-5\@xs {
    order: 5
  }

  .order-last\@xs {
    order: 6
  }

  .order-first\@xs {
    order: -1
  }

  .grid-auto-xs\@xs {
    --col-min-width: 8rem
  }

  .grid-auto-sm\@xs {
    --col-min-width: 10rem
  }

  .grid-auto-md\@xs {
    --col-min-width: 15rem
  }

  .grid-auto-lg\@xs {
    --col-min-width: 20rem
  }

  .grid-auto-xl\@xs {
    --col-min-width: 25rem
  }

  .grid-auto-cols\@xs {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr))
  }

  .col-1\@xs {
    --span: 1
  }

  .col-start-1\@xs {
    grid-column-start: 1
  }

  .col-end-2\@xs {
    grid-column-end: 2
  }

  .row-1\@xs {
    grid-row: span 1/span 1
  }

  .row-start-1\@xs {
    grid-row-start: 1
  }

  .row-end-2\@xs {
    grid-row-end: 2
  }

  .col-2\@xs {
    --span: 2
  }

  .col-start-2\@xs {
    grid-column-start: 2
  }

  .col-end-3\@xs {
    grid-column-end: 3
  }

  .row-2\@xs {
    grid-row: span 2/span 2
  }

  .row-start-2\@xs {
    grid-row-start: 2
  }

  .row-end-3\@xs {
    grid-row-end: 3
  }

  .col-3\@xs {
    --span: 3
  }

  .col-start-3\@xs {
    grid-column-start: 3
  }

  .col-end-4\@xs {
    grid-column-end: 4
  }

  .row-3\@xs {
    grid-row: span 3/span 3
  }

  .row-start-3\@xs {
    grid-row-start: 3
  }

  .row-end-4\@xs {
    grid-row-end: 4
  }

  .col-4\@xs {
    --span: 4
  }

  .col-start-4\@xs {
    grid-column-start: 4
  }

  .col-end-5\@xs {
    grid-column-end: 5
  }

  .row-4\@xs {
    grid-row: span 4/span 4
  }

  .row-start-4\@xs {
    grid-row-start: 4
  }

  .row-end-5\@xs {
    grid-row-end: 5
  }

  .col-5\@xs {
    --span: 5
  }

  .col-start-5\@xs {
    grid-column-start: 5
  }

  .col-end-6\@xs {
    grid-column-end: 6
  }

  .row-5\@xs {
    grid-row: span 5/span 5
  }

  .row-start-5\@xs {
    grid-row-start: 5
  }

  .row-end-6\@xs {
    grid-row-end: 6
  }

  .col-6\@xs {
    --span: 6
  }

  .col-start-6\@xs {
    grid-column-start: 6
  }

  .col-end-7\@xs {
    grid-column-end: 7
  }

  .row-6\@xs {
    grid-row: span 6/span 6
  }

  .row-start-6\@xs {
    grid-row-start: 6
  }

  .row-end-7\@xs {
    grid-row-end: 7
  }

  .col-7\@xs {
    --span: 7
  }

  .col-start-7\@xs {
    grid-column-start: 7
  }

  .col-end-8\@xs {
    grid-column-end: 8
  }

  .row-7\@xs {
    grid-row: span 7/span 7
  }

  .row-start-7\@xs {
    grid-row-start: 7
  }

  .row-end-8\@xs {
    grid-row-end: 8
  }

  .col-8\@xs {
    --span: 8
  }

  .col-start-8\@xs {
    grid-column-start: 8
  }

  .col-end-9\@xs {
    grid-column-end: 9
  }

  .row-8\@xs {
    grid-row: span 8/span 8
  }

  .row-start-8\@xs {
    grid-row-start: 8
  }

  .row-end-9\@xs {
    grid-row-end: 9
  }

  .col-9\@xs {
    --span: 9
  }

  .col-start-9\@xs {
    grid-column-start: 9
  }

  .col-end-10\@xs {
    grid-column-end: 10
  }

  .row-9\@xs {
    grid-row: span 9/span 9
  }

  .row-start-9\@xs {
    grid-row-start: 9
  }

  .row-end-10\@xs {
    grid-row-end: 10
  }

  .col-10\@xs {
    --span: 10
  }

  .col-start-10\@xs {
    grid-column-start: 10
  }

  .col-end-11\@xs {
    grid-column-end: 11
  }

  .row-10\@xs {
    grid-row: span 10/span 10
  }

  .row-start-10\@xs {
    grid-row-start: 10
  }

  .row-end-11\@xs {
    grid-row-end: 11
  }

  .col-11\@xs {
    --span: 11
  }

  .col-start-11\@xs {
    grid-column-start: 11
  }

  .col-end-12\@xs {
    grid-column-end: 12
  }

  .row-11\@xs {
    grid-row: span 11/span 11
  }

  .row-start-11\@xs {
    grid-row-start: 11
  }

  .row-end-12\@xs {
    grid-row-end: 12
  }

  .col-12\@xs {
    --span: 12
  }

  .col-start-12\@xs {
    grid-column-start: 12
  }

  .col-end-13\@xs {
    grid-column-end: 13
  }

  .row-12\@xs {
    grid-row: span 12/span 12
  }

  .row-start-12\@xs {
    grid-row-start: 12
  }

  .row-end-13\@xs {
    grid-row-end: 13
  }

  .col-start\@xs {
    grid-column-start: 1
  }

  .col-end\@xs {
    grid-column-end: -1
  }

  .row-start\@xs {
    grid-row-start: 1
  }

  .row-end\@xs {
    grid-row-end: -1
  }

  .col-start-auto\@xs {
    grid-column-start: auto
  }

  .col-end-auto\@xs {
    grid-column-end: auto
  }

  .row-start-auto\@xs {
    grid-row-start: auto
  }

  .row-end-auto\@xs {
    grid-row-end: auto
  }

  .grid-cols-1\@xs {
    grid-template-columns: repeat(1, minmax(0, 1fr))
  }

  .grid-cols-2\@xs {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .grid-cols-3\@xs {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }

  .grid-cols-4\@xs {
    grid-template-columns: repeat(4, minmax(0, 1fr))
  }

  .grid-cols-5\@xs {
    grid-template-columns: repeat(5, minmax(0, 1fr))
  }

  .grid-cols-6\@xs {
    grid-template-columns: repeat(6, minmax(0, 1fr))
  }

  .grid-cols-7\@xs {
    grid-template-columns: repeat(7, minmax(0, 1fr))
  }

  .grid-cols-8\@xs {
    grid-template-columns: repeat(8, minmax(0, 1fr))
  }

  .grid-cols-9\@xs {
    grid-template-columns: repeat(9, minmax(0, 1fr))
  }

  .grid-cols-10\@xs {
    grid-template-columns: repeat(10, minmax(0, 1fr))
  }

  .grid-cols-11\@xs {
    grid-template-columns: repeat(11, minmax(0, 1fr))
  }

  .grid-cols-12\@xs {
    grid-template-columns: repeat(12, minmax(0, 1fr))
  }

  .grid-cols-none\@xs {
    grid-template-columns: none
  }

  .col-auto\@xs {
    grid-column: auto
  }

  .col-span-1\@xs {
    grid-column: span 1/span 1
  }

  .col-span-2\@xs {
    grid-column: span 2/span 2
  }

  .col-span-3\@xs {
    grid-column: span 3/span 3
  }

  .col-span-4\@xs {
    grid-column: span 4/span 4
  }

  .col-span-5\@xs {
    grid-column: span 5/span 5
  }

  .col-span-6\@xs {
    grid-column: span 6/span 6
  }

  .col-span-7\@xs {
    grid-column: span 7/span 7
  }

  .col-span-8\@xs {
    grid-column: span 8/span 8
  }

  .col-span-9\@xs {
    grid-column: span 9/span 9
  }

  .col-span-10\@xs {
    grid-column: span 10/span 10
  }

  .col-span-11\@xs {
    grid-column: span 11/span 11
  }

  .col-span-12\@xs {
    grid-column: span 12/span 12
  }

  .col-span-full\@xs {
    grid-column: 1/-1
  }

  .grid-rows-1\@xs {
    grid-template-rows: repeat(1, minmax(0, 1fr))
  }

  .grid-rows-2\@xs {
    grid-template-rows: repeat(2, minmax(0, 1fr))
  }

  .grid-rows-3\@xs {
    grid-template-rows: repeat(3, minmax(0, 1fr))
  }

  .grid-rows-4\@xs {
    grid-template-rows: repeat(4, minmax(0, 1fr))
  }

  .grid-rows-5\@xs {
    grid-template-rows: repeat(5, minmax(0, 1fr))
  }

  .grid-rows-6\@xs {
    grid-template-rows: repeat(6, minmax(0, 1fr))
  }

  .grid-rows-7\@xs {
    grid-template-rows: repeat(7, minmax(0, 1fr))
  }

  .grid-rows-8\@xs {
    grid-template-rows: repeat(8, minmax(0, 1fr))
  }

  .grid-rows-9\@xs {
    grid-template-rows: repeat(9, minmax(0, 1fr))
  }

  .grid-rows-10\@xs {
    grid-template-rows: repeat(10, minmax(0, 1fr))
  }

  .grid-rows-11\@xs {
    grid-template-rows: repeat(11, minmax(0, 1fr))
  }

  .grid-rows-12\@xs {
    grid-template-rows: repeat(12, minmax(0, 1fr))
  }

  .grid-rows-none\@xs {
    grid-template-rows: none
  }

  .row-auto\@xs {
    grid-row: auto
  }

  .row-span-1\@xs {
    grid-row: span 1/span 1
  }

  .row-span-2\@xs {
    grid-row: span 2/span 2
  }

  .row-span-3\@xs {
    grid-row: span 3/span 3
  }

  .row-span-4\@xs {
    grid-row: span 4/span 4
  }

  .row-span-5\@xs {
    grid-row: span 5/span 5
  }

  .row-span-6\@xs {
    grid-row: span 6/span 6
  }

  .row-span-7\@xs {
    grid-row: span 7/span 7
  }

  .row-span-8\@xs {
    grid-row: span 8/span 8
  }

  .row-span-9\@xs {
    grid-row: span 9/span 9
  }

  .row-span-10\@xs {
    grid-row: span 10/span 10
  }

  .row-span-11\@xs {
    grid-row: span 11/span 11
  }

  .row-span-12\@xs {
    grid-row: span 12/span 12
  }

  .row-span-full\@xs {
    grid-row: 1/-1
  }

  .gap-5\@xs {
    gap: var(--size-5)
  }

  .gap-10\@xs {
    gap: var(--size-10)
  }

  .gap-15\@xs {
    gap: var(--size-15)
  }

  .gap-16\@xs {
    gap: var(--size-16)
  }

  .gap-20\@xs {
    gap: var(--size-20)
  }

  .gap-25\@xs {
    gap: var(--size-25)
  }

  .gap-30\@xs {
    gap: var(--size-30)
  }

  .gap-35\@xs {
    gap: var(--size-35)
  }

  .gap-40\@xs {
    gap: var(--size-40)
  }

  .gap-45\@xs {
    gap: var(--size-45)
  }

  .gap-50\@xs {
    gap: var(--size-50)
  }

  .gap-55\@xs {
    gap: var(--size-55)
  }

  .gap-60\@xs {
    gap: var(--size-60)
  }

  .gap-65\@xs {
    gap: var(--size-65)
  }

  .gap-70\@xs {
    gap: var(--size-70)
  }

  .gap-75\@xs {
    gap: var(--size-75)
  }

  .gap-80\@xs {
    gap: var(--size-80)
  }

  .gap-85\@xs {
    gap: var(--size-85)
  }

  .gap-90\@xs {
    gap: var(--size-90)
  }

  .gap-95\@xs {
    gap: var(--size-95)
  }

  .gap-100\@xs {
    gap: var(--size-100)
  }

  .gap-x-5\@xs {
    -moz-column-gap: var(--size-5);
    column-gap: var(--size-5)
  }

  .gap-x-10\@xs {
    -moz-column-gap: var(--size-10);
    column-gap: var(--size-10)
  }

  .gap-x-15\@xs {
    -moz-column-gap: var(--size-15);
    column-gap: var(--size-15)
  }

  .gap-x-16\@xs {
    -moz-column-gap: var(--size-16);
    column-gap: var(--size-16)
  }

  .gap-x-20\@xs {
    -moz-column-gap: var(--size-20);
    column-gap: var(--size-20)
  }

  .gap-x-25\@xs {
    -moz-column-gap: var(--size-25);
    column-gap: var(--size-25)
  }

  .gap-x-30\@xs {
    -moz-column-gap: var(--size-30);
    column-gap: var(--size-30)
  }

  .gap-x-35\@xs {
    -moz-column-gap: var(--size-35);
    column-gap: var(--size-35)
  }

  .gap-x-40\@xs {
    -moz-column-gap: var(--size-40);
    column-gap: var(--size-40)
  }

  .gap-x-45\@xs {
    -moz-column-gap: var(--size-45);
    column-gap: var(--size-45)
  }

  .gap-x-50\@xs {
    -moz-column-gap: var(--size-50);
    column-gap: var(--size-50)
  }

  .gap-x-55\@xs {
    -moz-column-gap: var(--size-55);
    column-gap: var(--size-55)
  }

  .gap-x-60\@xs {
    -moz-column-gap: var(--size-60);
    column-gap: var(--size-60)
  }

  .gap-x-65\@xs {
    -moz-column-gap: var(--size-65);
    column-gap: var(--size-65)
  }

  .gap-x-70\@xs {
    -moz-column-gap: var(--size-70);
    column-gap: var(--size-70)
  }

  .gap-x-75\@xs {
    -moz-column-gap: var(--size-75);
    column-gap: var(--size-75)
  }

  .gap-x-80\@xs {
    -moz-column-gap: var(--size-80);
    column-gap: var(--size-80)
  }

  .gap-x-85\@xs {
    -moz-column-gap: var(--size-85);
    column-gap: var(--size-85)
  }

  .gap-x-90\@xs {
    -moz-column-gap: var(--size-90);
    column-gap: var(--size-90)
  }

  .gap-x-95\@xs {
    -moz-column-gap: var(--size-95);
    column-gap: var(--size-95)
  }

  .gap-x-100\@xs {
    -moz-column-gap: var(--size-100);
    column-gap: var(--size-100)
  }

  .gap-y-5\@xs {
    row-gap: var(--size-5)
  }

  .gap-y-10\@xs {
    row-gap: var(--size-10)
  }

  .gap-y-15\@xs {
    row-gap: var(--size-15)
  }

  .gap-y-16\@xs {
    row-gap: var(--size-16)
  }

  .gap-y-20\@xs {
    row-gap: var(--size-20)
  }

  .gap-y-25\@xs {
    row-gap: var(--size-25)
  }

  .gap-y-30\@xs {
    row-gap: var(--size-30)
  }

  .gap-y-35\@xs {
    row-gap: var(--size-35)
  }

  .gap-y-40\@xs {
    row-gap: var(--size-40)
  }

  .gap-y-45\@xs {
    row-gap: var(--size-45)
  }

  .gap-y-50\@xs {
    row-gap: var(--size-50)
  }

  .gap-y-55\@xs {
    row-gap: var(--size-55)
  }

  .gap-y-60\@xs {
    row-gap: var(--size-60)
  }

  .gap-y-65\@xs {
    row-gap: var(--size-65)
  }

  .gap-y-70\@xs {
    row-gap: var(--size-70)
  }

  .gap-y-75\@xs {
    row-gap: var(--size-75)
  }

  .gap-y-80\@xs {
    row-gap: var(--size-80)
  }

  .gap-y-85\@xs {
    row-gap: var(--size-85)
  }

  .gap-y-90\@xs {
    row-gap: var(--size-90)
  }

  .gap-y-95\@xs {
    row-gap: var(--size-95)
  }

  .gap-y-100\@xs {
    row-gap: var(--size-100)
  }

  .m-auto\@xs {
    margin: auto
  }

  .mx-auto\@xs {
    margin-left: auto;
    margin-right: auto
  }

  .mt-auto\@xs {
    margin-top: auto
  }

  .me-auto\@xs {
    margin-right: auto
  }

  .ms-auto\@xs {
    margin-left: auto
  }

  .mt-0\@xs {
    margin-top: 0
  }

  .mt-10\@xs {
    margin-top: var(--size-10)
  }

  .mt-15\@xs {
    margin-top: var(--size-15)
  }

  .mt-16\@xs {
    margin-top: var(--size-16)
  }

  .mt-20\@xs {
    margin-top: var(--size-20)
  }

  .mt-30\@xs {
    margin-top: var(--size-30)
  }

  .mt-40\@xs {
    margin-top: var(--size-40)
  }

  .mt-50\@xs {
    margin-top: var(--size-50)
  }

  .mt-60\@xs {
    margin-top: var(--size-60)
  }

  .mt-70\@xs {
    margin-top: var(--size-70)
  }

  .mt-80\@xs {
    margin-top: var(--size-80)
  }

  .mt-90\@xs {
    margin-top: var(--size-90)
  }

  .mt-100\@xs {
    margin-top: var(--size-100)
  }

  .mb-0\@xs {
    margin-bottom: 0
  }

  .mb-10\@xs {
    margin-bottom: var(--size-10)
  }

  .mb-15\@xs {
    margin-bottom: var(--size-15)
  }

  .mb-16\@xs {
    margin-bottom: var(--size-16)
  }

  .mb-20\@xs {
    margin-bottom: var(--size-20)
  }

  .mb-30\@xs {
    margin-bottom: var(--size-30)
  }

  .mb-40\@xs {
    margin-bottom: var(--size-40)
  }

  .mb-50\@xs {
    margin-bottom: var(--size-50)
  }

  .mb-60\@xs {
    margin-bottom: var(--size-60)
  }

  .mb-70\@xs {
    margin-bottom: var(--size-70)
  }

  .mb-80\@xs {
    margin-bottom: var(--size-80)
  }

  .mb-90\@xs {
    margin-bottom: var(--size-90)
  }

  .mb-100\@xs {
    margin-bottom: var(--size-100)
  }

  .m-0\@xs {
    margin: 0
  }

  .p-10\@xs {
    padding: var(--size-10)
  }

  .p-15\@xs {
    padding: var(--size-15)
  }

  .p-16\@xs {
    padding: var(--size-16)
  }

  .p-20\@xs {
    padding: var(--size-20)
  }

  .p-30\@xs {
    padding: var(--size-30)
  }

  .p-40\@xs {
    padding: var(--size-40)
  }

  .p-50\@xs {
    padding: var(--size-50)
  }

  .py-0\@xs {
    padding-bottom: 0;
    padding-top: 0
  }

  .py-10\@xs {
    padding-bottom: var(--size-10);
    padding-top: var(--size-10)
  }

  .py-15\@xs {
    padding-bottom: var(--size-15);
    padding-top: var(--size-15)
  }

  .py-16\@xs {
    padding-bottom: var(--size-16);
    padding-top: var(--size-16)
  }

  .py-20\@xs {
    padding-bottom: var(--size-20);
    padding-top: var(--size-20)
  }

  .py-30\@xs {
    padding-bottom: var(--size-30);
    padding-top: var(--size-30)
  }

  .py-40\@xs {
    padding-bottom: var(--size-40);
    padding-top: var(--size-40)
  }

  .py-50\@xs {
    padding-bottom: var(--size-50);
    padding-top: var(--size-50)
  }

  .px-0\@xs {
    padding-left: 0;
    padding-right: 0
  }

  .px-10\@xs {
    padding-left: var(--size-10);
    padding-right: var(--size-10)
  }

  .px-15\@xs {
    padding-left: var(--size-15);
    padding-right: var(--size-15)
  }

  .px-16\@xs {
    padding-left: var(--size-16);
    padding-right: var(--size-16)
  }

  .px-20\@xs {
    padding-left: var(--size-20);
    padding-right: var(--size-20)
  }

  .px-30\@xs {
    padding-left: var(--size-30);
    padding-right: var(--size-30)
  }

  .px-40\@xs {
    padding-left: var(--size-40);
    padding-right: var(--size-40)
  }

  .px-50\@xs {
    padding-left: var(--size-50);
    padding-right: var(--size-50)
  }

  .pt-0\@xs {
    padding-top: 0
  }

  .pt-10\@xs {
    padding-top: var(--size-10)
  }

  .pt-15\@xs {
    padding-top: var(--size-15)
  }

  .pt-16\@xs {
    padding-top: var(--size-16)
  }

  .pt-20\@xs {
    padding-top: var(--size-20)
  }

  .pt-30\@xs {
    padding-top: var(--size-30)
  }

  .pt-40\@xs {
    padding-top: var(--size-40)
  }

  .pt-50\@xs {
    padding-top: var(--size-50)
  }

  .pt-60\@xs {
    padding-top: var(--size-60)
  }

  .pt-70\@xs {
    padding-top: var(--size-70)
  }

  .pt-80\@xs {
    padding-top: var(--size-80)
  }

  .pt-90\@xs {
    padding-top: var(--size-90)
  }

  .pt-100\@xs {
    padding-top: var(--size-100)
  }

  .pb-0\@xs {
    padding-bottom: 0
  }

  .pb-10\@xs {
    padding-bottom: var(--size-10)
  }

  .pb-15\@xs {
    padding-bottom: var(--size-15)
  }

  .pb-16\@xs {
    padding-bottom: var(--size-16)
  }

  .pb-20\@xs {
    padding-bottom: var(--size-20)
  }

  .pb-30\@xs {
    padding-bottom: var(--size-30)
  }

  .pb-40\@xs {
    padding-bottom: var(--size-40)
  }

  .pb-50\@xs {
    padding-bottom: var(--size-50)
  }

  .pb-60\@xs {
    padding-bottom: var(--size-60)
  }

  .pb-70\@xs {
    padding-bottom: var(--size-70)
  }

  .pb-80\@xs {
    padding-bottom: var(--size-80)
  }

  .pb-90\@xs {
    padding-bottom: var(--size-90)
  }

  .pb-100\@xs {
    padding-bottom: var(--size-100)
  }

  .h1\@xs {
    font-size: var(--h1-size)
  }

  .h2\@xs {
    font-size: var(--h2-size)
  }

  .h3\@xs {
    font-size: var(--h3-size)
  }

  .h4\@xs {
    font-size: var(--h4-size)
  }

  .h5\@xs {
    font-size: var(--h5-size)
  }

  .h6\@xs {
    font-size: var(--h6-size)
  }

  .text-xl\@xs {
    font-size: var(--text-xl)
  }

  .text-lg\@xs {
    font-size: var(--text-lg)
  }

  .text-md\@xs {
    font-size: var(--text-md)
  }

  .text-sm\@xs {
    font-size: var(--text-sm)
  }

  .text-xs\@xs {
    font-size: var(--text-xs)
  }

  .rounded-circle\@xs {
    border-radius: 50%
  }

  .rounded-5\@xs {
    border-radius: 5px
  }

  .rounded-10\@xs {
    border-radius: 10px
  }

  .rounded-15\@xs {
    border-radius: 15px
  }

  .rounded-20\@xs {
    border-radius: 20px
  }

  .rounded-25\@xs {
    border-radius: 25px
  }

  .rounded-30\@xs {
    border-radius: 30px
  }
}

@media (min-width:48rem) {
  .text-uppercase\@sm {
    text-transform: uppercase
  }

  .text-capitalize\@sm {
    text-transform: capitalize
  }

  .text-wrap\@sm {
    white-space: normal
  }

  .text-nowrap\@sm {
    white-space: nowrap
  }

  .w-auto\@sm {
    width: auto
  }

  .w-100\@sm {
    width: 100%
  }

  .h-100\@sm {
    height: 100%
  }

  .d-block\@sm {
    display: block
  }

  .d-none\@sm {
    display: none
  }

  .d-inline\@sm {
    display: inline
  }

  .d-inline-block\@sm {
    display: inline-block
  }

  .d-grid\@sm {
    display: grid
  }

  .d-flex\@sm {
    display: flex
  }

  .d-flex-center\@sm {
    align-items: center;
    display: flex;
    justify-content: center
  }

  .d-inline-flex\@sm {
    display: inline-flex
  }

  .d-inline-flex-center\@sm {
    align-items: center;
    display: inline-flex;
    justify-content: center
  }

  .position-absolute\@sm {
    position: absolute
  }

  .sticky-top\@sm {
    position: sticky;
    top: 0;
    z-index: 5
  }

  .text-center\@sm {
    text-align: center
  }

  .text-start\@sm {
    text-align: left
  }

  .text-end\@sm {
    text-align: right
  }

  .flex-fill\@sm {
    flex: 1 1 auto
  }

  .flex-row\@sm {
    flex-direction: row
  }

  .flex-column\@sm {
    flex-direction: column
  }

  .flex-row-reverse\@sm {
    flex-direction: row-reverse
  }

  .flex-column-reverse\@sm {
    flex-direction: column-reverse
  }

  .flex-grow-0\@sm {
    flex-grow: 0
  }

  .flex-grow-1\@sm {
    flex-grow: 1
  }

  .flex-shrink-0\@sm {
    flex-shrink: 0
  }

  .flex-shrink-1\@sm {
    flex-shrink: 1
  }

  .flex-wrap\@sm {
    flex-wrap: wrap
  }

  .flex-nowrap\@sm {
    flex-wrap: nowrap
  }

  .flex-wrap-reverse\@sm {
    flex-wrap: wrap-reverse
  }

  .justify-content-start\@sm {
    justify-content: flex-start
  }

  .justify-content-end\@sm {
    justify-content: flex-end
  }

  .justify-content-center\@sm {
    justify-content: center
  }

  .justify-content-between\@sm {
    justify-content: space-between
  }

  .justify-content-around\@sm {
    justify-content: space-around
  }

  .justify-content-evenly\@sm {
    justify-content: space-evenly
  }

  .align-items-start\@sm {
    align-items: flex-start
  }

  .align-items-end\@sm {
    align-items: flex-end
  }

  .align-items-center\@sm {
    align-items: center
  }

  .align-items-baseline\@sm {
    align-items: baseline
  }

  .align-items-stretch\@sm {
    align-items: stretch
  }

  .align-content-start\@sm {
    align-content: flex-start
  }

  .align-content-end\@sm {
    align-content: flex-end
  }

  .align-content-center\@sm {
    align-content: center
  }

  .align-content-between\@sm {
    align-content: space-between
  }

  .align-content-around\@sm {
    align-content: space-around
  }

  .align-content-stretch\@sm {
    align-content: stretch
  }

  .align-self-auto\@sm {
    align-self: auto
  }

  .align-self-start\@sm {
    align-self: flex-start
  }

  .align-self-end\@sm {
    align-self: flex-end
  }

  .align-self-center\@sm {
    align-self: center
  }

  .align-self-baseline\@sm {
    align-self: baseline
  }

  .align-self-stretch\@sm {
    align-self: stretch
  }

  .order-1\@sm {
    order: 1
  }

  .order-2\@sm {
    order: 2
  }

  .order-3\@sm {
    order: 3
  }

  .order-4\@sm {
    order: 4
  }

  .order-5\@sm {
    order: 5
  }

  .order-last\@sm {
    order: 6
  }

  .order-first\@sm {
    order: -1
  }

  .grid-auto-xs\@sm {
    --col-min-width: 8rem
  }

  .grid-auto-sm\@sm {
    --col-min-width: 10rem
  }

  .grid-auto-md\@sm {
    --col-min-width: 15rem
  }

  .grid-auto-lg\@sm {
    --col-min-width: 20rem
  }

  .grid-auto-xl\@sm {
    --col-min-width: 25rem
  }

  .grid-auto-cols\@sm {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr))
  }

  .col-1\@sm {
    --span: 1
  }

  .col-start-1\@sm {
    grid-column-start: 1
  }

  .col-end-2\@sm {
    grid-column-end: 2
  }

  .row-1\@sm {
    grid-row: span 1/span 1
  }

  .row-start-1\@sm {
    grid-row-start: 1
  }

  .row-end-2\@sm {
    grid-row-end: 2
  }

  .col-2\@sm {
    --span: 2
  }

  .col-start-2\@sm {
    grid-column-start: 2
  }

  .col-end-3\@sm {
    grid-column-end: 3
  }

  .row-2\@sm {
    grid-row: span 2/span 2
  }

  .row-start-2\@sm {
    grid-row-start: 2
  }

  .row-end-3\@sm {
    grid-row-end: 3
  }

  .col-3\@sm {
    --span: 3
  }

  .col-start-3\@sm {
    grid-column-start: 3
  }

  .col-end-4\@sm {
    grid-column-end: 4
  }

  .row-3\@sm {
    grid-row: span 3/span 3
  }

  .row-start-3\@sm {
    grid-row-start: 3
  }

  .row-end-4\@sm {
    grid-row-end: 4
  }

  .col-4\@sm {
    --span: 4
  }

  .col-start-4\@sm {
    grid-column-start: 4
  }

  .col-end-5\@sm {
    grid-column-end: 5
  }

  .row-4\@sm {
    grid-row: span 4/span 4
  }

  .row-start-4\@sm {
    grid-row-start: 4
  }

  .row-end-5\@sm {
    grid-row-end: 5
  }

  .col-5\@sm {
    --span: 5
  }

  .col-start-5\@sm {
    grid-column-start: 5
  }

  .col-end-6\@sm {
    grid-column-end: 6
  }

  .row-5\@sm {
    grid-row: span 5/span 5
  }

  .row-start-5\@sm {
    grid-row-start: 5
  }

  .row-end-6\@sm {
    grid-row-end: 6
  }

  .col-6\@sm {
    --span: 6
  }

  .col-start-6\@sm {
    grid-column-start: 6
  }

  .col-end-7\@sm {
    grid-column-end: 7
  }

  .row-6\@sm {
    grid-row: span 6/span 6
  }

  .row-start-6\@sm {
    grid-row-start: 6
  }

  .row-end-7\@sm {
    grid-row-end: 7
  }

  .col-7\@sm {
    --span: 7
  }

  .col-start-7\@sm {
    grid-column-start: 7
  }

  .col-end-8\@sm {
    grid-column-end: 8
  }

  .row-7\@sm {
    grid-row: span 7/span 7
  }

  .row-start-7\@sm {
    grid-row-start: 7
  }

  .row-end-8\@sm {
    grid-row-end: 8
  }

  .col-8\@sm {
    --span: 8
  }

  .col-start-8\@sm {
    grid-column-start: 8
  }

  .col-end-9\@sm {
    grid-column-end: 9
  }

  .row-8\@sm {
    grid-row: span 8/span 8
  }

  .row-start-8\@sm {
    grid-row-start: 8
  }

  .row-end-9\@sm {
    grid-row-end: 9
  }

  .col-9\@sm {
    --span: 9
  }

  .col-start-9\@sm {
    grid-column-start: 9
  }

  .col-end-10\@sm {
    grid-column-end: 10
  }

  .row-9\@sm {
    grid-row: span 9/span 9
  }

  .row-start-9\@sm {
    grid-row-start: 9
  }

  .row-end-10\@sm {
    grid-row-end: 10
  }

  .col-10\@sm {
    --span: 10
  }

  .col-start-10\@sm {
    grid-column-start: 10
  }

  .col-end-11\@sm {
    grid-column-end: 11
  }

  .row-10\@sm {
    grid-row: span 10/span 10
  }

  .row-start-10\@sm {
    grid-row-start: 10
  }

  .row-end-11\@sm {
    grid-row-end: 11
  }

  .col-11\@sm {
    --span: 11
  }

  .col-start-11\@sm {
    grid-column-start: 11
  }

  .col-end-12\@sm {
    grid-column-end: 12
  }

  .row-11\@sm {
    grid-row: span 11/span 11
  }

  .row-start-11\@sm {
    grid-row-start: 11
  }

  .row-end-12\@sm {
    grid-row-end: 12
  }

  .col-12\@sm {
    --span: 12
  }

  .col-start-12\@sm {
    grid-column-start: 12
  }

  .col-end-13\@sm {
    grid-column-end: 13
  }

  .row-12\@sm {
    grid-row: span 12/span 12
  }

  .row-start-12\@sm {
    grid-row-start: 12
  }

  .row-end-13\@sm {
    grid-row-end: 13
  }

  .col-start\@sm {
    grid-column-start: 1
  }

  .col-end\@sm {
    grid-column-end: -1
  }

  .row-start\@sm {
    grid-row-start: 1
  }

  .row-end\@sm {
    grid-row-end: 2
  }

  .col-start-auto\@sm {
    grid-column-start: auto
  }

  .col-end-auto\@sm {
    grid-column-end: auto
  }

  .row-start-auto\@sm {
    grid-row-start: auto
  }

  .row-end-auto\@sm {
    grid-row-end: auto
  }

  .grid-cols-1\@sm {
    grid-template-columns: repeat(1, minmax(0, 1fr))
  }

  .grid-cols-2\@sm {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .grid-cols-3\@sm {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }

  .grid-cols-4\@sm {
    grid-template-columns: repeat(4, minmax(0, 1fr))
  }

  .grid-cols-5\@sm {
    grid-template-columns: repeat(5, minmax(0, 1fr))
  }

  .grid-cols-6\@sm {
    grid-template-columns: repeat(6, minmax(0, 1fr))
  }

  .grid-cols-7\@sm {
    grid-template-columns: repeat(7, minmax(0, 1fr))
  }

  .grid-cols-8\@sm {
    grid-template-columns: repeat(8, minmax(0, 1fr))
  }

  .grid-cols-9\@sm {
    grid-template-columns: repeat(9, minmax(0, 1fr))
  }

  .grid-cols-10\@sm {
    grid-template-columns: repeat(10, minmax(0, 1fr))
  }

  .grid-cols-11\@sm {
    grid-template-columns: repeat(11, minmax(0, 1fr))
  }

  .grid-cols-12\@sm {
    grid-template-columns: repeat(12, minmax(0, 1fr))
  }

  .grid-cols-none\@sm {
    grid-template-columns: none
  }

  .col-auto\@sm {
    grid-column: auto
  }

  .col-span-1\@sm {
    grid-column: span 1/span 1
  }

  .col-span-2\@sm {
    grid-column: span 2/span 2
  }

  .col-span-3\@sm {
    grid-column: span 3/span 3
  }

  .col-span-4\@sm {
    grid-column: span 4/span 4
  }

  .col-span-5\@sm {
    grid-column: span 5/span 5
  }

  .col-span-6\@sm {
    grid-column: span 6/span 6
  }

  .col-span-7\@sm {
    grid-column: span 7/span 7
  }

  .col-span-8\@sm {
    grid-column: span 8/span 8
  }

  .col-span-9\@sm {
    grid-column: span 9/span 9
  }

  .col-span-10\@sm {
    grid-column: span 10/span 10
  }

  .col-span-11\@sm {
    grid-column: span 11/span 11
  }

  .col-span-12\@sm {
    grid-column: span 12/span 12
  }

  .col-span-full\@sm {
    grid-column: 1/-1
  }

  .grid-rows-1\@sm {
    grid-template-rows: repeat(1, minmax(0, 1fr))
  }

  .grid-rows-2\@sm {
    grid-template-rows: repeat(2, minmax(0, 1fr))
  }

  .grid-rows-3\@sm {
    grid-template-rows: repeat(3, minmax(0, 1fr))
  }

  .grid-rows-4\@sm {
    grid-template-rows: repeat(4, minmax(0, 1fr))
  }

  .grid-rows-5\@sm {
    grid-template-rows: repeat(5, minmax(0, 1fr))
  }

  .grid-rows-6\@sm {
    grid-template-rows: repeat(6, minmax(0, 1fr))
  }

  .grid-rows-7\@sm {
    grid-template-rows: repeat(7, minmax(0, 1fr))
  }

  .grid-rows-8\@sm {
    grid-template-rows: repeat(8, minmax(0, 1fr))
  }

  .grid-rows-9\@sm {
    grid-template-rows: repeat(9, minmax(0, 1fr))
  }

  .grid-rows-10\@sm {
    grid-template-rows: repeat(10, minmax(0, 1fr))
  }

  .grid-rows-11\@sm {
    grid-template-rows: repeat(11, minmax(0, 1fr))
  }

  .grid-rows-12\@sm {
    grid-template-rows: repeat(12, minmax(0, 1fr))
  }

  .grid-rows-none\@sm {
    grid-template-rows: none
  }

  .row-auto\@sm {
    grid-row: auto
  }

  .row-span-1\@sm {
    grid-row: span 1/span 1
  }

  .row-span-2\@sm {
    grid-row: span 2/span 2
  }

  .row-span-3\@sm {
    grid-row: span 3/span 3
  }

  .row-span-4\@sm {
    grid-row: span 4/span 4
  }

  .row-span-5\@sm {
    grid-row: span 5/span 5
  }

  .row-span-6\@sm {
    grid-row: span 6/span 6
  }

  .row-span-7\@sm {
    grid-row: span 7/span 7
  }

  .row-span-8\@sm {
    grid-row: span 8/span 8
  }

  .row-span-9\@sm {
    grid-row: span 9/span 9
  }

  .row-span-10\@sm {
    grid-row: span 10/span 10
  }

  .row-span-11\@sm {
    grid-row: span 11/span 11
  }

  .row-span-12\@sm {
    grid-row: span 12/span 12
  }

  .row-span-full\@sm {
    grid-row: 1/-1
  }

  .gap-5\@sm {
    gap: var(--size-5)
  }

  .gap-10\@sm {
    gap: var(--size-10)
  }

  .gap-15\@sm {
    gap: var(--size-15)
  }

  .gap-16\@sm {
    gap: var(--size-16)
  }

  .gap-20\@sm {
    gap: var(--size-20)
  }

  .gap-25\@sm {
    gap: var(--size-25)
  }

  .gap-30\@sm {
    gap: var(--size-30)
  }

  .gap-35\@sm {
    gap: var(--size-35)
  }

  .gap-40\@sm {
    gap: var(--size-40)
  }

  .gap-45\@sm {
    gap: var(--size-45)
  }

  .gap-50\@sm {
    gap: var(--size-50)
  }

  .gap-55\@sm {
    gap: var(--size-55)
  }

  .gap-60\@sm {
    gap: var(--size-60)
  }

  .gap-65\@sm {
    gap: var(--size-65)
  }

  .gap-70\@sm {
    gap: var(--size-70)
  }

  .gap-75\@sm {
    gap: var(--size-75)
  }

  .gap-80\@sm {
    gap: var(--size-80)
  }

  .gap-85\@sm {
    gap: var(--size-85)
  }

  .gap-90\@sm {
    gap: var(--size-90)
  }

  .gap-95\@sm {
    gap: var(--size-95)
  }

  .gap-100\@sm {
    gap: var(--size-100)
  }

  .gap-x-5\@sm {
    -moz-column-gap: var(--size-5);
    column-gap: var(--size-5)
  }

  .gap-x-10\@sm {
    -moz-column-gap: var(--size-10);
    column-gap: var(--size-10)
  }

  .gap-x-15\@sm {
    -moz-column-gap: var(--size-15);
    column-gap: var(--size-15)
  }

  .gap-x-16\@sm {
    -moz-column-gap: var(--size-16);
    column-gap: var(--size-16)
  }

  .gap-x-20\@sm {
    -moz-column-gap: var(--size-20);
    column-gap: var(--size-20)
  }

  .gap-x-25\@sm {
    -moz-column-gap: var(--size-25);
    column-gap: var(--size-25)
  }

  .gap-x-30\@sm {
    -moz-column-gap: var(--size-30);
    column-gap: var(--size-30)
  }

  .gap-x-35\@sm {
    -moz-column-gap: var(--size-35);
    column-gap: var(--size-35)
  }

  .gap-x-40\@sm {
    -moz-column-gap: var(--size-40);
    column-gap: var(--size-40)
  }

  .gap-x-45\@sm {
    -moz-column-gap: var(--size-45);
    column-gap: var(--size-45)
  }

  .gap-x-50\@sm {
    -moz-column-gap: var(--size-50);
    column-gap: var(--size-50)
  }

  .gap-x-55\@sm {
    -moz-column-gap: var(--size-55);
    column-gap: var(--size-55)
  }

  .gap-x-60\@sm {
    -moz-column-gap: var(--size-60);
    column-gap: var(--size-60)
  }

  .gap-x-65\@sm {
    -moz-column-gap: var(--size-65);
    column-gap: var(--size-65)
  }

  .gap-x-70\@sm {
    -moz-column-gap: var(--size-70);
    column-gap: var(--size-70)
  }

  .gap-x-75\@sm {
    -moz-column-gap: var(--size-75);
    column-gap: var(--size-75)
  }

  .gap-x-80\@sm {
    -moz-column-gap: var(--size-80);
    column-gap: var(--size-80)
  }

  .gap-x-85\@sm {
    -moz-column-gap: var(--size-85);
    column-gap: var(--size-85)
  }

  .gap-x-90\@sm {
    -moz-column-gap: var(--size-90);
    column-gap: var(--size-90)
  }

  .gap-x-95\@sm {
    -moz-column-gap: var(--size-95);
    column-gap: var(--size-95)
  }

  .gap-x-100\@sm {
    -moz-column-gap: var(--size-100);
    column-gap: var(--size-100)
  }

  .gap-y-5\@sm {
    row-gap: var(--size-5)
  }

  .gap-y-10\@sm {
    row-gap: var(--size-10)
  }

  .gap-y-15\@sm {
    row-gap: var(--size-15)
  }

  .gap-y-16\@sm {
    row-gap: var(--size-16)
  }

  .gap-y-20\@sm {
    row-gap: var(--size-20)
  }

  .gap-y-25\@sm {
    row-gap: var(--size-25)
  }

  .gap-y-30\@sm {
    row-gap: var(--size-30)
  }

  .gap-y-35\@sm {
    row-gap: var(--size-35)
  }

  .gap-y-40\@sm {
    row-gap: var(--size-40)
  }

  .gap-y-45\@sm {
    row-gap: var(--size-45)
  }

  .gap-y-50\@sm {
    row-gap: var(--size-50)
  }

  .gap-y-55\@sm {
    row-gap: var(--size-55)
  }

  .gap-y-60\@sm {
    row-gap: var(--size-60)
  }

  .gap-y-65\@sm {
    row-gap: var(--size-65)
  }

  .gap-y-70\@sm {
    row-gap: var(--size-70)
  }

  .gap-y-75\@sm {
    row-gap: var(--size-75)
  }

  .gap-y-80\@sm {
    row-gap: var(--size-80)
  }

  .gap-y-85\@sm {
    row-gap: var(--size-85)
  }

  .gap-y-90\@sm {
    row-gap: var(--size-90)
  }

  .gap-y-95\@sm {
    row-gap: var(--size-95)
  }

  .gap-y-100\@sm {
    row-gap: var(--size-100)
  }

  .m-auto\@sm {
    margin: auto
  }

  .mx-auto\@sm {
    margin-left: auto;
    margin-right: auto
  }

  .mt-auto\@sm {
    margin-top: auto
  }

  .me-auto\@sm {
    margin-right: auto
  }

  .ms-auto\@sm {
    margin-left: auto
  }

  .mt-0\@sm {
    margin-top: 0
  }

  .mt-10\@sm {
    margin-top: var(--size-10)
  }

  .mt-15\@sm {
    margin-top: var(--size-15)
  }

  .mt-16\@sm {
    margin-top: var(--size-16)
  }

  .mt-20\@sm {
    margin-top: var(--size-20)
  }

  .mt-30\@sm {
    margin-top: var(--size-30)
  }

  .mt-40\@sm {
    margin-top: var(--size-40)
  }

  .mt-50\@sm {
    margin-top: var(--size-50)
  }

  .mt-60\@sm {
    margin-top: var(--size-60)
  }

  .mt-70\@sm {
    margin-top: var(--size-70)
  }

  .mt-80\@sm {
    margin-top: var(--size-80)
  }

  .mt-90\@sm {
    margin-top: var(--size-90)
  }

  .mt-100\@sm {
    margin-top: var(--size-100)
  }

  .mb-0\@sm {
    margin-bottom: 0
  }

  .mb-10\@sm {
    margin-bottom: var(--size-10)
  }

  .mb-15\@sm {
    margin-bottom: var(--size-15)
  }

  .mb-16\@sm {
    margin-bottom: var(--size-16)
  }

  .mb-20\@sm {
    margin-bottom: var(--size-20)
  }

  .mb-30\@sm {
    margin-bottom: var(--size-30)
  }

  .mb-40\@sm {
    margin-bottom: var(--size-40)
  }

  .mb-50\@sm {
    margin-bottom: var(--size-50)
  }

  .mb-60\@sm {
    margin-bottom: var(--size-60)
  }

  .mb-70\@sm {
    margin-bottom: var(--size-70)
  }

  .mb-80\@sm {
    margin-bottom: var(--size-80)
  }

  .mb-90\@sm {
    margin-bottom: var(--size-90)
  }

  .mb-100\@sm {
    margin-bottom: var(--size-100)
  }

  .m-0\@sm {
    margin: 0
  }

  .p-10\@sm {
    padding: var(--size-10)
  }

  .p-15\@sm {
    padding: var(--size-15)
  }

  .p-16\@sm {
    padding: var(--size-16)
  }

  .p-20\@sm {
    padding: var(--size-20)
  }

  .p-30\@sm {
    padding: var(--size-30)
  }

  .p-40\@sm {
    padding: var(--size-40)
  }

  .p-50\@sm {
    padding: var(--size-50)
  }

  .py-0\@sm {
    padding-bottom: 0;
    padding-top: 0
  }

  .py-10\@sm {
    padding-bottom: var(--size-10);
    padding-top: var(--size-10)
  }

  .py-15\@sm {
    padding-bottom: var(--size-15);
    padding-top: var(--size-15)
  }

  .py-16\@sm {
    padding-bottom: var(--size-16);
    padding-top: var(--size-16)
  }

  .py-20\@sm {
    padding-bottom: var(--size-20);
    padding-top: var(--size-20)
  }

  .py-30\@sm {
    padding-bottom: var(--size-30);
    padding-top: var(--size-30)
  }

  .py-40\@sm {
    padding-bottom: var(--size-40);
    padding-top: var(--size-40)
  }

  .py-50\@sm {
    padding-bottom: var(--size-50);
    padding-top: var(--size-50)
  }

  .px-0\@sm {
    padding-left: 0;
    padding-right: 0
  }

  .px-10\@sm {
    padding-left: var(--size-10);
    padding-right: var(--size-10)
  }

  .px-15\@sm {
    padding-left: var(--size-15);
    padding-right: var(--size-15)
  }

  .px-16\@sm {
    padding-left: var(--size-16);
    padding-right: var(--size-16)
  }

  .px-20\@sm {
    padding-left: var(--size-20);
    padding-right: var(--size-20)
  }

  .px-30\@sm {
    padding-left: var(--size-30);
    padding-right: var(--size-30)
  }

  .px-40\@sm {
    padding-left: var(--size-40);
    padding-right: var(--size-40)
  }

  .px-50\@sm {
    padding-left: var(--size-50);
    padding-right: var(--size-50)
  }

  .pt-0\@sm {
    padding-top: 0
  }

  .pt-10\@sm {
    padding-top: var(--size-10)
  }

  .pt-15\@sm {
    padding-top: var(--size-15)
  }

  .pt-16\@sm {
    padding-top: var(--size-16)
  }

  .pt-20\@sm {
    padding-top: var(--size-20)
  }

  .pt-30\@sm {
    padding-top: var(--size-30)
  }

  .pt-40\@sm {
    padding-top: var(--size-40)
  }

  .pt-50\@sm {
    padding-top: var(--size-50)
  }

  .pt-60\@sm {
    padding-top: var(--size-60)
  }

  .pt-70\@sm {
    padding-top: var(--size-70)
  }

  .pt-80\@sm {
    padding-top: var(--size-80)
  }

  .pt-90\@sm {
    padding-top: var(--size-90)
  }

  .pt-100\@sm {
    padding-top: var(--size-100)
  }

  .pb-0\@sm {
    padding-bottom: 0
  }

  .pb-10\@sm {
    padding-bottom: var(--size-10)
  }

  .pb-15\@sm {
    padding-bottom: var(--size-15)
  }

  .pb-16\@sm {
    padding-bottom: var(--size-16)
  }

  .pb-20\@sm {
    padding-bottom: var(--size-20)
  }

  .pb-30\@sm {
    padding-bottom: var(--size-30)
  }

  .pb-40\@sm {
    padding-bottom: var(--size-40)
  }

  .pb-50\@sm {
    padding-bottom: var(--size-50)
  }

  .pb-60\@sm {
    padding-bottom: var(--size-60)
  }

  .pb-70\@sm {
    padding-bottom: var(--size-70)
  }

  .pb-80\@sm {
    padding-bottom: var(--size-80)
  }

  .pb-90\@sm {
    padding-bottom: var(--size-90)
  }

  .pb-100\@sm {
    padding-bottom: var(--size-100)
  }

  .h1\@sm {
    font-size: var(--h1-size)
  }

  .h2\@sm {
    font-size: var(--h2-size)
  }

  .h3\@sm {
    font-size: var(--h3-size)
  }

  .h4\@sm {
    font-size: var(--h4-size)
  }

  .h5\@sm {
    font-size: var(--h5-size)
  }

  .h6\@sm {
    font-size: var(--h6-size)
  }

  .text-xl\@sm {
    font-size: var(--text-xl)
  }

  .text-lg\@sm {
    font-size: var(--text-lg)
  }

  .text-md\@sm {
    font-size: var(--text-md)
  }

  .text-sm\@sm {
    font-size: var(--text-sm)
  }

  .text-xs\@sm {
    font-size: var(--text-xs)
  }

  .rounded-circle\@sm {
    border-radius: 50%
  }

  .rounded-5\@sm {
    border-radius: 5px
  }

  .rounded-10\@sm {
    border-radius: 10px
  }

  .rounded-15\@sm {
    border-radius: 15px
  }

  .rounded-20\@sm {
    border-radius: 20px
  }

  .rounded-25\@sm {
    border-radius: 25px
  }

  .rounded-30\@sm {
    border-radius: 30px
  }
}

@media (min-width:64rem) {
  .text-uppercase\@md {
    text-transform: uppercase
  }

  .text-capitalize\@md {
    text-transform: capitalize
  }

  .text-wrap\@md {
    white-space: normal
  }

  .text-nowrap\@md {
    white-space: nowrap
  }

  .w-auto\@md {
    width: auto
  }

  .w-100\@md {
    width: 100%
  }

  .h-100\@md {
    height: 100%
  }

  .d-block\@md {
    display: block
  }

  .d-none\@md {
    display: none
  }

  .d-inline\@md {
    display: inline
  }

  .d-inline-block\@md {
    display: inline-block
  }

  .d-grid\@md {
    display: grid
  }

  .d-flex\@md {
    display: flex
  }

  .d-flex-center\@md {
    align-items: center;
    display: flex;
    justify-content: center
  }

  .d-inline-flex\@md {
    display: inline-flex
  }

  .d-inline-flex-center\@md {
    align-items: center;
    display: inline-flex;
    justify-content: center
  }

  .position-absolute\@md {
    position: absolute
  }

  .sticky-top\@md {
    position: sticky;
    top: 0;
    z-index: 5
  }

  .text-center\@md {
    text-align: center
  }

  .text-start\@md {
    text-align: left
  }

  .text-end\@md {
    text-align: right
  }

  .flex-fill\@md {
    flex: 1 1 auto
  }

  .flex-row\@md {
    flex-direction: row
  }

  .flex-column\@md {
    flex-direction: column
  }

  .flex-row-reverse\@md {
    flex-direction: row-reverse
  }

  .flex-column-reverse\@md {
    flex-direction: column-reverse
  }

  .flex-grow-0\@md {
    flex-grow: 0
  }

  .flex-grow-1\@md {
    flex-grow: 1
  }

  .flex-shrink-0\@md {
    flex-shrink: 0
  }

  .flex-shrink-1\@md {
    flex-shrink: 1
  }

  .flex-wrap\@md {
    flex-wrap: wrap
  }

  .flex-nowrap\@md {
    flex-wrap: nowrap
  }

  .flex-wrap-reverse\@md {
    flex-wrap: wrap-reverse
  }

  .justify-content-start\@md {
    justify-content: flex-start
  }

  .justify-content-end\@md {
    justify-content: flex-end
  }

  .justify-content-center\@md {
    justify-content: center
  }

  .justify-content-between\@md {
    justify-content: space-between
  }

  .justify-content-around\@md {
    justify-content: space-around
  }

  .justify-content-evenly\@md {
    justify-content: space-evenly
  }

  .align-items-start\@md {
    align-items: flex-start
  }

  .align-items-end\@md {
    align-items: flex-end
  }

  .align-items-center\@md {
    align-items: center
  }

  .align-items-baseline\@md {
    align-items: baseline
  }

  .align-items-stretch\@md {
    align-items: stretch
  }

  .align-content-start\@md {
    align-content: flex-start
  }

  .align-content-end\@md {
    align-content: flex-end
  }

  .align-content-center\@md {
    align-content: center
  }

  .align-content-between\@md {
    align-content: space-between
  }

  .align-content-around\@md {
    align-content: space-around
  }

  .align-content-stretch\@md {
    align-content: stretch
  }

  .align-self-auto\@md {
    align-self: auto
  }

  .align-self-start\@md {
    align-self: flex-start
  }

  .align-self-end\@md {
    align-self: flex-end
  }

  .align-self-center\@md {
    align-self: center
  }

  .align-self-baseline\@md {
    align-self: baseline
  }

  .align-self-stretch\@md {
    align-self: stretch
  }

  .order-1\@md {
    order: 1
  }

  .order-2\@md {
    order: 2
  }

  .order-3\@md {
    order: 3
  }

  .order-4\@md {
    order: 4
  }

  .order-5\@md {
    order: 5
  }

  .order-last\@md {
    order: 6
  }

  .order-first\@md {
    order: -1
  }

  .grid-auto-xs\@md {
    --col-min-width: 8rem
  }

  .grid-auto-sm\@md {
    --col-min-width: 10rem
  }

  .grid-auto-md\@md {
    --col-min-width: 15rem
  }

  .grid-auto-lg\@md {
    --col-min-width: 20rem
  }

  .grid-auto-xl\@md {
    --col-min-width: 25rem
  }

  .grid-auto-cols\@md {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr))
  }

  .col-1\@md {
    --span: 1
  }

  .col-start-1\@md {
    grid-column-start: 1
  }

  .col-end-2\@md {
    grid-column-end: 2
  }

  .row-1\@md {
    grid-row: span 1/span 1
  }

  .row-start-1\@md {
    grid-row-start: 1
  }

  .row-end-2\@md {
    grid-row-end: 2
  }

  .col-2\@md {
    --span: 2
  }

  .col-start-2\@md {
    grid-column-start: 2
  }

  .col-end-3\@md {
    grid-column-end: 3
  }

  .row-2\@md {
    grid-row: span 2/span 2
  }

  .row-start-2\@md {
    grid-row-start: 2
  }

  .row-end-3\@md {
    grid-row-end: 3
  }

  .col-3\@md {
    --span: 3
  }

  .col-start-3\@md {
    grid-column-start: 3
  }

  .col-end-4\@md {
    grid-column-end: 4
  }

  .row-3\@md {
    grid-row: span 3/span 3
  }

  .row-start-3\@md {
    grid-row-start: 3
  }

  .row-end-4\@md {
    grid-row-end: 4
  }

  .col-4\@md {
    --span: 4
  }

  .col-start-4\@md {
    grid-column-start: 4
  }

  .col-end-5\@md {
    grid-column-end: 5
  }

  .row-4\@md {
    grid-row: span 4/span 4
  }

  .row-start-4\@md {
    grid-row-start: 4
  }

  .row-end-5\@md {
    grid-row-end: 5
  }

  .col-5\@md {
    --span: 5
  }

  .col-start-5\@md {
    grid-column-start: 5
  }

  .col-end-6\@md {
    grid-column-end: 6
  }

  .row-5\@md {
    grid-row: span 5/span 5
  }

  .row-start-5\@md {
    grid-row-start: 5
  }

  .row-end-6\@md {
    grid-row-end: 6
  }

  .col-6\@md {
    --span: 6
  }

  .col-start-6\@md {
    grid-column-start: 6
  }

  .col-end-7\@md {
    grid-column-end: 7
  }

  .row-6\@md {
    grid-row: span 6/span 6
  }

  .row-start-6\@md {
    grid-row-start: 6
  }

  .row-end-7\@md {
    grid-row-end: 7
  }

  .col-7\@md {
    --span: 7
  }

  .col-start-7\@md {
    grid-column-start: 7
  }

  .col-end-8\@md {
    grid-column-end: 8
  }

  .row-7\@md {
    grid-row: span 7/span 7
  }

  .row-start-7\@md {
    grid-row-start: 7
  }

  .row-end-8\@md {
    grid-row-end: 8
  }

  .col-8\@md {
    --span: 8
  }

  .col-start-8\@md {
    grid-column-start: 8
  }

  .col-end-9\@md {
    grid-column-end: 9
  }

  .row-8\@md {
    grid-row: span 8/span 8
  }

  .row-start-8\@md {
    grid-row-start: 8
  }

  .row-end-9\@md {
    grid-row-end: 9
  }

  .col-9\@md {
    --span: 9
  }

  .col-start-9\@md {
    grid-column-start: 9
  }

  .col-end-10\@md {
    grid-column-end: 10
  }

  .row-9\@md {
    grid-row: span 9/span 9
  }

  .row-start-9\@md {
    grid-row-start: 9
  }

  .row-end-10\@md {
    grid-row-end: 10
  }

  .col-10\@md {
    --span: 10
  }

  .col-start-10\@md {
    grid-column-start: 10
  }

  .col-end-11\@md {
    grid-column-end: 11
  }

  .row-10\@md {
    grid-row: span 10/span 10
  }

  .row-start-10\@md {
    grid-row-start: 10
  }

  .row-end-11\@md {
    grid-row-end: 11
  }

  .col-11\@md {
    --span: 11
  }

  .col-start-11\@md {
    grid-column-start: 11
  }

  .col-end-12\@md {
    grid-column-end: 12
  }

  .row-11\@md {
    grid-row: span 11/span 11
  }

  .row-start-11\@md {
    grid-row-start: 11
  }

  .row-end-12\@md {
    grid-row-end: 12
  }

  .col-12\@md {
    --span: 12
  }

  .col-start-12\@md {
    grid-column-start: 12
  }

  .col-end-13\@md {
    grid-column-end: 13
  }

  .row-12\@md {
    grid-row: span 12/span 12
  }

  .row-start-12\@md {
    grid-row-start: 12
  }

  .row-end-13\@md {
    grid-row-end: 13
  }

  .col-start\@md {
    grid-column-start: 1
  }

  .col-end\@md {
    grid-column-end: -1
  }

  .row-start\@md {
    grid-row-start: 1
  }

  .row-end\@md {
    grid-row-end: -1
  }

  .col-start-auto\@md {
    grid-column-start: auto
  }

  .col-end-auto\@md {
    grid-column-end: auto
  }

  .row-start-auto\@md {
    grid-row-start: auto
  }

  .row-end-auto\@md {
    grid-row-end: auto
  }

  .grid-cols-1\@md {
    grid-template-columns: repeat(1, minmax(0, 1fr))
  }

  .grid-cols-2\@md {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .grid-cols-3\@md {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }

  .grid-cols-4\@md {
    grid-template-columns: repeat(4, minmax(0, 1fr))
  }

  .grid-cols-5\@md {
    grid-template-columns: repeat(5, minmax(0, 1fr))
  }

  .grid-cols-6\@md {
    grid-template-columns: repeat(6, minmax(0, 1fr))
  }

  .grid-cols-7\@md {
    grid-template-columns: repeat(7, minmax(0, 1fr))
  }

  .grid-cols-8\@md {
    grid-template-columns: repeat(8, minmax(0, 1fr))
  }

  .grid-cols-9\@md {
    grid-template-columns: repeat(9, minmax(0, 1fr))
  }

  .grid-cols-10\@md {
    grid-template-columns: repeat(10, minmax(0, 1fr))
  }

  .grid-cols-11\@md {
    grid-template-columns: repeat(11, minmax(0, 1fr))
  }

  .grid-cols-12\@md {
    grid-template-columns: repeat(12, minmax(0, 1fr))
  }

  .grid-cols-none\@md {
    grid-template-columns: none
  }

  .col-auto\@md {
    grid-column: auto
  }

  .col-span-1\@md {
    grid-column: span 1/span 1
  }

  .col-span-2\@md {
    grid-column: span 2/span 2
  }

  .col-span-3\@md {
    grid-column: span 3/span 3
  }

  .col-span-4\@md {
    grid-column: span 4/span 4
  }

  .col-span-5\@md {
    grid-column: span 5/span 5
  }

  .col-span-6\@md {
    grid-column: span 6/span 6
  }

  .col-span-7\@md {
    grid-column: span 7/span 7
  }

  .col-span-8\@md {
    grid-column: span 8/span 8
  }

  .col-span-9\@md {
    grid-column: span 9/span 9
  }

  .col-span-10\@md {
    grid-column: span 10/span 10
  }

  .col-span-11\@md {
    grid-column: span 11/span 11
  }

  .col-span-12\@md {
    grid-column: span 12/span 12
  }

  .col-span-full\@md {
    grid-column: 1/-1
  }

  .grid-rows-1\@md {
    grid-template-rows: repeat(1, minmax(0, 1fr))
  }

  .grid-rows-2\@md {
    grid-template-rows: repeat(2, minmax(0, 1fr))
  }

  .grid-rows-3\@md {
    grid-template-rows: repeat(3, minmax(0, 1fr))
  }

  .grid-rows-4\@md {
    grid-template-rows: repeat(4, minmax(0, 1fr))
  }

  .grid-rows-5\@md {
    grid-template-rows: repeat(5, minmax(0, 1fr))
  }

  .grid-rows-6\@md {
    grid-template-rows: repeat(6, minmax(0, 1fr))
  }

  .grid-rows-7\@md {
    grid-template-rows: repeat(7, minmax(0, 1fr))
  }

  .grid-rows-8\@md {
    grid-template-rows: repeat(8, minmax(0, 1fr))
  }

  .grid-rows-9\@md {
    grid-template-rows: repeat(9, minmax(0, 1fr))
  }

  .grid-rows-10\@md {
    grid-template-rows: repeat(10, minmax(0, 1fr))
  }

  .grid-rows-11\@md {
    grid-template-rows: repeat(11, minmax(0, 1fr))
  }

  .grid-rows-12\@md {
    grid-template-rows: repeat(12, minmax(0, 1fr))
  }

  .grid-rows-none\@md {
    grid-template-rows: none
  }

  .row-auto\@md {
    grid-row: auto
  }

  .row-span-1\@md {
    grid-row: span 1/span 1
  }

  .row-span-2\@md {
    grid-row: span 2/span 2
  }

  .row-span-3\@md {
    grid-row: span 3/span 3
  }

  .row-span-4\@md {
    grid-row: span 4/span 4
  }

  .row-span-5\@md {
    grid-row: span 5/span 5
  }

  .row-span-6\@md {
    grid-row: span 6/span 6
  }

  .row-span-7\@md {
    grid-row: span 7/span 7
  }

  .row-span-8\@md {
    grid-row: span 8/span 8
  }

  .row-span-9\@md {
    grid-row: span 9/span 9
  }

  .row-span-10\@md {
    grid-row: span 10/span 10
  }

  .row-span-11\@md {
    grid-row: span 11/span 11
  }

  .row-span-12\@md {
    grid-row: span 12/span 12
  }

  .row-span-full\@md {
    grid-row: 1/-1
  }

  .gap-5\@md {
    gap: var(--size-5)
  }

  .gap-10\@md {
    gap: var(--size-10)
  }

  .gap-15\@md {
    gap: var(--size-15)
  }

  .gap-16\@md {
    gap: var(--size-16)
  }

  .gap-20\@md {
    gap: var(--size-20)
  }

  .gap-25\@md {
    gap: var(--size-25)
  }

  .gap-30\@md {
    gap: var(--size-30)
  }

  .gap-35\@md {
    gap: var(--size-35)
  }

  .gap-40\@md {
    gap: var(--size-40)
  }

  .gap-45\@md {
    gap: var(--size-45)
  }

  .gap-50\@md {
    gap: var(--size-50)
  }

  .gap-55\@md {
    gap: var(--size-55)
  }

  .gap-60\@md {
    gap: var(--size-60)
  }

  .gap-65\@md {
    gap: var(--size-65)
  }

  .gap-70\@md {
    gap: var(--size-70)
  }

  .gap-75\@md {
    gap: var(--size-75)
  }

  .gap-80\@md {
    gap: var(--size-80)
  }

  .gap-85\@md {
    gap: var(--size-85)
  }

  .gap-90\@md {
    gap: var(--size-90)
  }

  .gap-95\@md {
    gap: var(--size-95)
  }

  .gap-100\@md {
    gap: var(--size-100)
  }

  .gap-x-5\@md {
    -moz-column-gap: var(--size-5);
    column-gap: var(--size-5)
  }

  .gap-x-10\@md {
    -moz-column-gap: var(--size-10);
    column-gap: var(--size-10)
  }

  .gap-x-15\@md {
    -moz-column-gap: var(--size-15);
    column-gap: var(--size-15)
  }

  .gap-x-16\@md {
    -moz-column-gap: var(--size-16);
    column-gap: var(--size-16)
  }

  .gap-x-20\@md {
    -moz-column-gap: var(--size-20);
    column-gap: var(--size-20)
  }

  .gap-x-25\@md {
    -moz-column-gap: var(--size-25);
    column-gap: var(--size-25)
  }

  .gap-x-30\@md {
    -moz-column-gap: var(--size-30);
    column-gap: var(--size-30)
  }

  .gap-x-35\@md {
    -moz-column-gap: var(--size-35);
    column-gap: var(--size-35)
  }

  .gap-x-40\@md {
    -moz-column-gap: var(--size-40);
    column-gap: var(--size-40)
  }

  .gap-x-45\@md {
    -moz-column-gap: var(--size-45);
    column-gap: var(--size-45)
  }

  .gap-x-50\@md {
    -moz-column-gap: var(--size-50);
    column-gap: var(--size-50)
  }

  .gap-x-55\@md {
    -moz-column-gap: var(--size-55);
    column-gap: var(--size-55)
  }

  .gap-x-60\@md {
    -moz-column-gap: var(--size-60);
    column-gap: var(--size-60)
  }

  .gap-x-65\@md {
    -moz-column-gap: var(--size-65);
    column-gap: var(--size-65)
  }

  .gap-x-70\@md {
    -moz-column-gap: var(--size-70);
    column-gap: var(--size-70)
  }

  .gap-x-75\@md {
    -moz-column-gap: var(--size-75);
    column-gap: var(--size-75)
  }

  .gap-x-80\@md {
    -moz-column-gap: var(--size-80);
    column-gap: var(--size-80)
  }

  .gap-x-85\@md {
    -moz-column-gap: var(--size-85);
    column-gap: var(--size-85)
  }

  .gap-x-90\@md {
    -moz-column-gap: var(--size-90);
    column-gap: var(--size-90)
  }

  .gap-x-95\@md {
    -moz-column-gap: var(--size-95);
    column-gap: var(--size-95)
  }

  .gap-x-100\@md {
    -moz-column-gap: var(--size-100);
    column-gap: var(--size-100)
  }

  .gap-y-5\@md {
    row-gap: var(--size-5)
  }

  .gap-y-10\@md {
    row-gap: var(--size-10)
  }

  .gap-y-15\@md {
    row-gap: var(--size-15)
  }

  .gap-y-16\@md {
    row-gap: var(--size-16)
  }

  .gap-y-20\@md {
    row-gap: var(--size-20)
  }

  .gap-y-25\@md {
    row-gap: var(--size-25)
  }

  .gap-y-30\@md {
    row-gap: var(--size-30)
  }

  .gap-y-35\@md {
    row-gap: var(--size-35)
  }

  .gap-y-40\@md {
    row-gap: var(--size-40)
  }

  .gap-y-45\@md {
    row-gap: var(--size-45)
  }

  .gap-y-50\@md {
    row-gap: var(--size-50)
  }

  .gap-y-55\@md {
    row-gap: var(--size-55)
  }

  .gap-y-60\@md {
    row-gap: var(--size-60)
  }

  .gap-y-65\@md {
    row-gap: var(--size-65)
  }

  .gap-y-70\@md {
    row-gap: var(--size-70)
  }

  .gap-y-75\@md {
    row-gap: var(--size-75)
  }

  .gap-y-80\@md {
    row-gap: var(--size-80)
  }

  .gap-y-85\@md {
    row-gap: var(--size-85)
  }

  .gap-y-90\@md {
    row-gap: var(--size-90)
  }

  .gap-y-95\@md {
    row-gap: var(--size-95)
  }

  .gap-y-100\@md {
    row-gap: var(--size-100)
  }

  .m-auto\@md {
    margin: auto
  }

  .mx-auto\@md {
    margin-left: auto;
    margin-right: auto
  }

  .mt-auto\@md {
    margin-top: auto
  }

  .me-auto\@md {
    margin-right: auto
  }

  .ms-auto\@md {
    margin-left: auto
  }

  .mt-0\@md {
    margin-top: 0
  }

  .mt-10\@md {
    margin-top: var(--size-10)
  }

  .mt-15\@md {
    margin-top: var(--size-15)
  }

  .mt-16\@md {
    margin-top: var(--size-16)
  }

  .mt-20\@md {
    margin-top: var(--size-20)
  }

  .mt-30\@md {
    margin-top: var(--size-30)
  }

  .mt-40\@md {
    margin-top: var(--size-40)
  }

  .mt-50\@md {
    margin-top: var(--size-50)
  }

  .mt-60\@md {
    margin-top: var(--size-60)
  }

  .mt-70\@md {
    margin-top: var(--size-70)
  }

  .mt-80\@md {
    margin-top: var(--size-80)
  }

  .mt-90\@md {
    margin-top: var(--size-90)
  }

  .mt-100\@md {
    margin-top: var(--size-100)
  }

  .mb-0\@md {
    margin-bottom: 0
  }

  .mb-10\@md {
    margin-bottom: var(--size-10)
  }

  .mb-15\@md {
    margin-bottom: var(--size-15)
  }

  .mb-16\@md {
    margin-bottom: var(--size-16)
  }

  .mb-20\@md {
    margin-bottom: var(--size-20)
  }

  .mb-30\@md {
    margin-bottom: var(--size-30)
  }

  .mb-40\@md {
    margin-bottom: var(--size-40)
  }

  .mb-50\@md {
    margin-bottom: var(--size-50)
  }

  .mb-60\@md {
    margin-bottom: var(--size-60)
  }

  .mb-70\@md {
    margin-bottom: var(--size-70)
  }

  .mb-80\@md {
    margin-bottom: var(--size-80)
  }

  .mb-90\@md {
    margin-bottom: var(--size-90)
  }

  .mb-100\@md {
    margin-bottom: var(--size-100)
  }

  .m-0\@md {
    margin: 0
  }

  .p-10\@md {
    padding: var(--size-10)
  }

  .p-15\@md {
    padding: var(--size-15)
  }

  .p-16\@md {
    padding: var(--size-16)
  }

  .p-20\@md {
    padding: var(--size-20)
  }

  .p-30\@md {
    padding: var(--size-30)
  }

  .p-40\@md {
    padding: var(--size-40)
  }

  .p-50\@md {
    padding: var(--size-50)
  }

  .py-0\@md {
    padding-bottom: 0;
    padding-top: 0
  }

  .py-10\@md {
    padding-bottom: var(--size-10);
    padding-top: var(--size-10)
  }

  .py-15\@md {
    padding-bottom: var(--size-15);
    padding-top: var(--size-15)
  }

  .py-16\@md {
    padding-bottom: var(--size-16);
    padding-top: var(--size-16)
  }

  .py-20\@md {
    padding-bottom: var(--size-20);
    padding-top: var(--size-20)
  }

  .py-30\@md {
    padding-bottom: var(--size-30);
    padding-top: var(--size-30)
  }

  .py-40\@md {
    padding-bottom: var(--size-40);
    padding-top: var(--size-40)
  }

  .py-50\@md {
    padding-bottom: var(--size-50);
    padding-top: var(--size-50)
  }

  .px-0\@md {
    padding-left: 0;
    padding-right: 0
  }

  .px-10\@md {
    padding-left: var(--size-10);
    padding-right: var(--size-10)
  }

  .px-15\@md {
    padding-left: var(--size-15);
    padding-right: var(--size-15)
  }

  .px-16\@md {
    padding-left: var(--size-16);
    padding-right: var(--size-16)
  }

  .px-20\@md {
    padding-left: var(--size-20);
    padding-right: var(--size-20)
  }

  .px-30\@md {
    padding-left: var(--size-30);
    padding-right: var(--size-30)
  }

  .px-40\@md {
    padding-left: var(--size-40);
    padding-right: var(--size-40)
  }

  .px-50\@md {
    padding-left: var(--size-50);
    padding-right: var(--size-50)
  }

  .pt-0\@md {
    padding-top: 0
  }

  .pt-10\@md {
    padding-top: var(--size-10)
  }

  .pt-15\@md {
    padding-top: var(--size-15)
  }

  .pt-16\@md {
    padding-top: var(--size-16)
  }

  .pt-20\@md {
    padding-top: var(--size-20)
  }

  .pt-30\@md {
    padding-top: var(--size-30)
  }

  .pt-40\@md {
    padding-top: var(--size-40)
  }

  .pt-50\@md {
    padding-top: var(--size-50)
  }

  .pt-60\@md {
    padding-top: var(--size-60)
  }

  .pt-70\@md {
    padding-top: var(--size-70)
  }

  .pt-80\@md {
    padding-top: var(--size-80)
  }

  .pt-90\@md {
    padding-top: var(--size-90)
  }

  .pt-100\@md {
    padding-top: var(--size-100)
  }

  .pb-0\@md {
    padding-bottom: 0
  }

  .pb-10\@md {
    padding-bottom: var(--size-10)
  }

  .pb-15\@md {
    padding-bottom: var(--size-15)
  }

  .pb-16\@md {
    padding-bottom: var(--size-16)
  }

  .pb-20\@md {
    padding-bottom: var(--size-20)
  }

  .pb-30\@md {
    padding-bottom: var(--size-30)
  }

  .pb-40\@md {
    padding-bottom: var(--size-40)
  }

  .pb-50\@md {
    padding-bottom: var(--size-50)
  }

  .pb-60\@md {
    padding-bottom: var(--size-60)
  }

  .pb-70\@md {
    padding-bottom: var(--size-70)
  }

  .pb-80\@md {
    padding-bottom: var(--size-80)
  }

  .pb-90\@md {
    padding-bottom: var(--size-90)
  }

  .pb-100\@md {
    padding-bottom: var(--size-100)
  }

  .h1\@md {
    font-size: var(--h1-size)
  }

  .h2\@md {
    font-size: var(--h2-size)
  }

  .h3\@md {
    font-size: var(--h3-size)
  }

  .h4\@md {
    font-size: var(--h4-size)
  }

  .h5\@md {
    font-size: var(--h5-size)
  }

  .h6\@md {
    font-size: var(--h6-size)
  }

  .text-xl\@md {
    font-size: var(--text-xl)
  }

  .text-lg\@md {
    font-size: var(--text-lg)
  }

  .text-md\@md {
    font-size: var(--text-md)
  }

  .text-sm\@md {
    font-size: var(--text-sm)
  }

  .text-xs\@md {
    font-size: var(--text-xs)
  }

  .rounded-circle\@md {
    border-radius: 50%
  }

  .rounded-5\@md {
    border-radius: 5px
  }

  .rounded-10\@md {
    border-radius: 10px
  }

  .rounded-15\@md {
    border-radius: 15px
  }

  .rounded-20\@md {
    border-radius: 20px
  }

  .rounded-25\@md {
    border-radius: 25px
  }

  .rounded-30\@md {
    border-radius: 30px
  }
}

@media (min-width:80rem) {
  .text-uppercase\@lg {
    text-transform: uppercase
  }

  .text-capitalize\@lg {
    text-transform: capitalize
  }

  .text-wrap\@lg {
    white-space: normal
  }

  .text-nowrap\@lg {
    white-space: nowrap
  }

  .w-auto\@lg {
    width: auto
  }

  .w-100\@lg {
    width: 100%
  }

  .h-100\@lg {
    height: 100%
  }

  .d-block\@lg {
    display: block
  }

  .d-none\@lg {
    display: none
  }

  .d-inline\@lg {
    display: inline
  }

  .d-inline-block\@lg {
    display: inline-block
  }

  .d-grid\@lg {
    display: grid
  }

  .d-flex\@lg {
    display: flex
  }

  .d-flex-center\@lg {
    align-items: center;
    display: flex;
    justify-content: center
  }

  .d-inline-flex\@lg {
    display: inline-flex
  }

  .d-inline-flex-center\@lg {
    align-items: center;
    display: inline-flex;
    justify-content: center
  }

  .position-absolute\@lg {
    position: absolute
  }

  .sticky-top\@lg {
    position: sticky;
    top: 0;
    z-index: 5
  }

  .text-center\@lg {
    text-align: center
  }

  .text-start\@lg {
    text-align: left
  }

  .text-end\@lg {
    text-align: right
  }

  .flex-fill\@lg {
    flex: 1 1 auto
  }

  .flex-row\@lg {
    flex-direction: row
  }

  .flex-column\@lg {
    flex-direction: column
  }

  .flex-row-reverse\@lg {
    flex-direction: row-reverse
  }

  .flex-column-reverse\@lg {
    flex-direction: column-reverse
  }

  .flex-grow-0\@lg {
    flex-grow: 0
  }

  .flex-grow-1\@lg {
    flex-grow: 1
  }

  .flex-shrink-0\@lg {
    flex-shrink: 0
  }

  .flex-shrink-1\@lg {
    flex-shrink: 1
  }

  .flex-wrap\@lg {
    flex-wrap: wrap
  }

  .flex-nowrap\@lg {
    flex-wrap: nowrap
  }

  .flex-wrap-reverse\@lg {
    flex-wrap: wrap-reverse
  }

  .justify-content-start\@lg {
    justify-content: flex-start
  }

  .justify-content-end\@lg {
    justify-content: flex-end
  }

  .justify-content-center\@lg {
    justify-content: center
  }

  .justify-content-between\@lg {
    justify-content: space-between
  }

  .justify-content-around\@lg {
    justify-content: space-around
  }

  .justify-content-evenly\@lg {
    justify-content: space-evenly
  }

  .align-items-start\@lg {
    align-items: flex-start
  }

  .align-items-end\@lg {
    align-items: flex-end
  }

  .align-items-center\@lg {
    align-items: center
  }

  .align-items-baseline\@lg {
    align-items: baseline
  }

  .align-items-stretch\@lg {
    align-items: stretch
  }

  .align-content-start\@lg {
    align-content: flex-start
  }

  .align-content-end\@lg {
    align-content: flex-end
  }

  .align-content-center\@lg {
    align-content: center
  }

  .align-content-between\@lg {
    align-content: space-between
  }

  .align-content-around\@lg {
    align-content: space-around
  }

  .align-content-stretch\@lg {
    align-content: stretch
  }

  .align-self-auto\@lg {
    align-self: auto
  }

  .align-self-start\@lg {
    align-self: flex-start
  }

  .align-self-end\@lg {
    align-self: flex-end
  }

  .align-self-center\@lg {
    align-self: center
  }

  .align-self-baseline\@lg {
    align-self: baseline
  }

  .align-self-stretch\@lg {
    align-self: stretch
  }

  .order-1\@lg {
    order: 1
  }

  .order-2\@lg {
    order: 2
  }

  .order-3\@lg {
    order: 3
  }

  .order-4\@lg {
    order: 4
  }

  .order-5\@lg {
    order: 5
  }

  .order-last\@lg {
    order: 6
  }

  .order-first\@lg {
    order: -1
  }

  .grid-auto-xs\@lg {
    --col-min-width: 8rem
  }

  .grid-auto-sm\@lg {
    --col-min-width: 10rem
  }

  .grid-auto-md\@lg {
    --col-min-width: 15rem
  }

  .grid-auto-lg\@lg {
    --col-min-width: 20rem
  }

  .grid-auto-xl\@lg {
    --col-min-width: 25rem
  }

  .grid-auto-cols\@lg {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr))
  }

  .col-1\@lg {
    --span: 1
  }

  .col-start-1\@lg {
    grid-column-start: 1
  }

  .col-end-2\@lg {
    grid-column-end: 2
  }

  .row-1\@lg {
    grid-row: span 1/span 1
  }

  .row-start-1\@lg {
    grid-row-start: 1
  }

  .row-end-2\@lg {
    grid-row-end: 2
  }

  .col-2\@lg {
    --span: 2
  }

  .col-start-2\@lg {
    grid-column-start: 2
  }

  .col-end-3\@lg {
    grid-column-end: 3
  }

  .row-2\@lg {
    grid-row: span 2/span 2
  }

  .row-start-2\@lg {
    grid-row-start: 2
  }

  .row-end-3\@lg {
    grid-row-end: 3
  }

  .col-3\@lg {
    --span: 3
  }

  .col-start-3\@lg {
    grid-column-start: 3
  }

  .col-end-4\@lg {
    grid-column-end: 4
  }

  .row-3\@lg {
    grid-row: span 3/span 3
  }

  .row-start-3\@lg {
    grid-row-start: 3
  }

  .row-end-4\@lg {
    grid-row-end: 4
  }

  .col-4\@lg {
    --span: 4
  }

  .col-start-4\@lg {
    grid-column-start: 4
  }

  .col-end-5\@lg {
    grid-column-end: 5
  }

  .row-4\@lg {
    grid-row: span 4/span 4
  }

  .row-start-4\@lg {
    grid-row-start: 4
  }

  .row-end-5\@lg {
    grid-row-end: 5
  }

  .col-5\@lg {
    --span: 5
  }

  .col-start-5\@lg {
    grid-column-start: 5
  }

  .col-end-6\@lg {
    grid-column-end: 6
  }

  .row-5\@lg {
    grid-row: span 5/span 5
  }

  .row-start-5\@lg {
    grid-row-start: 5
  }

  .row-end-6\@lg {
    grid-row-end: 6
  }

  .col-6\@lg {
    --span: 6
  }

  .col-start-6\@lg {
    grid-column-start: 6
  }

  .col-end-7\@lg {
    grid-column-end: 7
  }

  .row-6\@lg {
    grid-row: span 6/span 6
  }

  .row-start-6\@lg {
    grid-row-start: 6
  }

  .row-end-7\@lg {
    grid-row-end: 7
  }

  .col-7\@lg {
    --span: 7
  }

  .col-start-7\@lg {
    grid-column-start: 7
  }

  .col-end-8\@lg {
    grid-column-end: 8
  }

  .row-7\@lg {
    grid-row: span 7/span 7
  }

  .row-start-7\@lg {
    grid-row-start: 7
  }

  .row-end-8\@lg {
    grid-row-end: 8
  }

  .col-8\@lg {
    --span: 8
  }

  .col-start-8\@lg {
    grid-column-start: 8
  }

  .col-end-9\@lg {
    grid-column-end: 9
  }

  .row-8\@lg {
    grid-row: span 8/span 8
  }

  .row-start-8\@lg {
    grid-row-start: 8
  }

  .row-end-9\@lg {
    grid-row-end: 9
  }

  .col-9\@lg {
    --span: 9
  }

  .col-start-9\@lg {
    grid-column-start: 9
  }

  .col-end-10\@lg {
    grid-column-end: 10
  }

  .row-9\@lg {
    grid-row: span 9/span 9
  }

  .row-start-9\@lg {
    grid-row-start: 9
  }

  .row-end-10\@lg {
    grid-row-end: 10
  }

  .col-10\@lg {
    --span: 10
  }

  .col-start-10\@lg {
    grid-column-start: 10
  }

  .col-end-11\@lg {
    grid-column-end: 11
  }

  .row-10\@lg {
    grid-row: span 10/span 10
  }

  .row-start-10\@lg {
    grid-row-start: 10
  }

  .row-end-11\@lg {
    grid-row-end: 11
  }

  .col-11\@lg {
    --span: 11
  }

  .col-start-11\@lg {
    grid-column-start: 11
  }

  .col-end-12\@lg {
    grid-column-end: 12
  }

  .row-11\@lg {
    grid-row: span 11/span 11
  }

  .row-start-11\@lg {
    grid-row-start: 11
  }

  .row-end-12\@lg {
    grid-row-end: 12
  }

  .col-12\@lg {
    --span: 12
  }

  .col-start-12\@lg {
    grid-column-start: 12
  }

  .col-end-13\@lg {
    grid-column-end: 13
  }

  .row-12\@lg {
    grid-row: span 12/span 12
  }

  .row-start-12\@lg {
    grid-row-start: 12
  }

  .row-end-13\@lg {
    grid-row-end: 13
  }

  .col-start\@lg {
    grid-column-start: 1
  }

  .col-end\@lg {
    grid-column-end: -1
  }

  .row-start\@lg {
    grid-row-start: 1
  }

  .row-end\@lg {
    grid-row-end: -1
  }

  .col-start-auto\@lg {
    grid-column-start: auto
  }

  .col-end-auto\@lg {
    grid-column-end: auto
  }

  .row-start-auto\@lg {
    grid-row-start: auto
  }

  .row-end-auto\@lg {
    grid-row-end: auto
  }

  .grid-cols-1\@lg {
    grid-template-columns: repeat(1, minmax(0, 1fr))
  }

  .grid-cols-2\@lg {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .grid-cols-3\@lg {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }

  .grid-cols-4\@lg {
    grid-template-columns: repeat(4, minmax(0, 1fr))
  }

  .grid-cols-5\@lg {
    grid-template-columns: repeat(5, minmax(0, 1fr))
  }

  .grid-cols-6\@lg {
    grid-template-columns: repeat(6, minmax(0, 1fr))
  }

  .grid-cols-7\@lg {
    grid-template-columns: repeat(7, minmax(0, 1fr))
  }

  .grid-cols-8\@lg {
    grid-template-columns: repeat(8, minmax(0, 1fr))
  }

  .grid-cols-9\@lg {
    grid-template-columns: repeat(9, minmax(0, 1fr))
  }

  .grid-cols-10\@lg {
    grid-template-columns: repeat(10, minmax(0, 1fr))
  }

  .grid-cols-11\@lg {
    grid-template-columns: repeat(11, minmax(0, 1fr))
  }

  .grid-cols-12\@lg {
    grid-template-columns: repeat(12, minmax(0, 1fr))
  }

  .grid-cols-none\@lg {
    grid-template-columns: none
  }

  .col-auto\@lg {
    grid-column: auto
  }

  .col-span-1\@lg {
    grid-column: span 1/span 1
  }

  .col-span-2\@lg {
    grid-column: span 2/span 2
  }

  .col-span-3\@lg {
    grid-column: span 3/span 3
  }

  .col-span-4\@lg {
    grid-column: span 4/span 4
  }

  .col-span-5\@lg {
    grid-column: span 5/span 5
  }

  .col-span-6\@lg {
    grid-column: span 6/span 6
  }

  .col-span-7\@lg {
    grid-column: span 7/span 7
  }

  .col-span-8\@lg {
    grid-column: span 8/span 8
  }

  .col-span-9\@lg {
    grid-column: span 9/span 9
  }

  .col-span-10\@lg {
    grid-column: span 10/span 10
  }

  .col-span-11\@lg {
    grid-column: span 11/span 11
  }

  .col-span-12\@lg {
    grid-column: span 12/span 12
  }

  .col-span-full\@lg {
    grid-column: 1/-1
  }

  .grid-rows-1\@lg {
    grid-template-rows: repeat(1, minmax(0, 1fr))
  }

  .grid-rows-2\@lg {
    grid-template-rows: repeat(2, minmax(0, 1fr))
  }

  .grid-rows-3\@lg {
    grid-template-rows: repeat(3, minmax(0, 1fr))
  }

  .grid-rows-4\@lg {
    grid-template-rows: repeat(4, minmax(0, 1fr))
  }

  .grid-rows-5\@lg {
    grid-template-rows: repeat(5, minmax(0, 1fr))
  }

  .grid-rows-6\@lg {
    grid-template-rows: repeat(6, minmax(0, 1fr))
  }

  .grid-rows-7\@lg {
    grid-template-rows: repeat(7, minmax(0, 1fr))
  }

  .grid-rows-8\@lg {
    grid-template-rows: repeat(8, minmax(0, 1fr))
  }

  .grid-rows-9\@lg {
    grid-template-rows: repeat(9, minmax(0, 1fr))
  }

  .grid-rows-10\@lg {
    grid-template-rows: repeat(10, minmax(0, 1fr))
  }

  .grid-rows-11\@lg {
    grid-template-rows: repeat(11, minmax(0, 1fr))
  }

  .grid-rows-12\@lg {
    grid-template-rows: repeat(12, minmax(0, 1fr))
  }

  .grid-rows-none\@lg {
    grid-template-rows: none
  }

  .row-auto\@lg {
    grid-row: auto
  }

  .row-span-1\@lg {
    grid-row: span 1/span 1
  }

  .row-span-2\@lg {
    grid-row: span 2/span 2
  }

  .row-span-3\@lg {
    grid-row: span 3/span 3
  }

  .row-span-4\@lg {
    grid-row: span 4/span 4
  }

  .row-span-5\@lg {
    grid-row: span 5/span 5
  }

  .row-span-6\@lg {
    grid-row: span 6/span 6
  }

  .row-span-7\@lg {
    grid-row: span 7/span 7
  }

  .row-span-8\@lg {
    grid-row: span 8/span 8
  }

  .row-span-9\@lg {
    grid-row: span 9/span 9
  }

  .row-span-10\@lg {
    grid-row: span 10/span 10
  }

  .row-span-11\@lg {
    grid-row: span 11/span 11
  }

  .row-span-12\@lg {
    grid-row: span 12/span 12
  }

  .row-span-full\@lg {
    grid-row: 1/-1
  }

  .gap-5\@lg {
    gap: var(--size-5)
  }

  .gap-10\@lg {
    gap: var(--size-10)
  }

  .gap-15\@lg {
    gap: var(--size-15)
  }

  .gap-16\@lg {
    gap: var(--size-16)
  }

  .gap-20\@lg {
    gap: var(--size-20)
  }

  .gap-25\@lg {
    gap: var(--size-25)
  }

  .gap-30\@lg {
    gap: var(--size-30)
  }

  .gap-35\@lg {
    gap: var(--size-35)
  }

  .gap-40\@lg {
    gap: var(--size-40)
  }

  .gap-45\@lg {
    gap: var(--size-45)
  }

  .gap-50\@lg {
    gap: var(--size-50)
  }

  .gap-55\@lg {
    gap: var(--size-55)
  }

  .gap-60\@lg {
    gap: var(--size-60)
  }

  .gap-65\@lg {
    gap: var(--size-65)
  }

  .gap-70\@lg {
    gap: var(--size-70)
  }

  .gap-75\@lg {
    gap: var(--size-75)
  }

  .gap-80\@lg {
    gap: var(--size-80)
  }

  .gap-85\@lg {
    gap: var(--size-85)
  }

  .gap-90\@lg {
    gap: var(--size-90)
  }

  .gap-95\@lg {
    gap: var(--size-95)
  }

  .gap-100\@lg {
    gap: var(--size-100)
  }

  .gap-x-5\@lg {
    -moz-column-gap: var(--size-5);
    column-gap: var(--size-5)
  }

  .gap-x-10\@lg {
    -moz-column-gap: var(--size-10);
    column-gap: var(--size-10)
  }

  .gap-x-15\@lg {
    -moz-column-gap: var(--size-15);
    column-gap: var(--size-15)
  }

  .gap-x-16\@lg {
    -moz-column-gap: var(--size-16);
    column-gap: var(--size-16)
  }

  .gap-x-20\@lg {
    -moz-column-gap: var(--size-20);
    column-gap: var(--size-20)
  }

  .gap-x-25\@lg {
    -moz-column-gap: var(--size-25);
    column-gap: var(--size-25)
  }

  .gap-x-30\@lg {
    -moz-column-gap: var(--size-30);
    column-gap: var(--size-30)
  }

  .gap-x-35\@lg {
    -moz-column-gap: var(--size-35);
    column-gap: var(--size-35)
  }

  .gap-x-40\@lg {
    -moz-column-gap: var(--size-40);
    column-gap: var(--size-40)
  }

  .gap-x-45\@lg {
    -moz-column-gap: var(--size-45);
    column-gap: var(--size-45)
  }

  .gap-x-50\@lg {
    -moz-column-gap: var(--size-50);
    column-gap: var(--size-50)
  }

  .gap-x-55\@lg {
    -moz-column-gap: var(--size-55);
    column-gap: var(--size-55)
  }

  .gap-x-60\@lg {
    -moz-column-gap: var(--size-60);
    column-gap: var(--size-60)
  }

  .gap-x-65\@lg {
    -moz-column-gap: var(--size-65);
    column-gap: var(--size-65)
  }

  .gap-x-70\@lg {
    -moz-column-gap: var(--size-70);
    column-gap: var(--size-70)
  }

  .gap-x-75\@lg {
    -moz-column-gap: var(--size-75);
    column-gap: var(--size-75)
  }

  .gap-x-80\@lg {
    -moz-column-gap: var(--size-80);
    column-gap: var(--size-80)
  }

  .gap-x-85\@lg {
    -moz-column-gap: var(--size-85);
    column-gap: var(--size-85)
  }

  .gap-x-90\@lg {
    -moz-column-gap: var(--size-90);
    column-gap: var(--size-90)
  }

  .gap-x-95\@lg {
    -moz-column-gap: var(--size-95);
    column-gap: var(--size-95)
  }

  .gap-x-100\@lg {
    -moz-column-gap: var(--size-100);
    column-gap: var(--size-100)
  }

  .gap-y-5\@lg {
    row-gap: var(--size-5)
  }

  .gap-y-10\@lg {
    row-gap: var(--size-10)
  }

  .gap-y-15\@lg {
    row-gap: var(--size-15)
  }

  .gap-y-16\@lg {
    row-gap: var(--size-16)
  }

  .gap-y-20\@lg {
    row-gap: var(--size-20)
  }

  .gap-y-25\@lg {
    row-gap: var(--size-25)
  }

  .gap-y-30\@lg {
    row-gap: var(--size-30)
  }

  .gap-y-35\@lg {
    row-gap: var(--size-35)
  }

  .gap-y-40\@lg {
    row-gap: var(--size-40)
  }

  .gap-y-45\@lg {
    row-gap: var(--size-45)
  }

  .gap-y-50\@lg {
    row-gap: var(--size-50)
  }

  .gap-y-55\@lg {
    row-gap: var(--size-55)
  }

  .gap-y-60\@lg {
    row-gap: var(--size-60)
  }

  .gap-y-65\@lg {
    row-gap: var(--size-65)
  }

  .gap-y-70\@lg {
    row-gap: var(--size-70)
  }

  .gap-y-75\@lg {
    row-gap: var(--size-75)
  }

  .gap-y-80\@lg {
    row-gap: var(--size-80)
  }

  .gap-y-85\@lg {
    row-gap: var(--size-85)
  }

  .gap-y-90\@lg {
    row-gap: var(--size-90)
  }

  .gap-y-95\@lg {
    row-gap: var(--size-95)
  }

  .gap-y-100\@lg {
    row-gap: var(--size-100)
  }

  .m-auto\@lg {
    margin: auto
  }

  .mx-auto\@lg {
    margin-left: auto;
    margin-right: auto
  }

  .mt-auto\@lg {
    margin-top: auto
  }

  .me-auto\@lg {
    margin-right: auto
  }

  .ms-auto\@lg {
    margin-left: auto
  }

  .mt-0\@lg {
    margin-top: 0
  }

  .mt-10\@lg {
    margin-top: var(--size-10)
  }

  .mt-15\@lg {
    margin-top: var(--size-15)
  }

  .mt-16\@lg {
    margin-top: var(--size-16)
  }

  .mt-20\@lg {
    margin-top: var(--size-20)
  }

  .mt-30\@lg {
    margin-top: var(--size-30)
  }

  .mt-40\@lg {
    margin-top: var(--size-40)
  }

  .mt-50\@lg {
    margin-top: var(--size-50)
  }

  .mt-60\@lg {
    margin-top: var(--size-60)
  }

  .mt-70\@lg {
    margin-top: var(--size-70)
  }

  .mt-80\@lg {
    margin-top: var(--size-80)
  }

  .mt-90\@lg {
    margin-top: var(--size-90)
  }

  .mt-100\@lg {
    margin-top: var(--size-100)
  }

  .mb-0\@lg {
    margin-bottom: 0
  }

  .mb-10\@lg {
    margin-bottom: var(--size-10)
  }

  .mb-15\@lg {
    margin-bottom: var(--size-15)
  }

  .mb-16\@lg {
    margin-bottom: var(--size-16)
  }

  .mb-20\@lg {
    margin-bottom: var(--size-20)
  }

  .mb-30\@lg {
    margin-bottom: var(--size-30)
  }

  .mb-40\@lg {
    margin-bottom: var(--size-40)
  }

  .mb-50\@lg {
    margin-bottom: var(--size-50)
  }

  .mb-60\@lg {
    margin-bottom: var(--size-60)
  }

  .mb-70\@lg {
    margin-bottom: var(--size-70)
  }

  .mb-80\@lg {
    margin-bottom: var(--size-80)
  }

  .mb-90\@lg {
    margin-bottom: var(--size-90)
  }

  .mb-100\@lg {
    margin-bottom: var(--size-100)
  }

  .m-0\@lg {
    margin: 0
  }

  .p-10\@lg {
    padding: var(--size-10)
  }

  .p-15\@lg {
    padding: var(--size-15)
  }

  .p-16\@lg {
    padding: var(--size-16)
  }

  .p-20\@lg {
    padding: var(--size-20)
  }

  .p-30\@lg {
    padding: var(--size-30)
  }

  .p-40\@lg {
    padding: var(--size-40)
  }

  .p-50\@lg {
    padding: var(--size-50)
  }

  .py-0\@lg {
    padding-bottom: 0;
    padding-top: 0
  }

  .py-10\@lg {
    padding-bottom: var(--size-10);
    padding-top: var(--size-10)
  }

  .py-15\@lg {
    padding-bottom: var(--size-15);
    padding-top: var(--size-15)
  }

  .py-16\@lg {
    padding-bottom: var(--size-16);
    padding-top: var(--size-16)
  }

  .py-20\@lg {
    padding-bottom: var(--size-20);
    padding-top: var(--size-20)
  }

  .py-30\@lg {
    padding-bottom: var(--size-30);
    padding-top: var(--size-30)
  }

  .py-40\@lg {
    padding-bottom: var(--size-40);
    padding-top: var(--size-40)
  }

  .py-50\@lg {
    padding-bottom: var(--size-50);
    padding-top: var(--size-50)
  }

  .px-0\@lg {
    padding-left: 0;
    padding-right: 0
  }

  .px-10\@lg {
    padding-left: var(--size-10);
    padding-right: var(--size-10)
  }

  .px-15\@lg {
    padding-left: var(--size-15);
    padding-right: var(--size-15)
  }

  .px-16\@lg {
    padding-left: var(--size-16);
    padding-right: var(--size-16)
  }

  .px-20\@lg {
    padding-left: var(--size-20);
    padding-right: var(--size-20)
  }

  .px-30\@lg {
    padding-left: var(--size-30);
    padding-right: var(--size-30)
  }

  .px-40\@lg {
    padding-left: var(--size-40);
    padding-right: var(--size-40)
  }

  .px-50\@lg {
    padding-left: var(--size-50);
    padding-right: var(--size-50)
  }

  .pt-0\@lg {
    padding-top: 0
  }

  .pt-10\@lg {
    padding-top: var(--size-10)
  }

  .pt-15\@lg {
    padding-top: var(--size-15)
  }

  .pt-16\@lg {
    padding-top: var(--size-16)
  }

  .pt-20\@lg {
    padding-top: var(--size-20)
  }

  .pt-30\@lg {
    padding-top: var(--size-30)
  }

  .pt-40\@lg {
    padding-top: var(--size-40)
  }

  .pt-50\@lg {
    padding-top: var(--size-50)
  }

  .pt-60\@lg {
    padding-top: var(--size-60)
  }

  .pt-70\@lg {
    padding-top: var(--size-70)
  }

  .pt-80\@lg {
    padding-top: var(--size-80)
  }

  .pt-90\@lg {
    padding-top: var(--size-90)
  }

  .pt-100\@lg {
    padding-top: var(--size-100)
  }

  .pb-0\@lg {
    padding-bottom: 0
  }

  .pb-10\@lg {
    padding-bottom: var(--size-10)
  }

  .pb-15\@lg {
    padding-bottom: var(--size-15)
  }

  .pb-16\@lg {
    padding-bottom: var(--size-16)
  }

  .pb-20\@lg {
    padding-bottom: var(--size-20)
  }

  .pb-30\@lg {
    padding-bottom: var(--size-30)
  }

  .pb-40\@lg {
    padding-bottom: var(--size-40)
  }

  .pb-50\@lg {
    padding-bottom: var(--size-50)
  }

  .pb-60\@lg {
    padding-bottom: var(--size-60)
  }

  .pb-70\@lg {
    padding-bottom: var(--size-70)
  }

  .pb-80\@lg {
    padding-bottom: var(--size-80)
  }

  .pb-90\@lg {
    padding-bottom: var(--size-90)
  }

  .pb-100\@lg {
    padding-bottom: var(--size-100)
  }

  .h1\@lg {
    font-size: var(--h1-size)
  }

  .h2\@lg {
    font-size: var(--h2-size)
  }

  .h3\@lg {
    font-size: var(--h3-size)
  }

  .h4\@lg {
    font-size: var(--h4-size)
  }

  .h5\@lg {
    font-size: var(--h5-size)
  }

  .h6\@lg {
    font-size: var(--h6-size)
  }

  .text-xl\@lg {
    font-size: var(--text-xl)
  }

  .text-lg\@lg {
    font-size: var(--text-lg)
  }

  .text-md\@lg {
    font-size: var(--text-md)
  }

  .text-sm\@lg {
    font-size: var(--text-sm)
  }

  .text-xs\@lg {
    font-size: var(--text-xs)
  }

  .rounded-circle\@lg {
    border-radius: 50%
  }

  .rounded-5\@lg {
    border-radius: 5px
  }

  .rounded-10\@lg {
    border-radius: 10px
  }

  .rounded-15\@lg {
    border-radius: 15px
  }

  .rounded-20\@lg {
    border-radius: 20px
  }

  .rounded-25\@lg {
    border-radius: 25px
  }

  .rounded-30\@lg {
    border-radius: 30px
  }
}

@media (min-width:90rem) {
  .text-uppercase\@xl {
    text-transform: uppercase
  }

  .text-capitalize\@xl {
    text-transform: capitalize
  }

  .text-wrap\@xl {
    white-space: normal
  }

  .text-nowrap\@xl {
    white-space: nowrap
  }

  .w-auto\@xl {
    width: auto
  }

  .w-100\@xl {
    width: 100%
  }

  .h-100\@xl {
    height: 100%
  }

  .d-block\@xl {
    display: block
  }

  .d-none\@xl {
    display: none
  }

  .d-inline\@xl {
    display: inline
  }

  .d-inline-block\@xl {
    display: inline-block
  }

  .d-grid\@xl {
    display: grid
  }

  .d-flex\@xl {
    display: flex
  }

  .d-flex-center\@xl {
    align-items: center;
    display: flex;
    justify-content: center
  }

  .d-inline-flex\@xl {
    display: inline-flex
  }

  .d-inline-flex-center\@xl {
    align-items: center;
    display: inline-flex;
    justify-content: center
  }

  .position-absolute\@xl {
    position: absolute
  }

  .sticky-top\@xl {
    position: sticky;
    top: 0;
    z-index: 5
  }

  .text-center\@xl {
    text-align: center
  }

  .text-start\@xl {
    text-align: left
  }

  .text-end\@xl {
    text-align: right
  }

  .flex-fill\@xl {
    flex: 1 1 auto
  }

  .flex-row\@xl {
    flex-direction: row
  }

  .flex-column\@xl {
    flex-direction: column
  }

  .flex-row-reverse\@xl {
    flex-direction: row-reverse
  }

  .flex-column-reverse\@xl {
    flex-direction: column-reverse
  }

  .flex-grow-0\@xl {
    flex-grow: 0
  }

  .flex-grow-1\@xl {
    flex-grow: 1
  }

  .flex-shrink-0\@xl {
    flex-shrink: 0
  }

  .flex-shrink-1\@xl {
    flex-shrink: 1
  }

  .flex-wrap\@xl {
    flex-wrap: wrap
  }

  .flex-nowrap\@xl {
    flex-wrap: nowrap
  }

  .flex-wrap-reverse\@xl {
    flex-wrap: wrap-reverse
  }

  .justify-content-start\@xl {
    justify-content: flex-start
  }

  .justify-content-end\@xl {
    justify-content: flex-end
  }

  .justify-content-center\@xl {
    justify-content: center
  }

  .justify-content-between\@xl {
    justify-content: space-between
  }

  .justify-content-around\@xl {
    justify-content: space-around
  }

  .justify-content-evenly\@xl {
    justify-content: space-evenly
  }

  .align-items-start\@xl {
    align-items: flex-start
  }

  .align-items-end\@xl {
    align-items: flex-end
  }

  .align-items-center\@xl {
    align-items: center
  }

  .align-items-baseline\@xl {
    align-items: baseline
  }

  .align-items-stretch\@xl {
    align-items: stretch
  }

  .align-content-start\@xl {
    align-content: flex-start
  }

  .align-content-end\@xl {
    align-content: flex-end
  }

  .align-content-center\@xl {
    align-content: center
  }

  .align-content-between\@xl {
    align-content: space-between
  }

  .align-content-around\@xl {
    align-content: space-around
  }

  .align-content-stretch\@xl {
    align-content: stretch
  }

  .align-self-auto\@xl {
    align-self: auto
  }

  .align-self-start\@xl {
    align-self: flex-start
  }

  .align-self-end\@xl {
    align-self: flex-end
  }

  .align-self-center\@xl {
    align-self: center
  }

  .align-self-baseline\@xl {
    align-self: baseline
  }

  .align-self-stretch\@xl {
    align-self: stretch
  }

  .order-1\@xl {
    order: 1
  }

  .order-2\@xl {
    order: 2
  }

  .order-3\@xl {
    order: 3
  }

  .order-4\@xl {
    order: 4
  }

  .order-5\@xl {
    order: 5
  }

  .order-last\@xl {
    order: 6
  }

  .order-first\@xl {
    order: -1
  }

  .grid-auto-xs\@xl {
    --col-min-width: 8rem
  }

  .grid-auto-sm\@xl {
    --col-min-width: 10rem
  }

  .grid-auto-md\@xl {
    --col-min-width: 15rem
  }

  .grid-auto-lg\@xl {
    --col-min-width: 20rem
  }

  .grid-auto-xl\@xl {
    --col-min-width: 25rem
  }

  .grid-auto-cols\@xl {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr))
  }

  .col-1\@xl {
    --span: 1
  }

  .col-start-1\@xl {
    grid-column-start: 1
  }

  .col-end-2\@xl {
    grid-column-end: 2
  }

  .row-1\@xl {
    grid-row: span 1/span 1
  }

  .row-start-1\@xl {
    grid-row-start: 1
  }

  .row-end-2\@xl {
    grid-row-end: 2
  }

  .col-2\@xl {
    --span: 2
  }

  .col-start-2\@xl {
    grid-column-start: 2
  }

  .col-end-3\@xl {
    grid-column-end: 3
  }

  .row-2\@xl {
    grid-row: span 2/span 2
  }

  .row-start-2\@xl {
    grid-row-start: 2
  }

  .row-end-3\@xl {
    grid-row-end: 3
  }

  .col-3\@xl {
    --span: 3
  }

  .col-start-3\@xl {
    grid-column-start: 3
  }

  .col-end-4\@xl {
    grid-column-end: 4
  }

  .row-3\@xl {
    grid-row: span 3/span 3
  }

  .row-start-3\@xl {
    grid-row-start: 3
  }

  .row-end-4\@xl {
    grid-row-end: 4
  }

  .col-4\@xl {
    --span: 4
  }

  .col-start-4\@xl {
    grid-column-start: 4
  }

  .col-end-5\@xl {
    grid-column-end: 5
  }

  .row-4\@xl {
    grid-row: span 4/span 4
  }

  .row-start-4\@xl {
    grid-row-start: 4
  }

  .row-end-5\@xl {
    grid-row-end: 5
  }

  .col-5\@xl {
    --span: 5
  }

  .col-start-5\@xl {
    grid-column-start: 5
  }

  .col-end-6\@xl {
    grid-column-end: 6
  }

  .row-5\@xl {
    grid-row: span 5/span 5
  }

  .row-start-5\@xl {
    grid-row-start: 5
  }

  .row-end-6\@xl {
    grid-row-end: 6
  }

  .col-6\@xl {
    --span: 6
  }

  .col-start-6\@xl {
    grid-column-start: 6
  }

  .col-end-7\@xl {
    grid-column-end: 7
  }

  .row-6\@xl {
    grid-row: span 6/span 6
  }

  .row-start-6\@xl {
    grid-row-start: 6
  }

  .row-end-7\@xl {
    grid-row-end: 7
  }

  .col-7\@xl {
    --span: 7
  }

  .col-start-7\@xl {
    grid-column-start: 7
  }

  .col-end-8\@xl {
    grid-column-end: 8
  }

  .row-7\@xl {
    grid-row: span 7/span 7
  }

  .row-start-7\@xl {
    grid-row-start: 7
  }

  .row-end-8\@xl {
    grid-row-end: 8
  }

  .col-8\@xl {
    --span: 8
  }

  .col-start-8\@xl {
    grid-column-start: 8
  }

  .col-end-9\@xl {
    grid-column-end: 9
  }

  .row-8\@xl {
    grid-row: span 8/span 8
  }

  .row-start-8\@xl {
    grid-row-start: 8
  }

  .row-end-9\@xl {
    grid-row-end: 9
  }

  .col-9\@xl {
    --span: 9
  }

  .col-start-9\@xl {
    grid-column-start: 9
  }

  .col-end-10\@xl {
    grid-column-end: 10
  }

  .row-9\@xl {
    grid-row: span 9/span 9
  }

  .row-start-9\@xl {
    grid-row-start: 9
  }

  .row-end-10\@xl {
    grid-row-end: 10
  }

  .col-10\@xl {
    --span: 10
  }

  .col-start-10\@xl {
    grid-column-start: 10
  }

  .col-end-11\@xl {
    grid-column-end: 11
  }

  .row-10\@xl {
    grid-row: span 10/span 10
  }

  .row-start-10\@xl {
    grid-row-start: 10
  }

  .row-end-11\@xl {
    grid-row-end: 11
  }

  .col-11\@xl {
    --span: 11
  }

  .col-start-11\@xl {
    grid-column-start: 11
  }

  .col-end-12\@xl {
    grid-column-end: 12
  }

  .row-11\@xl {
    grid-row: span 11/span 11
  }

  .row-start-11\@xl {
    grid-row-start: 11
  }

  .row-end-12\@xl {
    grid-row-end: 12
  }

  .col-12\@xl {
    --span: 12
  }

  .col-start-12\@xl {
    grid-column-start: 12
  }

  .col-end-13\@xl {
    grid-column-end: 13
  }

  .row-12\@xl {
    grid-row: span 12/span 12
  }

  .row-start-12\@xl {
    grid-row-start: 12
  }

  .row-end-13\@xl {
    grid-row-end: 13
  }

  .col-start\@xl {
    grid-column-start: 1
  }

  .col-end\@xl {
    grid-column-end: -1
  }

  .row-start\@xl {
    grid-row-start: 1
  }

  .row-end\@xl {
    grid-row-end: -1
  }

  .col-start-auto\@xl {
    grid-column-start: auto
  }

  .col-end-auto\@xl {
    grid-column-end: auto
  }

  .row-start-auto\@xl {
    grid-row-start: auto
  }

  .row-end-auto\@xl {
    grid-row-end: auto
  }

  .grid-cols-1\@xl {
    grid-template-columns: repeat(1, minmax(0, 1fr))
  }

  .grid-cols-2\@xl {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .grid-cols-3\@xl {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }

  .grid-cols-4\@xl {
    grid-template-columns: repeat(4, minmax(0, 1fr))
  }

  .grid-cols-5\@xl {
    grid-template-columns: repeat(5, minmax(0, 1fr))
  }

  .grid-cols-6\@xl {
    grid-template-columns: repeat(6, minmax(0, 1fr))
  }

  .grid-cols-7\@xl {
    grid-template-columns: repeat(7, minmax(0, 1fr))
  }

  .grid-cols-8\@xl {
    grid-template-columns: repeat(8, minmax(0, 1fr))
  }

  .grid-cols-9\@xl {
    grid-template-columns: repeat(9, minmax(0, 1fr))
  }

  .grid-cols-10\@xl {
    grid-template-columns: repeat(10, minmax(0, 1fr))
  }

  .grid-cols-11\@xl {
    grid-template-columns: repeat(11, minmax(0, 1fr))
  }

  .grid-cols-12\@xl {
    grid-template-columns: repeat(12, minmax(0, 1fr))
  }

  .grid-cols-none\@xl {
    grid-template-columns: none
  }

  .col-auto\@xl {
    grid-column: auto
  }

  .col-span-1\@xl {
    grid-column: span 1/span 1
  }

  .col-span-2\@xl {
    grid-column: span 2/span 2
  }

  .col-span-3\@xl {
    grid-column: span 3/span 3
  }

  .col-span-4\@xl {
    grid-column: span 4/span 4
  }

  .col-span-5\@xl {
    grid-column: span 5/span 5
  }

  .col-span-6\@xl {
    grid-column: span 6/span 6
  }

  .col-span-7\@xl {
    grid-column: span 7/span 7
  }

  .col-span-8\@xl {
    grid-column: span 8/span 8
  }

  .col-span-9\@xl {
    grid-column: span 9/span 9
  }

  .col-span-10\@xl {
    grid-column: span 10/span 10
  }

  .col-span-11\@xl {
    grid-column: span 11/span 11
  }

  .col-span-12\@xl {
    grid-column: span 12/span 12
  }

  .col-span-full\@xl {
    grid-column: 1/-1
  }

  .grid-rows-1\@xl {
    grid-template-rows: repeat(1, minmax(0, 1fr))
  }

  .grid-rows-2\@xl {
    grid-template-rows: repeat(2, minmax(0, 1fr))
  }

  .grid-rows-3\@xl {
    grid-template-rows: repeat(3, minmax(0, 1fr))
  }

  .grid-rows-4\@xl {
    grid-template-rows: repeat(4, minmax(0, 1fr))
  }

  .grid-rows-5\@xl {
    grid-template-rows: repeat(5, minmax(0, 1fr))
  }

  .grid-rows-6\@xl {
    grid-template-rows: repeat(6, minmax(0, 1fr))
  }

  .grid-rows-7\@xl {
    grid-template-rows: repeat(7, minmax(0, 1fr))
  }

  .grid-rows-8\@xl {
    grid-template-rows: repeat(8, minmax(0, 1fr))
  }

  .grid-rows-9\@xl {
    grid-template-rows: repeat(9, minmax(0, 1fr))
  }

  .grid-rows-10\@xl {
    grid-template-rows: repeat(10, minmax(0, 1fr))
  }

  .grid-rows-11\@xl {
    grid-template-rows: repeat(11, minmax(0, 1fr))
  }

  .grid-rows-12\@xl {
    grid-template-rows: repeat(12, minmax(0, 1fr))
  }

  .grid-rows-none\@xl {
    grid-template-rows: none
  }

  .row-auto\@xl {
    grid-row: auto
  }

  .row-span-1\@xl {
    grid-row: span 1/span 1
  }

  .row-span-2\@xl {
    grid-row: span 2/span 2
  }

  .row-span-3\@xl {
    grid-row: span 3/span 3
  }

  .row-span-4\@xl {
    grid-row: span 4/span 4
  }

  .row-span-5\@xl {
    grid-row: span 5/span 5
  }

  .row-span-6\@xl {
    grid-row: span 6/span 6
  }

  .row-span-7\@xl {
    grid-row: span 7/span 7
  }

  .row-span-8\@xl {
    grid-row: span 8/span 8
  }

  .row-span-9\@xl {
    grid-row: span 9/span 9
  }

  .row-span-10\@xl {
    grid-row: span 10/span 10
  }

  .row-span-11\@xl {
    grid-row: span 11/span 11
  }

  .row-span-12\@xl {
    grid-row: span 12/span 12
  }

  .row-span-full\@xl {
    grid-row: 1/-1
  }

  .gap-5\@xl {
    gap: var(--size-5)
  }

  .gap-10\@xl {
    gap: var(--size-10)
  }

  .gap-15\@xl {
    gap: var(--size-15)
  }

  .gap-16\@xl {
    gap: var(--size-16)
  }

  .gap-20\@xl {
    gap: var(--size-20)
  }

  .gap-25\@xl {
    gap: var(--size-25)
  }

  .gap-30\@xl {
    gap: var(--size-30)
  }

  .gap-35\@xl {
    gap: var(--size-35)
  }

  .gap-40\@xl {
    gap: var(--size-40)
  }

  .gap-45\@xl {
    gap: var(--size-45)
  }

  .gap-50\@xl {
    gap: var(--size-50)
  }

  .gap-55\@xl {
    gap: var(--size-55)
  }

  .gap-60\@xl {
    gap: var(--size-60)
  }

  .gap-65\@xl {
    gap: var(--size-65)
  }

  .gap-70\@xl {
    gap: var(--size-70)
  }

  .gap-75\@xl {
    gap: var(--size-75)
  }

  .gap-80\@xl {
    gap: var(--size-80)
  }

  .gap-85\@xl {
    gap: var(--size-85)
  }

  .gap-90\@xl {
    gap: var(--size-90)
  }

  .gap-95\@xl {
    gap: var(--size-95)
  }

  .gap-100\@xl {
    gap: var(--size-100)
  }

  .gap-x-5\@xl {
    -moz-column-gap: var(--size-5);
    column-gap: var(--size-5)
  }

  .gap-x-10\@xl {
    -moz-column-gap: var(--size-10);
    column-gap: var(--size-10)
  }

  .gap-x-15\@xl {
    -moz-column-gap: var(--size-15);
    column-gap: var(--size-15)
  }

  .gap-x-16\@xl {
    -moz-column-gap: var(--size-16);
    column-gap: var(--size-16)
  }

  .gap-x-20\@xl {
    -moz-column-gap: var(--size-20);
    column-gap: var(--size-20)
  }

  .gap-x-25\@xl {
    -moz-column-gap: var(--size-25);
    column-gap: var(--size-25)
  }

  .gap-x-30\@xl {
    -moz-column-gap: var(--size-30);
    column-gap: var(--size-30)
  }

  .gap-x-35\@xl {
    -moz-column-gap: var(--size-35);
    column-gap: var(--size-35)
  }

  .gap-x-40\@xl {
    -moz-column-gap: var(--size-40);
    column-gap: var(--size-40)
  }

  .gap-x-45\@xl {
    -moz-column-gap: var(--size-45);
    column-gap: var(--size-45)
  }

  .gap-x-50\@xl {
    -moz-column-gap: var(--size-50);
    column-gap: var(--size-50)
  }

  .gap-x-55\@xl {
    -moz-column-gap: var(--size-55);
    column-gap: var(--size-55)
  }

  .gap-x-60\@xl {
    -moz-column-gap: var(--size-60);
    column-gap: var(--size-60)
  }

  .gap-x-65\@xl {
    -moz-column-gap: var(--size-65);
    column-gap: var(--size-65)
  }

  .gap-x-70\@xl {
    -moz-column-gap: var(--size-70);
    column-gap: var(--size-70)
  }

  .gap-x-75\@xl {
    -moz-column-gap: var(--size-75);
    column-gap: var(--size-75)
  }

  .gap-x-80\@xl {
    -moz-column-gap: var(--size-80);
    column-gap: var(--size-80)
  }

  .gap-x-85\@xl {
    -moz-column-gap: var(--size-85);
    column-gap: var(--size-85)
  }

  .gap-x-90\@xl {
    -moz-column-gap: var(--size-90);
    column-gap: var(--size-90)
  }

  .gap-x-95\@xl {
    -moz-column-gap: var(--size-95);
    column-gap: var(--size-95)
  }

  .gap-x-100\@xl {
    -moz-column-gap: var(--size-100);
    column-gap: var(--size-100)
  }

  .gap-y-5\@xl {
    row-gap: var(--size-5)
  }

  .gap-y-10\@xl {
    row-gap: var(--size-10)
  }

  .gap-y-15\@xl {
    row-gap: var(--size-15)
  }

  .gap-y-16\@xl {
    row-gap: var(--size-16)
  }

  .gap-y-20\@xl {
    row-gap: var(--size-20)
  }

  .gap-y-25\@xl {
    row-gap: var(--size-25)
  }

  .gap-y-30\@xl {
    row-gap: var(--size-30)
  }

  .gap-y-35\@xl {
    row-gap: var(--size-35)
  }

  .gap-y-40\@xl {
    row-gap: var(--size-40)
  }

  .gap-y-45\@xl {
    row-gap: var(--size-45)
  }

  .gap-y-50\@xl {
    row-gap: var(--size-50)
  }

  .gap-y-55\@xl {
    row-gap: var(--size-55)
  }

  .gap-y-60\@xl {
    row-gap: var(--size-60)
  }

  .gap-y-65\@xl {
    row-gap: var(--size-65)
  }

  .gap-y-70\@xl {
    row-gap: var(--size-70)
  }

  .gap-y-75\@xl {
    row-gap: var(--size-75)
  }

  .gap-y-80\@xl {
    row-gap: var(--size-80)
  }

  .gap-y-85\@xl {
    row-gap: var(--size-85)
  }

  .gap-y-90\@xl {
    row-gap: var(--size-90)
  }

  .gap-y-95\@xl {
    row-gap: var(--size-95)
  }

  .gap-y-100\@xl {
    row-gap: var(--size-100)
  }

  .m-auto\@xl {
    margin: auto
  }

  .mx-auto\@xl {
    margin-left: auto;
    margin-right: auto
  }

  .mt-auto\@xl {
    margin-top: auto
  }

  .me-auto\@xl {
    margin-right: auto
  }

  .ms-auto\@xl {
    margin-left: auto
  }

  .mt-0\@xl {
    margin-top: 0
  }

  .mt-10\@xl {
    margin-top: var(--size-10)
  }

  .mt-15\@xl {
    margin-top: var(--size-15)
  }

  .mt-16\@xl {
    margin-top: var(--size-16)
  }

  .mt-20\@xl {
    margin-top: var(--size-20)
  }

  .mt-30\@xl {
    margin-top: var(--size-30)
  }

  .mt-40\@xl {
    margin-top: var(--size-40)
  }

  .mt-50\@xl {
    margin-top: var(--size-50)
  }

  .mt-60\@xl {
    margin-top: var(--size-60)
  }

  .mt-70\@xl {
    margin-top: var(--size-70)
  }

  .mt-80\@xl {
    margin-top: var(--size-80)
  }

  .mt-90\@xl {
    margin-top: var(--size-90)
  }

  .mt-100\@xl {
    margin-top: var(--size-100)
  }

  .mb-0\@xl {
    margin-bottom: 0
  }

  .mb-10\@xl {
    margin-bottom: var(--size-10)
  }

  .mb-15\@xl {
    margin-bottom: var(--size-15)
  }

  .mb-16\@xl {
    margin-bottom: var(--size-16)
  }

  .mb-20\@xl {
    margin-bottom: var(--size-20)
  }

  .mb-30\@xl {
    margin-bottom: var(--size-30)
  }

  .mb-40\@xl {
    margin-bottom: var(--size-40)
  }

  .mb-50\@xl {
    margin-bottom: var(--size-50)
  }

  .mb-60\@xl {
    margin-bottom: var(--size-60)
  }

  .mb-70\@xl {
    margin-bottom: var(--size-70)
  }

  .mb-80\@xl {
    margin-bottom: var(--size-80)
  }

  .mb-90\@xl {
    margin-bottom: var(--size-90)
  }

  .mb-100\@xl {
    margin-bottom: var(--size-100)
  }

  .m-0\@xl {
    margin: 0
  }

  .p-10\@xl {
    padding: var(--size-10)
  }

  .p-15\@xl {
    padding: var(--size-15)
  }

  .p-16\@xl {
    padding: var(--size-16)
  }

  .p-20\@xl {
    padding: var(--size-20)
  }

  .p-30\@xl {
    padding: var(--size-30)
  }

  .p-40\@xl {
    padding: var(--size-40)
  }

  .p-50\@xl {
    padding: var(--size-50)
  }

  .py-0\@xl {
    padding-bottom: 0;
    padding-top: 0
  }

  .py-10\@xl {
    padding-bottom: var(--size-10);
    padding-top: var(--size-10)
  }

  .py-15\@xl {
    padding-bottom: var(--size-15);
    padding-top: var(--size-15)
  }

  .py-16\@xl {
    padding-bottom: var(--size-16);
    padding-top: var(--size-16)
  }

  .py-20\@xl {
    padding-bottom: var(--size-20);
    padding-top: var(--size-20)
  }

  .py-30\@xl {
    padding-bottom: var(--size-30);
    padding-top: var(--size-30)
  }

  .py-40\@xl {
    padding-bottom: var(--size-40);
    padding-top: var(--size-40)
  }

  .py-50\@xl {
    padding-bottom: var(--size-50);
    padding-top: var(--size-50)
  }

  .px-0\@xl {
    padding-left: 0;
    padding-right: 0
  }

  .px-10\@xl {
    padding-left: var(--size-10);
    padding-right: var(--size-10)
  }

  .px-15\@xl {
    padding-left: var(--size-15);
    padding-right: var(--size-15)
  }

  .px-16\@xl {
    padding-left: var(--size-16);
    padding-right: var(--size-16)
  }

  .px-20\@xl {
    padding-left: var(--size-20);
    padding-right: var(--size-20)
  }

  .px-30\@xl {
    padding-left: var(--size-30);
    padding-right: var(--size-30)
  }

  .px-40\@xl {
    padding-left: var(--size-40);
    padding-right: var(--size-40)
  }

  .px-50\@xl {
    padding-left: var(--size-50);
    padding-right: var(--size-50)
  }

  .pt-0\@xl {
    padding-top: 0
  }

  .pt-10\@xl {
    padding-top: var(--size-10)
  }

  .pt-15\@xl {
    padding-top: var(--size-15)
  }

  .pt-16\@xl {
    padding-top: var(--size-16)
  }

  .pt-20\@xl {
    padding-top: var(--size-20)
  }

  .pt-30\@xl {
    padding-top: var(--size-30)
  }

  .pt-40\@xl {
    padding-top: var(--size-40)
  }

  .pt-50\@xl {
    padding-top: var(--size-50)
  }

  .pt-60\@xl {
    padding-top: var(--size-60)
  }

  .pt-70\@xl {
    padding-top: var(--size-70)
  }

  .pt-80\@xl {
    padding-top: var(--size-80)
  }

  .pt-90\@xl {
    padding-top: var(--size-90)
  }

  .pt-100\@xl {
    padding-top: var(--size-100)
  }

  .pb-0\@xl {
    padding-bottom: 0
  }

  .pb-10\@xl {
    padding-bottom: var(--size-10)
  }

  .pb-15\@xl {
    padding-bottom: var(--size-15)
  }

  .pb-16\@xl {
    padding-bottom: var(--size-16)
  }

  .pb-20\@xl {
    padding-bottom: var(--size-20)
  }

  .pb-30\@xl {
    padding-bottom: var(--size-30)
  }

  .pb-40\@xl {
    padding-bottom: var(--size-40)
  }

  .pb-50\@xl {
    padding-bottom: var(--size-50)
  }

  .pb-60\@xl {
    padding-bottom: var(--size-60)
  }

  .pb-70\@xl {
    padding-bottom: var(--size-70)
  }

  .pb-80\@xl {
    padding-bottom: var(--size-80)
  }

  .pb-90\@xl {
    padding-bottom: var(--size-90)
  }

  .pb-100\@xl {
    padding-bottom: var(--size-100)
  }

  .h1\@xl {
    font-size: var(--h1-size)
  }

  .h2\@xl {
    font-size: var(--h2-size)
  }

  .h3\@xl {
    font-size: var(--h3-size)
  }

  .h4\@xl {
    font-size: var(--h4-size)
  }

  .h5\@xl {
    font-size: var(--h5-size)
  }

  .h6\@xl {
    font-size: var(--h6-size)
  }

  .text-xl\@xl {
    font-size: var(--text-xl)
  }

  .text-lg\@xl {
    font-size: var(--text-lg)
  }

  .text-md\@xl {
    font-size: var(--text-md)
  }

  .text-sm\@xl {
    font-size: var(--text-sm)
  }

  .text-xs\@xl {
    font-size: var(--text-xs)
  }

  .rounded-circle\@xl {
    border-radius: 50%
  }

  .rounded-5\@xl {
    border-radius: 5px
  }

  .rounded-10\@xl {
    border-radius: 10px
  }

  .rounded-15\@xl {
    border-radius: 15px
  }

  .rounded-20\@xl {
    border-radius: 20px
  }

  .rounded-25\@xl {
    border-radius: 25px
  }

  .rounded-30\@xl {
    border-radius: 30px
  }
}

.box-nav {
  padding-bottom: 30px;
  padding-top: 10px
}

.menu-1 {
  align-items: center;
  display: flex;
  justify-content: space-between;

  & li.active {
    & a {
      color: var(--blue);
      font-weight: 700;
      position: relative;

      &:after {
        background: var(--blue);
        bottom: 0;
        content: "";
        display: block;
        height: 2px;
        left: 50%;
        position: absolute;
        transform: translateX(-50%);
        width: 20px
      }
    }
  }

  & a {
    color: inherit;
    font-weight: 500;
    padding: 21px 8px 42px;
    text-decoration: none;
    transition: all .2s ease;

    &:hover {
      color: var(--blue)
    }
  }
}

.menu-footer {
  align-items: center;
  display: flex;
  flex-wrap: wrap;

  & a {
    color: var(--white);
    display: inline-block;
    padding-inline: 20px;
    text-decoration: none
  }
}

.menu-footer li:first-child a {
  padding-left: 0
}

.menu-footer li:last-child a {
  padding-right: 0
}

.menu-footer li:not(:last-child):after {
  background-color: var(--blue);
  border-radius: 50%;
  content: "";
  display: inline-block;
  height: 5px;
  vertical-align: middle;
  width: 5px
}

.box-header-title {
  font-size: 40px
}

.box-header-lists li {
  font-weight: 600;
  padding-left: 30px
}

.lists-check li {
  background-image: url(../img/svg/check-circle-fill.svg)
}

.lists-check li,
.lists-check-white li {
  background-position: 0 50%;
  background-repeat: no-repeat;
  background-size: 20px
}

.lists-check-white li {
  background-image: url(../img/svg/check-circle-fill-white.svg)
}

.gap-y-7 {
  row-gap: 7px
}

.gap-y-8 {
  row-gap: 8px
}

.gap-y-13 {
  row-gap: 13px
}

.border-blue {
  border: 2px solid var(--blue)
}

.list-decimal li {
  background-position: 0 5px;
  border-bottom: 1px solid hsla(0, 0%, 100%, .1);
  padding-bottom: 10px;
  padding-left: 30px
}

.a-footer {
  background-color: #181021;
  padding-bottom: 40px;
  padding-top: 50px
}

.lists-information a {
  color: var(--white);
  text-decoration: none
}

.g-dropdown_hidden {
  display: none;
  opacity: 0;
  pointer-events: none;
  visibility: hidden
}

.g-dropdown--js.open {
  display: block;
  opacity: 1;
  pointer-events: auto;
  visibility: visible
}

.box-contacts .btn-one {
  left: 42px;
  max-width: 175px;
  top: calc(100% + 10px);
  width: 100%
}

.box-tabs .btn-one {
  flex: 0 1 232px;

  & svg {
    color: #0c6ad1
  }
}

.box-tabs .btn-one.active {
  & svg {
    color: #fff
  }
}

.tab-button.active {
  background-color: var(--blue);
  color: var(--white)
}

.rating {
  font-size: 20px
}

.rating .star {
  height: 15px;
  width: 15px
}

.star.filled {
  fill: var(--yellow)
}

.box-btn-marg {
  margin-top: -30px;
  position: relative;
  z-index: 1
}

.arrow-right {
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1
}

.btn-burger {
  background-color: var(--blue);
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: 43.65px;
  justify-content: space-between;
  padding: 10px;
  position: relative;
  width: 50px
}

.btn-burger span {
  background-color: #fff;
  border-radius: 20px;
  display: inline-block;
  height: 3px;
  transition: all .5s ease;
  width: 100%
}

.hamburger7 span {
  transform-origin: left
}

.hamburger7.active span:first-of-type {
  transform: rotate(35deg);
  width: 35px
}

.hamburger7.active span:nth-of-type(2) {
  width: 0
}

.hamburger7.active span:nth-of-type(3) {
  transform: rotate(-35deg);
  width: 35px
}

.form_select {
  background: #fff;
  height: 50px;
  position: relative;
  width: 100%
}

.form_select:before {
  background-color: #ccc;
  display: block;
  height: 50px;
  right: 35px;
  top: 1px;
  width: 1px
}

.form_select:after,
.form_select:before {
  content: "";
  pointer-events: none;
  position: absolute;
  z-index: 1
}

.form_select:after {
  background-image: url(../img/svg/chevron-down.svg);
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: cover;
  height: 20px;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px
}

.form_select select {
  -webkit-appearance: none;
  -moz-appearance: none;
  background: none;
  border: 2px solid rgba(0, 0, 0, .08);
  border-radius: 5px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, .1), 0 4px 8px rgba(0, 0, 0, .06);
  color: #000;
  font-size: 20px;
  height: 100%;
  padding-left: 10px;
  width: 100%
}

.form_select:focus {
  border-color: blue;
  outline: 0
}

.form_select select:hover {
  cursor: pointer
}

.form-inputbox input[type=radio] {
  display: none
}

.form-inputbox label.form-inputbox-radio {
  cursor: pointer;
  display: inline-block;
  line-height: 18px;
  margin-right: 0;
  padding-left: 25px;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none
}

.form-inputbox label.form-inputbox-radio:before {
  border: 2px solid var(--blue);
  border-radius: 50%;
  content: "";
  display: inline-block;
  height: 15px;
  left: 0;
  position: absolute;
  width: 15px
}

.form-inputbox input[type=radio]:checked+label.form-inputbox-radio:before {
  background-color: var(--blue)
}

.form-inputbox label.form-inputbox-radio:hover:before {
  filter: brightness(120%)
}

.form-inputbox input[type=radio]:disabled+label.form-inputbox-radio:before {
  filter: grayscale(100%)
}

.a-checkbox {
  align-items: center;
  -moz-column-gap: 10px;
  column-gap: 10px;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto 1fr
}

.a-checkbox__input[type=checkbox] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--white);
  border: 2px solid var(--blue);
  border-radius: 2px;
  cursor: pointer;
  display: inline-block;
  height: 16px;
  margin: 0;
  position: relative;
  width: 16px
}

.a-checkbox__input:checked:after {
  background-color: var(--blue);
  background-repeat: no-repeat;
  content: "";
  display: block;
  height: 100%;
  width: 100%
}

.a-checkbox__input:focus-visible {
  outline: 1px solid #1e90ff;
  outline-offset: 2px
}

.input-range {
  width: 100%
}

.swiper-btn-blue {
  background-color: var(--blue);
  border-radius: 5px;
  color: var(--white);
  height: 35px;
  margin: 0 !important;
  padding: 8px;
  width: 35px
}

.swiper-auto .swiper-slide {
  height: auto
}

#content1 {
  display: block
}

.tab-content {
  display: none
}

.accordion-title {
  margin: 0
}

.accordion-trigger {
  align-items: center;
  background: #f9f9f9;
  border: none;
  cursor: pointer;
  display: flex;
  font-family: inherit;
  justify-content: space-between;
  outline: none;
  padding: 20px;
  text-align: left;
  transition: background-color .4s ease, color .4s ease;
  width: 100%
}

.accordion-trigger:focus,
.accordion-trigger:hover {
  background-color: #f0f0f0
}

.accordion-trigger.active-title:hover {
  background-color: #03a3bf
}

.accordion-content {
  display: none;
  overflow: hidden
}

.accordion-content[hidden] {
  display: none
}

.accordion-trigger i.fa-chevron-down {
  transform: rotate(0);
  transition: .4s
}

.accordion-trigger.active-title i.fa-chevron-down {
  transform: rotate(-180deg)
}

.card-accordion {
  border-left: 4px solid transparent
}

.card-accordion:has(.is-active) {
  background-color: var(--blue-light);
  border-color: var(--blue)
}

.card-accordion-button.is-active {
  padding-top: 20px;
  transition: all .2s ease
}

.card-accordion-content {
  padding-left: 80px;
  padding-right: 80px
}

.card-accordion-icon {
  background-color: var(--white);
  border-radius: 100%;
  height: 30px;
  position: relative;
  transition: all var(--transition-duration) var(--transition-timing-function);
  width: 30px;

  &:after,
  &:before {
    background-color: var(--blue);
    content: "";
    left: 50%;
    position: absolute;
    top: 50%
  }

  &:before {
    height: 3px;
    width: calc(100% - 15px)
  }

  &:after,
  &:before {
    transform: translate(-50%, -50%)
  }

  &:after {
    height: calc(100% - 15px);
    width: 3px
  }
}

.card-accordion-button.is-active {
  & .card-accordion-icon {
    background-color: var(--blue);
    transform: rotate(180deg);

    &:after,
    &:before {
      background-color: var(--white)
    }

    &:after {
      display: none
    }
  }
}

.box-ques__right {
  flex: none;
  width: 315px
}

.box-ques-foto {
  bottom: 0;
  left: 100%;
  margin-left: 30px;
  width: 227px
}

.box-wrap-sw {
  margin-top: -50px
}

.box-our-work img {
  aspect-ratio: 4/3;
  display: block
}

.a-stage-card {
  display: grid;
  flex: 1 1 0%;
  padding: 30px;
  row-gap: 15px
}

.a-phone {
  background-image: url(../img/svg/telephone-fill.svg);
  background-position: 0 9px;
  background-repeat: no-repeat;
  background-size: 30px;
  padding-left: 40px
}

.a-stage-number {
  background-color: #0c6ad1;
  border-radius: 50%;
  color: #fff;
  display: flex;
  font-size: 42px;
  font-weight: 700;
  height: 41px;
  justify-content: center;
  line-height: 120%;
  padding-top: 1px;
  position: absolute;
  right: -10px;
  text-transform: uppercase;
  top: -10px;
  width: 41px;
  z-index: 2
}

.a-stage--title,
.a-stage-card p {
  color: #262626;
  line-height: 145%
}

.a-stage-card p {
  font-size: 16px;
  font-weight: 500
}

ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  list-style-type: none;
  margin-bottom: 30px
}

.tabs li {
  color: var(--white);
  flex: auto;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center
}

.tabs--css li:nth-child(-n+3) {
  flex: calc(33.33333% - 20px)
}

.tabs a {
  align-items: center;
  background-color: var(--white);
  border-radius: 15px;
  color: var(--main);
  cursor: pointer;
  display: flex;
  justify-content: center;
  min-height: 54px;
  padding: 5px 10px;
  text-decoration: none;
  transition: all .2s ease-out
}

.tabs .js-current {
  background-color: var(--blue);
  border: none !important;
  color: var(--white)
}

.table--css-top,
table {
  border-collapse: collapse;
  border-spacing: 0
}

.table--css-top {
  margin: 0;
  padding: 0;
  width: 100%
}

.table--css-top td,
.table--css-top th {
  text-align: left
}

.table--css-top .table-head-top th {
  background: var(--blue);
  color: var(--white);
  font-size: 18px;
  font-weight: 700;
  line-height: 112%
}

.table--css-top th:first-of-type {
  border-radius: 15px 0 0 15px;
  padding: 13px 32px
}

.table-body td {
  font-weight: 500;
  line-height: 20px
}

.table--css-top td:first-of-type {
  padding: 20px 32px
}

.table-body tr td:first-child {
  border-radius: 15px 0 0 15px
}

.services {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 60px;
  grid-gap: 30px
}

.services__title {
  font-size: 24px;
  font-weight: 700;
  line-height: 120%;
  margin-bottom: 24px;
  text-align: center
}

table.table--css {
  width: 100%
}

.table-head tr {
  background: var(--blue)
}

.table--css .table-head th:first-of-type {
  border-radius: 15px 0 0 15px;
  padding-left: 32px
}

.table-head th:first-of-type {
  width: 25%
}

.table--css .table-head th {
  color: var(--white);
  font-size: 18px;
  font-weight: 700;
  line-height: 100%;
  padding: 16px 0;
  text-align: left
}

.table-head th {
  width: 9.375%
}

.table--css .table-head th:last-of-type {
  border-radius: 0 15px 15px 0
}

.table-body td,
.table-body th {
  font-style: normal;
  font-weight: 400;
  line-height: 1.2;
  padding-bottom: 20px;
  padding-top: 20px;
  text-align: left
}

.table-body th {
  font-weight: 500;
  line-height: 20px;
  padding-left: 32px
}

.table-body th:first-child {
  border-radius: 15px 0 0 15px
}

.table-body tr:nth-of-type(2n) {
  background-color: #fff
}

.table-body tr td:last-child,
.table-head-top tr th:last-child {
  border-radius: 0 15px 15px 0
}

.c-advantages__title:after {
  background-color: var(--blue);
  content: "";
  display: block;
  height: 3px;
  margin-top: 5px;
  width: 40px
}

.b-advantages .c-advantages:nth-child(odd) {
  background-color: var(--blue-lights)
}

.c-advantages__img {
  background-color: var(--blue-light);
  border-radius: 10px;
  height: 110px;
  margin-bottom: 10px;
  width: 110px
}

.box-sale-img {
  align-items: center;
  text-align: center;
  width: min(100%, 500px)
}

.box-sale-img img {
  width: min(100%, 300px)
}

.box-sale-top {
  border-bottom: 1px solid hsla(0, 0%, 100%, .5)
}

.card-advantages-sale__details {
  line-height: 1;

  & p {
    line-height: 1.2
  }
}

.card-advantages-sale__title {
  line-height: 1.2;
  margin-bottom: 5px
}

.card-advantages-sale__img {
  align-items: center;
  border: 1px solid hsla(0, 0%, 100%, .5);
  border-radius: 100%;
  display: flex;
  height: 60px;
  justify-content: center;
  width: 60px;
  & img {
    width: 30px;
    aspect-ratio: 1;
  }
}

.card-advantages-sale__img--gold {
  border-color: gold
}

.col-gold {
  color: gold
}

.text-percent {
  font-size: 30px
}

.c-advantages__img-sale {
  background-color: var(--blue-light);
  border-radius: 10px;
  height: 130px;
  width: 130px
}

.btn-link-1 {
  color: #fff !important
}

.box-sale {
  background: linear-gradient(45deg, #0c6ad1, #0c6ad1)
}

.card-services__icon {
  align-items: center;
  background-color: var(--blue);
  border-radius: 15px;
  bottom: -10px;
  display: flex;
  height: 50px;
  justify-content: center;
  left: 10px;
  width: 50px
}

.a-about-box {
  border-radius: 20px;
  justify-content: space-between
}

.a-about-box--img-1 {
  bottom: 0;
  height: 100%;
  right: 0;
  top: 0;
  width: 563px
}

.a-about-box--svg-1 {
  right: -58px;
  top: 50%;
  transform: translateY(-50%)
}

.a-about-box__left {
  align-self: center;
  padding: 60px;
  row-gap: 20px
}

.a-about-box h2 {
  color: var(--white);
  margin-bottom: 0;
  text-align: left
}

.a-about-box__right {
  position: relative;
  width: min(100%, 700px);
  z-index: 5
}

.a-about-box__img {
  border-radius: 0 20px 20px 0;
  height: 100%;
  overflow: hidden;

  & img {
    border-radius: 0 20px 20px 0;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%
  }
}

.advantage__box {
  background: var(--white);
  border-radius: 15px;
  padding: 15px;
  padding-block: 40px;
  position: relative;
  text-align: center
}

.card-hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, .06), 0 1px 3px rgba(0, 0, 0, .04);
  transition: box-shadow .25s ease, transform .25s ease
}

.card-hover:hover {
  box-shadow: 0 12px 24px rgba(0, 0, 0, .1), 0 4px 8px rgba(0, 0, 0, .06);
  transform: translateY(-4px)
}

.advantage__icon {
  align-items: center;
  background-color: var(--blue);
  border-radius: 50%;
  display: flex;
  height: 88px;
  justify-content: center;
  margin: 0 auto 30px;
  width: 88px
}

.advantage__box p {
  font-size: 18px;
  font-weight: 500;
  line-height: 145%;
  text-align: center
}

.a-five-box {
  padding: 10px 10px 10px 30px
}

.a-five-box__left,
.a-phone--css {
  font-size: 18px;
  font-weight: 700;
  line-height: 145%
}

.a-phone--css {
  color: #262626;
  padding: 10px 15px
}

.a-phone--css:before {
  background-size: cover !important;
  height: 32px;
  width: 32px
}

.phone:before {
  background: url(../img/svg/header-phone.svg) 50% no-repeat;
  border-radius: 50%;
  content: "";
  display: inline-block;
  flex: none;
  height: 45px;
  margin-right: 16px;
  width: 45px
}

.card-master__img {
  aspect-ratio: 1;
  border-radius: 50%;
  margin-inline: auto;
  width: calc(100% - 40px);

  &>img {
    border-radius: 50%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    position: absolute;
    width: 100%
  }
}

.card-master__information {
  border-bottom: 1px solid rgba(0, 0, 0, .2)
}

.card-master__quality {
  background-color: var(--white);
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 100%;
  height: 55px;
  padding: 10px;
  right: 12px;
  top: 7px;
  width: 55px
}

.box-content :where(ul, ol) {
  display: flex;
  flex-direction: column;
  padding-left: 20px;
  row-gap: 10px
}

.pl-20 {
  padding-left: 20px
}

.pl-30 {
  padding-left: 30px
}

.box-work__left {
  flex: 0 1 60%
}

.box-work__title:before {
  background-color: #febd01;
  content: "";
  height: 100%;
  position: absolute;
  right: 100%;
  top: 0;
  width: 3px
}

.box-work__right {
  flex: 0 1 40%;
  padding-right: 30px
}

.box-timer {
  bottom: 0;
  box-shadow: 0 12px 24px rgba(0, 0, 0, .1), 0 4px 8px rgba(0, 0, 0, .06);
  left: 0
}

.box-lightning {
  border: 3px solid var(--yellow);
  border-radius: 50%;
  height: 50px;
  width: 50px
}

.shadow-2 {
  box-shadow: 0 4px 12px rgba(0, 0, 0, .08), 0 2px 4px rgba(0, 0, 0, .05)
}

.top-badge {
  background-color: var(--blue-light);
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 30px;
  color: #181021;
  font-weight: 500;
  padding: 5px 10px;
  width: -moz-max-content;
  width: max-content
}

.pr-5 {
  padding-right: 5px
}

.pr-10 {
  padding-right: 10px
}

.card-exit-bg {
  height: 50px;
  width: 50px
}

.card-exit {
  padding-right: 20px
}

.card-exit:not(:last-child):after {
  background-color: var(--grey-light);
  content: "";
  height: 30px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2px
}

.box-gallery li {
  position: relative
}

.box-gallery img {
  border-radius: 20px;
  display: block
}

.box-our-work img {
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%
}

.box-test {
  background-image: url(../img/svg/check-circle-fill.svg);
  background-position: 10px 50%;
  background-repeat: no-repeat;
  background-size: 20px;
  bottom: 15px;
  left: 15px;
  max-width: calc(100% - 30px);
  padding-left: 40px
}

.py-5 {
  padding-block: 5px
}

.box-crew__left {
  height: 60px;
  width: 60px
}

.box-crew {
  background-color: #fdf8ea;
  width: -moz-max-content;
  width: max-content
}

.box-shield {
  border: 1px solid rgba(12, 106, 209, .2);
  height: 70px;
  width: 70px
}

.card-reviews__icon {
  background-color: var(--blue-light);
  height: 50px;
  width: 50px
}

.box-phone {
  height: 40px;
  width: 40px
}

.btn-phone {
  border-radius: 50px;
  cursor: pointer;
  padding-left: 30px;
  padding-right: 10px
}

.box-img-ques {
  margin-inline: auto;
  width: min(100%, 500px)
}

.box-metro {
  & li:not(:last-child) {
    border: 1px solid rgba(0, 0, 0, .05)
  }
}

.card-metro {
  font-size: 14px;
  padding: 10px 20px
}

.card-metro_icon {
  background-color: #fdfaf3;
  height: 30px;
  width: 30px
}

.cont-metro {
  border-radius: 100px
}

.swiper-button-next.swiper-button-next-three {
  border-radius: 100%;
  right: -15px;
  transform: translateY(-50%)
}

.swiper-button-prev.swiper-button-prev-three {
  border-radius: 100%;
  left: -15px;
  transform: translateY(-50%)
}

@media(max-width:1250px) {
  .card-advantages {
    flex: 1;
    min-width: 203px
  }

  .box-advantages {
    margin-bottom: 10px
  }

  button {
    font-size: 14px
  }
}

@media(max-width:1180px) {
  .box-header-menu {
    display: none
  }

  .box-contacts {
    align-items: center;
    display: flex;
    margin-left: auto
  }

  .box-contacts .btn-one {
    position: static
  }

  .box-nav {
    padding-bottom: 10px
  }

  .box-btn-burger {
    display: block
  }

  .box-nav .container {
    -moz-column-gap: 20px;
    column-gap: 20px
  }
}

@media(max-width:1140px) {
  .card-master__quality {
    height: 40px;
    padding: 7px;
    width: 40px
  }

  .card-master__details img {
    height: 25px;
    width: 25px
  }
}

@media(max-width:1120px) {
  .card-exit {
    padding-right: 0
  }

  .card-exit:not(:last-child):after {
    display: none
  }
}

@media(max-width:1050px) {
  .box-header-lists {
    row-gap: 10px
  }
}

@media (max-width:64rem) {

  .a-tel,
  .a-tel-text {
    display: none
  }

  .a-phone {
    background-position: 50%;
    background-size: 25px;
    border: 1px solid var(--blue);
    border-radius: 50%;
    box-shadow: 0 12px 24px rgba(0, 0, 0, .1), 0 4px 8px rgba(0, 0, 0, .06);
    flex: none;
    height: 50px;
    width: 50px
  }

  .box-contacts {
    -moz-column-gap: 20px;
    column-gap: 20px
  }

  .tabs li {
    font-size: 14px
  }

  .table--css-top .table-head-top th {
    background: var(--blue);
    font-size: 14px;
    line-height: 1.2
  }

  .table-body td,
  .table-body th {
    font-size: 14px;
    padding-bottom: 10px;
    padding-top: 10px
  }

  .tabs a {
    min-height: 42px
  }

  .card-advantages-sale__details p,
  .table--css .table-head th {
    font-size: 14px
  }

  .advantage__box {
    padding: 10px;
    padding-block: 20px
  }

  .advantage__icon {
    margin: 0 auto 10px
  }

  .a-about-box__left {
    padding: 30px
  }

  .box-wrap-sw {
    margin-top: 20px
  }

  .box-ques__left h2 {
    line-height: 1.2
  }

  .box-ques__right {
    width: 215px
  }

  .box-menu-footer {
    flex: 0 1 100%
  }

  .menu-footer {
    align-items: flex-start;
    flex-direction: column;

    & a {
      padding-inline: 0
    }
  }

  .menu-footer li:not(:last-child):after {
    display: none
  }

  .box-work__left {
    flex: 0 1 100%
  }

  .card-exit {
    box-shadow: 0 12px 24px rgba(0, 0, 0, .1), 0 4px 8px rgba(0, 0, 0, .06);
    padding: 7px 15px;
    text-wrap: nowrap
  }

  .box-gallery img,
  .card-exit {
    border-radius: 10px
  }

  .box-gallery-scroll {
    grid-auto-columns: 250px;
    grid-auto-flow: column;
    grid-template-columns: none;
    overflow-x: scroll;
    padding-block-end: 10px;
    scroll-snap-type: x mandatory
  }

  .box-gallery-scroll li {
    scroll-snap-align: start
  }

  .box-reviews.box-gallery-scroll {
    grid-auto-columns: 280px
  }

  .card-reviews__header {
    font-size: 14px;
    grid-template-columns: 1fr
  }

  .card-reviews__name {
    font-size: 14px
  }

  .card-reviews {
    scroll-snap-align: start
  }

  .a-stage-card {
    padding: 20px
  }

  .box-work__right {
    margin-bottom: 20px;
    padding-right: 0
  }
}

@media (max-width:48rem) {
  .box-logo {
    width: min(100%, 200px)
  }

  .box-contacts .btn-one {
    display: none
  }

  .a-phone {
    background-size: 18px;
    height: 40px;
    width: 40px
  }

  .btn-burger {
    height: 40px;
    padding: 8px;
    width: 45px
  }

  .box-nav .container {
    -moz-column-gap: 15px;
    column-gap: 15px
  }

  .box-header-lists {
    row-gap: 5px
  }

  .box-year {
    background-color: var(--yellow);
    border-radius: 20px;
    display: block;
    font-size: 20px;
    margin-bottom: 10px;
    padding: 5px 15px;
    width: -moz-max-content;
    width: max-content
  }

  .a-stage-card {
    padding: 15px;
    row-gap: 10px
  }

  .tabs li,
  .tabs li:first-of-type,
  .tabs li:nth-of-type(2),
  .tabs li:nth-of-type(3) {
    flex: 1 1 48%
  }

  .table--css-top thead {
    display: none
  }

  .table--css-top td:before {
    content: attr(data-label);
    float: left;
    font-weight: 700
  }

  .table--css-top td {
    border-bottom: 1px dotted #ccc;
    border-right: 1px solid transparent;
    display: block;
    font-size: 13px;
    text-align: right
  }

  .table-body tr td:first-child {
    border-radius: 5px 5px 0 0
  }

  .table--css-top td:first-of-type {
    background-color: var(--blue);
    color: var(--white);
    padding: 10px
  }

  .table-body td,
  .table-body th {
    padding-block: 7px;
    padding-inline: 10px
  }

  ul.tabs {
    gap: 5px;
    margin-bottom: 10px
  }

  .tabs a {
    border-radius: 5px;
    line-height: 1;
    min-height: 40px;
    padding: 5px
  }

  .services {
    grid-template-columns: 1fr;
    grid-gap: 35px;
    margin-top: 30px
  }

  .table--css .table-head th:first-of-type {
    padding-left: 10px
  }

  .table--css .table-head th,
  .table-body td,
  .table-body th {
    font-size: 14px
  }

  .table-body th {
    padding-left: 10px;
    padding-right: 10px;
    text-align: left
  }

  .table--css .table-head th:first-of-type {
    border-radius: 5px 0 0 0
  }

  .table--css .table-head th:last-of-type {
    border-radius: 0 5px 0 0
  }

  .table--css .table-head th {
    padding: 10px 0
  }

  .table-body th {
    line-height: 1.2
  }

  .table-body th:first-child {
    border-radius: 5px 0 0 5px
  }

  .services__title {
    margin-bottom: 10px
  }

  .box-services {
    grid-auto-columns: 270px;
    grid-auto-flow: column;
    grid-template-columns: none;
    overflow-x: scroll;
    padding-block-end: 10px;
    scroll-snap-type: x mandatory
  }

  .card-services {
    scroll-snap-align: start
  }

  .card-services__des {
    font-size: 14px
  }

  .a-about-box__right {
    width: 100%
  }

  .a-about-box__img {
    border-radius: 0;

    & img {
      border-radius: 0
    }
  }

  .box-drive {
    text-wrap: auto
  }

  .card-exit {
    border-radius: 10px;
    flex: 1;
    font-size: 14px;
    grid-template-columns: 1fr;
    justify-items: center;
    line-height: 1;
    padding: 7px 5px;
    row-gap: 5px;
    text-align: center;
    text-wrap: nowrap
  }

  .box-timer {
    font-size: 14px;
    line-height: 1.2
  }

  .box-exit {
    -moz-column-gap: 5px;
    column-gap: 5px
  }

  .card-exit {
    font-size: 11px
  }

  .card-exit-bg {
    height: 35px;
    width: 35px;

    & img {
      height: 17px;
      width: 17px
    }
  }

  .box-tabs {
    align-items: stretch;
    gap: 5px
  }

  .box-tabs .btn-one {
    flex: 1 1 45%;
    flex-direction: column;
    font-size: 12px;
    padding: 7px 5px
  }

  .rating .star {
    height: 12px;
    width: 12px
  }

  .card-reviews_rating {
    font-size: 14px
  }

  .card-accordion-content {
    font-size: 14px;
    padding-left: 0;
    padding-right: 0
  }

  .card-accordion-button {
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
    text-align: left
  }

  .card-exit-bg {
    height: 25px;
    width: 25px
  }

  .box-calculator,
  .c-advantages__details {
    line-height: 1.2
  }

  .a-checkbox {
    align-items: start
  }

  .box-crew {
    grid-template-columns: 1fr;
    row-gap: 10px;
    width: auto
  }

  .box-ques__right {
    width: 100%
  }

  .box-ques__left h2 {
    line-height: 1
  }

  .card-accordion-icon {
    height: 20px;
    width: 20px
  }

  .card-accordion-icon {
    &:before {
      height: 2px;
      width: calc(100% - 10px)
    }
  }

  .card-accordion-icon {
    &:after {
      height: calc(100% - 10px);
      width: 2px
    }
  }
}

@media (max-width:32rem) {
  :root {
    --h1-size: 25px
  }

  .box-header-lists {
    align-items: start;
    font-size: 12px
  }

  .lists-check li {
    background-size: 12px
  }

  .box-header-lists li {
    background-position: 0;
    line-height: 1.2;
    padding-left: 17px
  }

  .card-advantages img {
    height: 20px;
    width: 20px
  }

  .card-advantages {
    border-radius: 5px;
    font-size: 12px;
    min-width: auto;
    padding: 5px
  }

  .box-header-button button {
    font-size: 14px
  }

  .box-year {
    font-size: 15px
  }

  .box-test {
    background-position: 4px 50%;
    background-size: 14px;
    bottom: 10px;
    font-size: 12px;
    left: 10px;
    padding-left: 23px;
    padding-block: 3px;
    padding-right: 10px
  }

  .c-advantages__title p {
    font-size: 14px
  }

  .c-advantages__img {
    height: 70px;
    width: 70px
  }

  .c-advantages__details p,
  .card-advantages-sale__details {
    font-size: 14px
  }

  .c-advantages__img-sale {
    height: 70px;
    margin-bottom: 10px;
    width: 70px
  }

  .advantage__box p {
    font-size: 14px;
    line-height: 1.2
  }

  .a-five-box {
    text-align: center
  }

  .advantage__icon {
    height: 60px;
    width: 60px;

    & img {
      height: 30px
    }
  }

  .form_select select {
    font-size: 14px
  }

  .card-calculator {
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.2
  }

  .form_select,
  .form_select:before {
    height: 35px
  }

  .top-badge {
    font-size: 14px
  }

  .box-work__title:before {
    width: 1px
  }

  .box-work__title {
    padding-left: 15px
  }

  .box-drive {
    font-size: 14px;
    line-height: 1.2
  }

  .box-work__title h2 {
    font-size: 25px
  }

  .box-timer {
    border-radius: 10px;
    bottom: -5px;
    font-size: 12px;
    padding: 5px 10px
  }

  .box-lightning {
    border: 2px solid var(--yellow);
    height: 35px;
    width: 35px;

    & img {
      height: 20px;
      width: 20px
    }
  }

  .box-btn-marg {
    margin-top: 0
  }

  .box-services {
    grid-auto-columns: 300px
  }

  .card-accordion-button {
    font-size: 18px
  }
}