Aam-Digital/ndb-core

@use "../variables/sizes";

/*
 * Can be used to create an adaptive grid-layout where the items will take
 * up all horizontal space given. The items won't shrink smaller
 * than `$min-block-width` but instead create a new row. All items
 * have the same width.
 * Below `$max-screen-width`, the grid will only contain a single
 * column and all items will be aligned into a single column.
 */
@mixin adaptive($min-block-width, $max-screen-width: $min-block-width) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax($min-block-width, 1fr));
  grid-gap: sizes.$large;

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