$divider-center-textbox-offset: $spacer-xxl * 2;

.image-divider-center {
  @extend %page-header;

  margin-bottom: $divider-center-textbox-offset;
  padding-top: $spacer-lg;
  min-height: 50vh;

  &__title {
    @extend %punch-in;

    margin-bottom: $spacer-md;
    padding: 0 $spacer-md;
    text-align: center;
    font-size: $font-size-xxl;
  }
}

.image-divider-center__textbox {
  display: flex;
  position: relative;
  top: $divider-center-textbox-offset;
  flex-direction: column;
  align-items: center;
  margin-top: $spacer-md;
  background-color: $image-divider-center-bg-color;
  padding: $spacer-md;
  max-width: 630px;
  text-align: center;
  box-sizing: content-box;
}

.image-divider-center__textbox__text {
  @extend %body-font-italic;

  color: $image-divider-center-color;
  font-size: $font-size-sm;
  // IE11 Hack
  // sass-lint:disable no-vendor-prefixes
  @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
    max-width: 100%;
  }
}

@media screen and (min-width: $grid-breakpoint-md) {
  .image-divider-center {
    margin-bottom: $divider-center-textbox-offset;
  }

  .image-divider-center__title {
    margin-bottom: $spacer-lg;
    font-size: $font-size-xxxxl;
  }

  .image-divider-center__textbox {
    top: $divider-center-textbox-offset;
    padding: $spacer-lg;
    width: 630px;
  }

  .image-divider-center__textbox__text {
    font-size: $font-size-lg;
  }
}