$o-hexagrid-bp-3:         738;
$o-hexagrid-bp-4:         1124;
$o-hexagrid-bp-5:         1400;

$o-hexagrid-gap--small:   space(4);
$o-hexagrid-gap:          column(0.5, 12);


.o-hexagrid {
  @include contain;
  @include vspacing(
      'margin-top' 1
  );
  position: relative;
}


.o-hexagrid__title {
  @include text-style(2);
  color: palette(text, 800);
  margin-bottom: space(6);
}


.o-hexagrid__subtitle {
  @include text-style(3);
  color: palette(primary, 700);
  margin-bottom: space(2);
}


.o-hexagrid__list {
  display: flex;
  flex-wrap: wrap;
  margin: halve(-$o-hexagrid-gap--small);
  margin-bottom: space(4);
  list-style: none;

  @include mq($o-hexagrid-bp-3) {
    margin: halve(-$o-hexagrid-gap);
    margin-bottom: space(6);
  }
}


.o-hexagrid__item {
  flex: none;
  width: calc((100% / 2) - #{$o-hexagrid-gap--small});
  margin: $o-hexagrid-gap--small / 2;

  @include mq($o-hexagrid-bp-3) {
    width: calc((100% / 3) - #{$o-hexagrid-gap});
    margin: $o-hexagrid-gap / 2;
  }

  @include mq($o-hexagrid-bp-4) {
    width: calc((100% / 4) - #{$o-hexagrid-gap});
  }

  @include mq($o-hexagrid-bp-5) {
    width: calc((100% / 5) - #{$o-hexagrid-gap});
  }
}