@mixin flex-grid($cols, $gutter: $column-spacing) {
  display: flex;
  flex-wrap: wrap;
  margin-left: -$gutter;
  margin-top: -$gutter;

  > div {
    width: calc((100%/#{$cols}) - #{$gutter});
    margin-left: $gutter;
    margin-top: $gutter;
  }
}

%flex-grid-2,
.flex-grid-2,
.view--flex-grid-2 > .view__content > .view-content,
.view--flex-grid-2.view--page > .view__content .main > .view-content {
  @include breakpoint($tablet-lg, max-width) {
    > div ~ div {
      margin-top: $row-spacing;
    }
  }

  @include breakpoint($tablet-lg) {
    @include flex-grid(2);
  }
}

%flex-grid-3,
.flex-grid-3,
.view--flex-grid-3 > .view__content > .view-content,
.view--flex-grid-3.view--page > .view__content .main > .view-content {
  @include breakpoint($tablet, max-width) {
    > div ~ div {
      margin-top: $row-spacing;
    }
  }

  @include breakpoint($tablet) {
    @include flex-grid(3);
  }
}

%flex-grid-4,
.flex-grid-4,
.view--flex-grid-4 > .view__content > .view-content,
.view--flex-grid-4.view--page > .view__content .main > .view-content {
  @include breakpoint($tablet, max-width) {
    > div ~ div {
      margin-top: $row-spacing;
    }
  }

  @include breakpoint($tablet) {
    @include flex-grid(2);
  }

  @include breakpoint($desktop) {
    @include flex-grid(4);
  }
}

%flex-grid-5,
.flex-grid-5,
.view--flex-grid-5 > .view__content > .view-content,
.view--flex-grid-5.view--page > .view__content .main > .view-content {
  @include flex-grid(2);

  @include breakpoint($tablet) {
    @include flex-grid(3);
  }
  @include breakpoint($desktop) {
    @include flex-grid(5);
  }
}


.view--flex-grid-2,
.view--flex-grid-3,
.view--flex-grid-4,
.view--flex-grid-5 {
  &.view--page-with-no-filters > .view__content .main {
    width: 100%;
  }
}

@include breakpoint($desktop) {
  .inline-column-50-50 {
    float: left;
    width: 50%;
    padding-right: 1rem;

    + .inline-column-50-50 {
      padding-left: 1rem;
      padding-right: 0;

      + * {
        clear: both;
      }
    }
  }
}

// legacy css for inline html
@include breakpoint($desktop) {
  body.theme--ftc-uswds article .clearfix {

    > .col2-first,
    > .col2-last {
      width: calc((100% - 2rem) / 2) !important;
      float: left;
      margin-right: 0;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      margin-left: 0;
      padding-top: 23px;
      
    }

    > .col2-first {
      margin-right: 2rem;
    }
  }
}