/* displays */
.d-block {
  display: block;
}
.d-inline {
  display: inline;
}

/* flex */
.d-f {
  display: flex;
}

/* flex-direction */
.d-f-row {
  flex-direction: row;
}
.d-f-row-reverse {
  flex-direction: row-reverse;
}
.d-f-column {
  flex-direction: column;
}
.d-f-column-reverse {
  flex-direction: column-reverse;
}

/* flex-wrap */
.d-f-wrap {
  flex-wrap: wrap;
}
.d-f-nowrap {
  flex-wrap: nowrap;
}
.d-f-wrap-reverse {
  flex-wrap: wrap-reverse;
}

/* justify-content */
.j-c-start {
  justify-content: flex-start;
}
.j-c-end {
  justify-content: flex-end;
}
.j-c-center {
  justify-content: center;
}
.j-c-space-between {
  justify-content: space-between;
}
.j-c-space-around {
  justify-content: space-around;
}

/* align-items */
.a-i-start {
  align-items: flex-start;
}
.a-i-end {
  align-items: flex-end;
}
.a-i-center {
  align-items: center;
}
.a-i-baseline {
  align-items: baseline;
}
.a-i-stretch {
  align-items: stretch;
}

/* align-content */
.a-c-start {
  align-content: flex-start;
}
.a-c-end {
  align-content: flex-end;
}
.a-c-center {
  align-content: center;
}
.a-c-space-between {
  align-content: space-between;
}
.a-c-space-around {
  align-content: space-around;
}
.a-c-stretch {
  align-content: stretch;
}

/* align-self */
.a-s-auto {
  align-self: auto;
}
.a-s-start {
  align-self: flex-start;
}
.a-s-end {
  align-self: flex-end;
}
.a-s-center {
  align-self: center;
}
.a-s-baseline {
  align-self: baseline;
}
.a-s-stretch {
  align-self: stretch;
}

/* order */
.o-1 {
  order: 1;
}
.o-2 {
  order: 2;
}
.o-3 {
  order: 3;
}
.o-4 {
  order: 4;
}
.o-5 {
  order: 5;
}
.o-6 {
  order: 6;
}
.o-7 {
  order: 7;
}
.o-8 {
  order: 8;
}
.o-9 {
  order: 9;
}
.o-10 {
  order: 10;
}
.o-11 {
  order: 11;
}
.o-12 {
  order: 12;
}

/* flex-grow */
.f-g-0 {
  flex-grow: 0;
}
.f-g-1 {
  flex-grow: 1;
}

/* flex-shrink */
.f-s-0 {
  flex-shrink: 0;
}
.f-s-1 {
  flex-shrink: 1;
}

/* flex-basis */
.f-b-auto {
  flex-basis: auto;
}
.f-b-0 {
  flex-basis: 0;
}
.f-b-25 {
  flex-basis: 25%;
}
.f-b-50 {
  flex-basis: 50%;
}
.f-b-75 {
  flex-basis: 75%;
}
.f-b-100 {
  flex-basis: 100%;
}

/* grid */

.grid {
  display: grid;
}

.grid--cols-2 {
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sm) var(--xl);

  @media screen and (max-width: 768px) {
    grid-template-columns: 1fr;
  }
}

/* text-algin */
.t-a-start {
  text-align: start;
}

.t-a-center {
  text-align: center;
}

.t-a-end {
  text-align: end;
}

/* height & width */

.h-100 {
  height: 100%;
}

.w-100 {
  width: 100%;
}