.grid {
  --gutter: 1rem;
  width: 100%;

  .row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    margin-right: calc(var(--gutter) / -2);
    margin-left: calc(var(--gutter) / -2);

    & > * {
      flex-shrink: 0;
      width: 100%;
      max-width: 100%;

      padding-right: calc(var(--gutter) / 2);
      padding-left: calc(var(--gutter) / 2);
      margin-top: var(--gutter);
    }

    .col {
      flex: 1 0 0%;
    }

    @for $i from 1 through 6 {
      .col-#{$i} {
        flex: 1 0 auto;
        width: percentage($i / 6);
      }
    }
  }
}

@media (max-width: 768px) {
  .grid .row {
    display: block;
  }
}