.flex {
  display: flex;
  flex-flow: row wrap;
  gap: var(--flex-grid-gap);
  align-content: flex-start;
  align-items: flex-start;
  justify-content: flex-start;

  &.align-items-center {
    align-items: center;
  }

  &.gap-0 {
    gap: 0;
  }

  &.gap-2 {
    gap: calc(var(--flex-grid-gap) * 2);
  }
  &.column-gap-2 {
    column-gap: calc(var(--flex-grid-gap) * 2);
  }

  &.justify-content-space-between {
    justify-content: space-between;
  }
  &.justify-content-flex-end {
    justify-content: flex-end;
  }
  &.justify-content-center {
    justify-content: center;
  }

}

/* utilizzata anche da grid */

.align-self-center {
  align-self: center;
}
.align-self-end {
  align-self: end;
}