// Row gutters
@mixin row-gutters($gutter) {
  & {
    column-gap: $gutter;
  }

  @for $i from 1 through 12 {
    $width: 100% / 12 * $i;
    $diff: ((12 / $i) - 1) * $gutter;
    $gutter-compensation: $diff / (12 / $i);

    > .col-#{$i} {
      width: calc($width - $gutter-compensation);
    }

    ._offset-#{$i} {
      $offset: calc($width - $gutter-compensation);
      margin-left: $offset;
    }
  }

  @media (max-width: $lg) {
    & {
      row-gap: $gutter;
    }

    &,
    .col,
    [class*="col-"] {
      width: auto;
    }

    [class*="_offset-"] {
      margin-left: 0;
    }
  }
}

// Padding
@mixin padding-x($size) {
  padding-left: $size;
  padding-right: $size;
}

@mixin padding-y($size) {
  padding-top: $size;
  padding-bottom: $size;
}