/* some utility classes for divs for commonly used cases */

/* justify-content: start */
.stack {
  display: flex;
  flex-direction: column;
  justify-content: start;
  gap: var(--crotchet);

  &.row {
    flex-direction: row;
  }

  &.row--end {
    flex-direction: row;
    justify-content: end;
  }

  &.center {
    align-items: center;
  }

  &.col--start {
    align-items: start;
  }

  &.col--end {
    align-items: end;
  }

  &.gap-m {
    gap: var(--minim);
  }

  &.no-gap {
    gap: 0;
  }
}

/* justify-content: center */
.cluster {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  &.col {
    flex-direction: column;
  }
}

/* justified space-between */
.split {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: var(--crotchet);

  &.col {
    flex-direction: column;
  }

  &.responsive {
    flex-direction: column;
    align-items: start;
  }
}

@media only screen and (min-width: 640px) {
  .split.responsive {
    flex-direction: row;
    align-items: center;
  }
}

div.mv {
  margin-top: var(--semibreve);
  margin-bottom: var(--semibreve);
}

div.mmv {
  margin-top: var(--minim);
  margin-bottom: var(--minim);
}

div.mb {
  margin-bottom: var(--minim);
}