.#{$ns}Form-groupColumn {
  margin-bottom: $gap-sm;
}

@include media-breakpoint-up(md) {
  .#{$ns}Form-group {
    margin-bottom: $Form-item-gap;

    .#{$ns}Form-value > & {
      margin-bottom: $Form-input-marginBottom;
    }

    &--hor {
      display: flex;
      flex-wrap: nowrap;
      margin-left: -$Form-group-gutterWidth / 2;
      margin-right: -$Form-group-gutterWidth / 2;
      align-items: flex-start;

      &.v-middle {
        align-items: center;
      }

      &.v-bottom {
        align-items: flex-end;
      }

      > * {
        padding-left: $Form-group-gutterWidth / 2;
        padding-right: $Form-group-gutterWidth / 2;
      }

      > .#{$ns}Form-item--inline {
        margin-right: 0;
      }

      > .#{$ns}Form-item,
      > div > .#{$ns}Form-item {
        margin-bottom: 0;
      }

      .#{$ns}Form-input > .#{$ns}Form-group {
        margin-bottom: 0;
      }
    }

    &--lg {
      margin-left: -$Form-group--lg-gutterWidth / 2;
      margin-right: -$Form-group--lg-gutterWidth / 2;

      > * {
        padding-left: $Form-group--lg-gutterWidth / 2;
        padding-right: $Form-group--lg-gutterWidth / 2;
      }
    }

    &--md {
      margin-left: -$Form-group--md-gutterWidth / 2;
      margin-right: -$Form-group--md-gutterWidth / 2;

      > * {
        padding-left: $Form-group--md-gutterWidth / 2;
        padding-right: $Form-group--md-gutterWidth / 2;
      }
    }

    &--sm {
      margin-left: -$Form-group--sm-gutterWidth / 2;
      margin-right: -$Form-group--sm-gutterWidth / 2;

      > * {
        padding-left: $Form-group--sm-gutterWidth / 2;
        padding-right: $Form-group--sm-gutterWidth / 2;
      }
    }

    &--xs {
      margin-left: -$Form-group--xs-gutterWidth / 2;
      margin-right: -$Form-group--xs-gutterWidth / 2;

      > * {
        padding-left: $Form-group--xs-gutterWidth / 2;
        padding-right: $Form-group--xs-gutterWidth / 2;
      }
    }
  }

  .#{$ns}Form-groupColumn {
    flex-basis: 0;
    flex-grow: 1;
    width: 0;
    max-width: 100%;
    margin-bottom: 0;
  }

  @for $i from (1) through $Form--horizontal-columns {
    .#{$ns}Form-groupColumn--#{$i} {
      flex: 0 0 percentage($i / $Form--horizontal-columns);
      max-width: percentage($i / $Form--horizontal-columns);
      min-height: 1px;
    }
  }
}