.flex {
  --align-items: center;
  display: flex;
  align-items: var(--align-items);
}

.flex.is-wide-full {
  width: 100%;
}

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

.flex.is-justify-sb {
  justify-content: space-between;
}

.flex.is-justify-c {
  justify-content: center;
}

.flex.is-dir-col {
  flex-direction: column;
  align-items: initial;
  justify-content: var(--align-items);
}

.flex.is-gap-12 {
  gap: 12px;
}

.flex.is-gap-8 {
  gap: 8px;
}

.flex.is-gap-4 {
  gap: 4px;
}

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

@media screen and (max-width: 480px) {
  .flex.is-wrap-mobile {
    flex-wrap: wrap;
  }
}