$triplet-divider-height-sm: 2 * $spacer-xxl;
$triplet-divider-height-md: 4 * $spacer-xxl;

.triplet-divider {
  display: flex;
  flex-wrap: wrap;
}

.triplet-divider__center {
  flex-grow: 2;
  text-align: center;
}

.triplet-divider__left {
  background-color: $triplet-divider-bg-color-primary;
  color: $triplet-divider-color-secondary;
}

.triplet-divider__right {
  background-color: $triplet-divider-bg-color-secondary;
  text-align: right;
  color: $triplet-divider-color-primary;
}

.triplet-divider__right,
.triplet-divider__left {
  @extend %heading-font-heavy;

  flex-grow: 1;
  font-size: $font-size-xl;
}

.triplet-divider__right,
.triplet-divider__left,
.triplet-divider__center {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: $spacer-base;
  min-height: $triplet-divider-height-sm;
}

@media screen and (min-width: $grid-breakpoint-md) {
  .triplet-divider__right {
    text-align: left;
  }

  .triplet-divider__right,
  .triplet-divider__left,
  .triplet-divider__center {
    min-height: $triplet-divider-height-md;
  }
}