.l-flex {
  display: flex;

  &.wrap {
    flex-wrap: wrap;
  }

  &__auto {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
  }

  &__fill {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
  }

  &__none {
    flex: none;
  }
}

.l-flex--row {
  display: flex;
  align-items: center;

  &.center {
    justify-content: center;
  }
}

.l-flex--col {
  display: flex;
  flex-direction: column;

  &.center {
    align-items: center;
  }

  &.jcenter {
    justify-content: center;
  }
}

.l-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(100px, 1fr));
  grid-template-rows: max-content;
  grid-row-gap: $spacing;
  grid-column-gap: $spacing;
  min-height: 0;
  min-width: 0;

  &.large {
    grid-template-columns: repeat(3, minmax(100px, 1fr));
  }
}


.l-grid--info {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  grid-template-rows: max-content;
  grid-row-gap: $spacing;
  grid-column-gap: $spacing;
  align-items: start;
  min-height: 0;
  min-width: 0;

  &.medium {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }

  &.small {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }

  &.mini {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
}
