.flex.small_wrap {
  flex-wrap: wrap;
}
.flex.small_col {
  flex-direction: column;
}
:is(.flex.small_col, .flex.small_col-reverse).small_top {
  justify-content: flex-start;
}
:is(.flex.small_col, .flex.small_col-reverse).small_middle {
  justify-content: center;
}
:is(.flex.small_col, .flex.small_col-reverse).small_bottom {
  justify-content: flex-end;
}
:is(.flex.small_col, .flex.small_col-reverse).small_left {
  align-items: flex-start;
}
:is(.flex.small_col, .flex.small_col-reverse).small_center {
  align-items: center;
}
:is(.flex.small_col, .flex.small_col-reverse).small_right {
  align-items: flex-end;
}
:is(.flex.small_col, .flex.small_col-reverse).small_baseline {
  justify-content: baseline;
}
:is(.flex.small_col, .flex.small_col-reverse).small_stretch {
  align-items: stretch;
}
:is(.flex.small_col, .flex.small_col-reverse).small_between {
  justify-content: space-between;
}
.flex.small_col-reverse {
  flex-direction: column-reverse;
}
.flex.small_col-reverse.small_top {
  justify-content: flex-start;
}
.flex.small_col-reverse.small_middle {
  justify-content: center;
}
.flex.small_col-reverse.small_bottom {
  justify-content: flex-end;
}
.flex.small_col-reverse.small_left {
  align-items: flex-start;
}
.flex.small_col-reverse.small_center {
  align-items: center;
}
.flex.small_col-reverse.small_right {
  align-items: flex-end;
}
.flex.small_col-reverse.small_baseline {
  justify-content: baseline;
}
.flex.small_col-reverse.small_stretch {
  align-items: stretch;
}
.flex.small_col-reverse.small_between {
  justify-content: space-between;
}
.flex.small_row {
  flex-direction: row;
}
.flex.small_row.small_left {
  justify-content: flex-start;
}
.flex.small_row.small_right {
  justify-content: flex-end;
}
.flex.small_row-reverse {
  flex-direction: row-reverse;
}
.flex.small_row-reverse.small_left {
  justify-content: flex-end;
}
.flex.small_row-reverse.small_right {
  justify-content: flex-start;
}
:is(.flex.small_row, .flex.small_row-reverse).small_center {
  justify-content: center;
}
:is(.flex.small_row, .flex.small_row-reverse).small_top {
  align-items: flex-start;
}
:is(.flex.small_row, .flex.small_row-reverse).small_middle {
  align-items: center;
}
:is(.flex.small_row, .flex.small_row-reverse).small_bottom {
  align-items: flex-end;
}
:is(.flex.small_row, .flex.small_row-reverse).small_baseline {
  align-items: baseline;
}
:is(.flex.small_row, .flex.small_row-reverse).small_stretch {
  align-items: stretch;
}
:is(.flex.small_row, .flex.small_row-reverse).small_between {
  justify-content: space-between;
}
.grid.small_col-1 {
  --columns: 1;
}
.grid.small_col-2 {
  --columns: 2;
}
.grid.small_col-3 {
  --columns: 3;
}
.grid.small_col-4 {
  --columns: 4;
}
.grid.small_col-5 {
  --columns: 5;
}
.grid.small_col-6 {
  --columns: 6;
}
.grid.small_col-7 {
  --columns: 7;
}
.grid.small_col-8 {
  --columns: 8;
}
.grid.small_col-9 {
  --columns: 9;
}
.grid.small_col-10 {
  --columns: 10;
}
.grid.small_col-11 {
  --columns: 11;
}
.grid.small_col-12 {
  --columns: 12;
}
.grid.small_row-1 {
  --rows: 1;
}
.grid.small_row-2 {
  --rows: 2;
}
.grid.small_row-3 {
  --rows: 3;
}
.grid.small_row-4 {
  --rows: 4;
}
.grid.small_row-5 {
  --rows: 5;
}
.grid.small_row-6 {
  --rows: 6;
}
.grid.small_row-7 {
  --rows: 7;
}
.grid.small_row-8 {
  --rows: 8;
}
.grid.small_row-9 {
  --rows: 9;
}
.grid.small_row-10 {
  --rows: 10;
}
.grid.small_row-11 {
  --rows: 11;
}
.grid.small_row-12 {
  --rows: 12;
}
.small_gap-none {
  --gap: var(--spacing-none);
}
.small_gap-2xs {
  --gap: var(--spacing-2xs);
}
.small_gap-xs {
  --gap: var(--spacing-xs);
}
.small_gap-s {
  --gap: var(--spacing-s);
}
.small_gap-m {
  --gap: var(--spacing-m);
}
.small_gap-l {
  --gap: var(--spacing-l);
}
.small_gap-xl {
  --gap: var(--spacing-xl);
}
.small_gap-2xl {
  --gap: var(--spacing-2xl);
}
.small_gap-3xl {
  --gap: var(--spacing-3xl);
}
.small_spacing-none {
  padding: var(--spacing-none);
}
.small_spacing-2xs {
  padding: var(--spacing-2xs);
}
.small_spacing-xs {
  padding: var(--spacing-xs);
}
.small_spacing-s {
  padding: var(--spacing-s);
}
.small_spacing-m {
  padding: var(--spacing-m);
}
.small_spacing-l {
  padding: var(--spacing-l);
}
.small_spacing-xl {
  padding: var(--spacing-xl);
}
.small_spacing-2xl {
  padding: var(--spacing-2xl);
}
.small_spacing-3xl {
  padding: var(--spacing-3xl);
}
.small_spacing-bottom-none {
  padding-bottom: var(--spacing-none);
}
.small_spacing-bottom-2xs {
  padding-bottom: var(--spacing-2xs);
}
.small_spacing-bottom-xs {
  padding-bottom: var(--spacing-xs);
}
.small_spacing-bottom-s {
  padding-bottom: var(--spacing-s);
}
.small_spacing-bottom-m {
  padding-bottom: var(--spacing-m);
}
.small_spacing-bottom-l {
  padding-bottom: var(--spacing-l);
}
.small_spacing-bottom-xl {
  padding-bottom: var(--spacing-xl);
}
.small_spacing-bottom-2xl {
  padding-bottom: var(--spacing-2xl);
}
.small_spacing-bottom-3xl {
  padding-bottom: var(--spacing-3xl);
}
.small_spacing-inline-none {
  padding-inline: var(--spacing-none);
}
.small_spacing-inline-2xs {
  padding-inline: var(--spacing-2xs);
}
.small_spacing-inline-xs {
  padding-inline: var(--spacing-xs);
}
.small_spacing-inline-s {
  padding-inline: var(--spacing-s);
}
.small_spacing-inline-m {
  padding-inline: var(--spacing-m);
}
.small_spacing-inline-l {
  padding-inline: var(--spacing-l);
}
.small_spacing-inline-xl {
  padding-inline: var(--spacing-xl);
}
.small_spacing-inline-2xl {
  padding-inline: var(--spacing-2xl);
}
.small_spacing-inline-3xl {
  padding-inline: var(--spacing-3xl);
}
.small_spacing-block-none {
  padding-block: var(--spacing-none);
}
.small_spacing-block-2xs {
  padding-block: var(--spacing-2xs);
}
.small_spacing-block-xs {
  padding-block: var(--spacing-xs);
}
.small_spacing-block-s {
  padding-block: var(--spacing-s);
}
.small_spacing-block-m {
  padding-block: var(--spacing-m);
}
.small_spacing-block-l {
  padding-block: var(--spacing-l);
}
.small_spacing-block-xl {
  padding-block: var(--spacing-xl);
}
.small_spacing-block-2xl {
  padding-block: var(--spacing-2xl);
}
.small_spacing-block-3xl {
  padding-block: var(--spacing-3xl);
}
.small_text-start,
.small_text-left {
  text-align: left;
}
.small_text-center {
  text-align: center;
}
.small_text-end,
.small_text-right {
  text-align: right;
}
@media (min-width: 768px) and (max-width: 1023px) {
  .grid.medium_col-3 {
    --columns: 3 !important;
  }
}
@media (max-width: 767px) {
  .grid.small_col-2 {
    --columns: 2 !important;
  }
}