%row-core {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  min-width: 0;
  margin: auto;
  height: 100%;
  max-height: 100%;
  align-items: stretch;
}

.row {
  @extend %row-core;

  &--reverse {
    @extend %row-core;
    flex-direction: row-reverse;
  }

  &--column {
    @extend %row-core;
    flex-direction: row-reverse;
  }

  &--column-reverse {
    @extend %row-core;
    flex-direction: row-reverse;
  }

  @include mobile-only {
    margin: 0 #{-$grid-space-mobile};
    max-width: calc(100% + (2 * #{$grid-space-mobile}));
  }

  @include breakpoint(568) {
    margin: 0 #{-$grid-space-portrait-tablet};
    max-width: calc(100% + (2 * #{$grid-space-portrait-tablet}));
  }

  @include tablet-landscape-up {
    margin: 0 #{-$grid-space-landscape-tablet};
    max-width: calc(100% + (2 * #{$grid-space-landscape-tablet}));
  }

  @include desktop-up {
    margin: 0 #{-$grid-space-desktop};
    max-width: calc(100% + (2 * #{$grid-space-desktop}));
  }

  @include big-desktop-up {
    margin: 0 #{-$grid-space-big-desktop};
    max-width: calc(100% + (2 * #{$grid-space-big-desktop}));
  }
}