@import "utils/layout";

$screens: (
  "-sm": 576px,
  "-md": 768px,
  "-lg": 992px,
  "-xl": 1200px,
  "-xxl": 1400px,
);

/*!
 * AyoFlex v1.0.1 (https://ayoflex.ayolib.com/)
 * Copyright 2022 AYOTON
 * Licensed under MIT (https://github.com/ayoton/ayoflex/blob/main/LICENSE)
 */

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.row {
  --gap: 1rem;
  --cw: calc((100% - var(--gap) * 11) / 12);
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
}

.row>* {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding: 0;
}

@include layout("", "100%");

// responsive layouts
@each $name,
$sz in $screens {
  @media screen and (min-width: $sz) {
    @include layout($name, $sz);
  }
}