// Breakpoints
$o-usp-grid-2-grid: 650;
$o-usp-grid-3-grid: 1050;

.o-usp-grid {}

.o-usp-grid__heading {
  margin-bottom: 60px;
}

.o-usp-grid__main {
  @include flex(flex-start flex-start wrap);
}

// Mobile
$o-usp-grid-gap: 40px;
@include mq($max: $o-usp-grid-2-grid) {
  .o-usp-grid__main {
    > * + * {
      margin-top: $o-usp-grid-gap;
    }
  }

  .o-usp-grid__usp {
    max-width: 450px;
  }
}

// 2 - grid
$o-usp-grid-gap: 25px;
$o-usp-each-row: 2;
@include mq($o-usp-grid-2-grid) {
  .o-usp-grid__main {
    margin: #{$o-usp-grid-gap * -1};
  }

  .o-usp-grid__usp {
    width: calc(100% / #{$o-usp-each-row});
    padding: $o-usp-grid-gap;
  }
}

// 3 - grid
$o-usp-grid-gap: 50px;
$o-usp-each-row: 3;
@include mq($o-usp-grid-3-grid) {
  .o-usp-grid__main {
    margin: #{$o-usp-grid-gap * -1};
  }

  .o-usp-grid__usp {
    width: calc(100% / #{$o-usp-each-row});
    padding: $o-usp-grid-gap;
  }
}