.Row {
  display: flex;
  flex-direction: column;

  @media screen and (min-width: $lg) {
    flex-direction: row;
    flex-wrap: wrap;

    > .col {
      flex: 1 1 0%;
    }

    > [class*="col-"] {
      flex: 0 1 auto;
    }

    &._reversed {
      flex-direction: row-reverse;
    }

    &._centered {
      justify-content: center;
    }

    @for $i from 1 through 12 {
      $width: 100% / 12 * $i;

      > .col-#{$i} {
        width: $width;
      }

      ._offset-#{$i} {
        margin-left: $width;
      }
    }
  }

  &._gutters-x {
    @include row-gutters(24px);
  }

  &._gutters-y {
    row-gap: 24px;
  }

  &._gutters-y-lg {
    row-gap: 32px;
  }
}