.is-flex {
  display: flex;
}

.is-inline-flex {
  display: inline-flex;
}

:is(.is-flex, .is-inline-flex).is-top {
  align-items: flex-start;
}

:is(.is-flex, .is-inline-flex).is-baseline {
  align-items: baseline;
}

:is(.is-flex, .is-inline-flex).is-middle {
  align-items: center;
}

:is(.is-flex, .is-inline-flex).is-bottom {
  align-items: flex-end;
}

:is(.is-flex, .is-inline-flex).is-center {
  justify-content: center;
}

:is(.is-flex, .is-inline-flex).is-right {
  justify-content: flex-end;
}

:is(.is-flex, .is-inline-flex).is-between {
  justify-content: space-between;
}

:is(.is-flex, .is-inline-flex).is-around {
  justify-content: space-around;
}

:is(.is-flex, .is-inline-flex).is-reverse {
  flex-direction: row-reverse;
}

:is(.is-flex, .is-inline-flex):where(:not(.is-nowrap)) {
  flex-wrap: wrap;
}

:where(:not(.grid)).is-gap-xxl {
  gap: 28px;
}

:where(:not(.grid)).is-gap-xl {
  gap: 24px;
}

:where(:not(.grid)).is-gap-lg {
  gap: 20px;
}

:where(:not(.grid)).is-gap-md {
  gap: 16px;
}

:where(:not(.grid)).is-gap-sm {
  gap: 12px;
}

:where(:not(.grid)).is-gap-xs {
  gap: 8px;
}

:where(:not(.grid)).is-gap-xxs {
  gap: 4px;
}

.is-gap-none {
  gap: 0;
}

:where(:not(.grid)).is-gap-y-xxl {
  row-gap: 28px;
}

:where(:not(.grid)).is-gap-y-xl {
  row-gap: 24px;
}

:where(:not(.grid)).is-gap-y-lg {
  row-gap: 20px;
}

:where(:not(.grid)).is-gap-y-md {
  row-gap: 16px;
}

:where(:not(.grid)).is-gap-y-sm {
  row-gap: 12px;
}

:where(:not(.grid)).is-gap-y-xs {
  row-gap: 8px;
}

:where(:not(.grid)).is-gap-y-xxs {
  row-gap: 4px;
}

.is-gap-y-none {
  row-gap: 0;
}

:where(:not(.grid)).is-gap-x-xxl {
  column-gap: 28px;
}

:where(:not(.grid)).is-gap-x-xl {
  column-gap: 24px;
}

:where(:not(.grid)).is-gap-x-lg {
  column-gap: 20px;
}

:where(:not(.grid)).is-gap-x-md {
  column-gap: 16px;
}

:where(:not(.grid)).is-gap-x-sm {
  column-gap: 12px;
}

:where(:not(.grid)).is-gap-x-xs {
  column-gap: 8px;
}

:where(:not(.grid)).is-gap-x-xxs {
  column-gap: 4px;
}

.is-gap-x-none {
  column-gap: 0;
}

.is-flex-1,
.is-1,
.is-mobile-1 {
  flex: 0 0 calc(100% / 12 * 1);
}

.is-flex-2,
.is-2,
.is-mobile-2 {
  flex: 0 0 calc(100% / 12 * 2);
}

.is-flex-3,
.is-3,
.is-mobile-3 {
  flex: 0 0 calc(100% / 12 * 3);
}

.is-flex-4,
.is-4,
.is-mobile-4 {
  flex: 0 0 calc(100% / 12 * 4);
}

.is-flex-5,
.is-5,
.is-mobile-5 {
  flex: 0 0 calc(100% / 12 * 5);
}

.is-flex-6,
.is-6,
.is-mobile-6 {
  flex: 0 0 calc(100% / 12 * 6);
}

.is-flex-7,
.is-7,
.is-mobile-7 {
  flex: 0 0 calc(100% / 12 * 7);
}

.is-flex-8,
.is-8,
.is-mobile-8 {
  flex: 0 0 calc(100% / 12 * 8);
}

.is-flex-9,
.is-9,
.is-mobile-9 {
  flex: 0 0 calc(100% / 12 * 9);
}

.is-flex-10,
.is-10,
.is-mobile-10 {
  flex: 0 0 calc(100% / 12 * 10);
}

.is-flex-11,
.is-11,
.is-mobile-11 {
  flex: 0 0 calc(100% / 12 * 11);
}

.is-flex-12,
.is-12,
.is-mobile-12 {
  flex: 0 0 100%;
}

.is-flex-0,
.is-0,
.is-mobile-0 {
  flex: 1 0;
}

.is-flex-fill {
  flex: 1 0 auto;
}

.is-flex-full,
.is-full,
.is-mobile-full {
  flex: 0 1 100%;
  width: 100%;
}

.is-flex-auto,
.is-auto,
.is-mobile-auto {
  flex: 0 1 auto;
}

.is-flex-none {
  flex: none;
}