$o-team-bp-1:     436;
$o-team-bp-2:     650;
$o-team-bp-3:     1000;
$o-team-gap--v:   space(10);
$o-team-gap--h:   space(4);


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


.o-team__title {
  color: palette(tertiary, 400);
  margin-bottom: space(6);
}


.o-team__subtitle {
  color: palette(primary, 700);
  margin-bottom: space(2);
}


.o-team__list {
  display: flex;
  flex-wrap: wrap;
  margin: halve(-$o-team-gap--v) 0;
  list-style: none;

  @include mq($o-team-bp-1) {
    margin: halve(-$o-team-gap--v) halve(-$o-team-gap--h);
    margin-bottom: space(6);
  }

  @include mq($bp-max) {
    margin-left: 0;
    margin-right: 0;
  }
}


.o-team__item {
  flex: none;
  margin: space(2) auto;

  @include mq($o-team-bp-1) {
    margin: halve($o-team-gap--v) halve($o-team-gap--h);
    width: calc(#{column(6)} - #{$o-team-gap--h});
  }

  @include mq($o-team-bp-2) {
    width: calc(#{column(4)} - #{$o-team-gap--h});
  }

  @include mq($o-team-bp-3) {
    width: calc(#{column(3)} - #{$o-team-gap--h});
  }
}