.flex {
  --gap: 0px;
  gap: var(--gap);
  display: flex;
}
.flex.wrap {
  flex-wrap: wrap;
}
.flex.col {
  flex-direction: column;
}
.flex.col-reverse {
  flex-direction: column-reverse;
}
:is(.flex.col, .flex.col-reverse).top {
  justify-content: flex-start;
}
:is(.flex.col, .flex.col-reverse).middle {
  justify-content: center;
}
:is(.flex.col, .flex.col-reverse).bottom {
  justify-content: flex-end;
}
:is(.flex.col, .flex.col-reverse).left {
  align-items: flex-start;
}
:is(.flex.col, .flex.col-reverse).center {
  align-items: center;
}
:is(.flex.col, .flex.col-reverse).right {
  align-items: flex-end;
}
:is(.flex.col, .flex.col-reverse).baseline {
  justify-content: baseline;
}
:is(.flex.col, .flex.col-reverse).stretch {
  align-items: stretch;
}
:is(.flex.col, .flex.col-reverse).between {
  justify-content: space-between;
}
.flex.row {
  flex-direction: row;
}
.flex.row.left {
  justify-content: flex-start;
}
.flex.row.right {
  justify-content: flex-end;
}
.flex.row-reverse {
  flex-direction: row-reverse;
}
.flex.row-reverse.left {
  justify-content: flex-end;
}
.flex.row-reverse.right {
  justify-content: flex-start;
}
:is(.flex.row, .flex.row-reverse).center {
  justify-content: center;
}
:is(.flex.row, .flex.row-reverse).top {
  align-items: flex-start;
}
:is(.flex.row, .flex.row-reverse).middle {
  align-items: center;
}
:is(.flex.row, .flex.row-reverse).bottom {
  align-items: flex-end;
}
:is(.flex.row, .flex.row-reverse).baseline {
  align-items: baseline;
}
:is(.flex.row, .flex.row-reverse).stretch {
  align-items: stretch;
}
:is(.flex.row, .flex.row-reverse).between {
  justify-content: space-between;
}
.grid {
  --columns: 1;
  --rows: 1;
  --gap: 0px;
  gap: var(--gap);
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
  grid-template-rows: repeat(var(--rows), minmax(0, 1fr));
  width: 100%;
  display: grid;
}
.grid.col-1 {
  --columns: 1;
}
.grid.col-2 {
  --columns: 2;
}
.grid.col-3 {
  --columns: 3;
}
.grid.col-4 {
  --columns: 4;
}
.grid.col-5 {
  --columns: 5;
}
.grid.col-6 {
  --columns: 6;
}
.grid.col-7 {
  --columns: 7;
}
.grid.col-8 {
  --columns: 8;
}
.grid.col-9 {
  --columns: 9;
}
.grid.col-10 {
  --columns: 10;
}
.grid.col-11 {
  --columns: 11;
}
.grid.col-12 {
  --columns: 12;
}
.grid.row-1 {
  --rows: 1;
}
.grid.row-2 {
  --rows: 2;
}
.grid.row-3 {
  --rows: 3;
}
.grid.row-4 {
  --rows: 4;
}
.grid.row-5 {
  --rows: 5;
}
.grid.row-6 {
  --rows: 6;
}
.grid.row-7 {
  --rows: 7;
}
.grid.row-8 {
  --rows: 8;
}
.grid.row-9 {
  --rows: 9;
}
.grid.row-10 {
  --rows: 10;
}
.grid.row-11 {
  --rows: 11;
}
.grid.row-12 {
  --rows: 12;
}
.gap-none {
  --gap: var(--spacing-none);
}
.gap-2xs {
  --gap: var(--spacing-2xs);
}
.gap-xs {
  --gap: var(--spacing-xs);
}
.gap-s {
  --gap: var(--spacing-s);
}
.gap-m {
  --gap: var(--spacing-m);
}
.gap-l {
  --gap: var(--spacing-l);
}
.gap-xl {
  --gap: var(--spacing-xl);
}
.gap-2xl {
  --gap: var(--spacing-2xl);
}
.gap-3xl {
  --gap: var(--spacing-3xl);
}
.spacing-none {
  padding: var(--spacing-none);
}
.spacing-2xs {
  padding: var(--spacing-2xs);
}
.spacing-xs {
  padding: var(--spacing-xs);
}
.spacing-s {
  padding: var(--spacing-s);
}
.spacing-m {
  padding: var(--spacing-m);
}
.spacing-l {
  padding: var(--spacing-l);
}
.spacing-xl {
  padding: var(--spacing-xl);
}
.spacing-2xl {
  padding: var(--spacing-2xl);
}
.spacing-3xl {
  padding: var(--spacing-3xl);
}
.spacing-bottom-none {
  padding-bottom: var(--spacing-none);
}
.spacing-bottom-2xs {
  padding-bottom: var(--spacing-2xs);
}
.spacing-bottom-xs {
  padding-bottom: var(--spacing-xs);
}
.spacing-bottom-s {
  padding-bottom: var(--spacing-s);
}
.spacing-bottom-m {
  padding-bottom: var(--spacing-m);
}
.spacing-bottom-l {
  padding-bottom: var(--spacing-l);
}
.spacing-bottom-xl {
  padding-bottom: var(--spacing-xl);
}
.spacing-bottom-2xl {
  padding-bottom: var(--spacing-2xl);
}
.spacing-bottom-3xl {
  padding-bottom: var(--spacing-3xl);
}
.spacing-top-none {
  padding-top: var(--spacing-none);
}
.spacing-top-2xs {
  padding-top: var(--spacing-2xs);
}
.spacing-top-xs {
  padding-top: var(--spacing-xs);
}
.spacing-top-s {
  padding-top: var(--spacing-s);
}
.spacing-top-m {
  padding-top: var(--spacing-m);
}
.spacing-top-l {
  padding-top: var(--spacing-l);
}
.spacing-top-xl {
  padding-top: var(--spacing-xl);
}
.spacing-top-2xl {
  padding-top: var(--spacing-2xl);
}
.spacing-top-3xl {
  padding-top: var(--spacing-3xl);
}
.spacing-inline-none {
  padding-inline: var(--spacing-none);
}
.spacing-inline-2xs {
  padding-inline: var(--spacing-2xs);
}
.spacing-inline-xs {
  padding-inline: var(--spacing-xs);
}
.spacing-inline-s {
  padding-inline: var(--spacing-s);
}
.spacing-inline-m {
  padding-inline: var(--spacing-m);
}
.spacing-inline-l {
  padding-inline: var(--spacing-l);
}
.spacing-inline-xl {
  padding-inline: var(--spacing-xl);
}
.spacing-inline-2xl {
  padding-inline: var(--spacing-2xl);
}
.spacing-inline-3xl {
  padding-inline: var(--spacing-3xl);
}
.spacing-block-none {
  padding-block: var(--spacing-none);
}
.spacing-block-2xs {
  padding-block: var(--spacing-2xs);
}
.spacing-block-xs {
  padding-block: var(--spacing-xs);
}
.spacing-block-s {
  padding-block: var(--spacing-s);
}
.spacing-block-m {
  padding-block: var(--spacing-m);
}
.spacing-block-l {
  padding-block: var(--spacing-l);
}
.spacing-block-xl {
  padding-block: var(--spacing-xl);
}
.spacing-block-2xl {
  padding-block: var(--spacing-2xl);
}
.spacing-block-3xl {
  padding-block: var(--spacing-3xl);
}
@media (max-width: 767px) {
  .only_medium-up,
  .only_medium {
    display: none;
  }
}
@media (min-width: 768px) {
  .only_small {
    display: none;
  }
}
@media (min-width: 1024px) {
  .only_medium,
  .only_medium-down {
    display: none;
  }
}
@media (max-width: 1023px) {
  .only_large {
    display: none;
  }
}
.text-start,
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-end,
.text-right {
  text-align: right;
}