.content-block {
  @include word-break;
  z-index: 1;

  &__eyebrow {
    @include font-style(
      $content-block-eyebrow-font-style,
      $content-block-eyebrow-font-style--l
    );
    color: currentColor;
    margin-bottom: 0;
  }

  &__title {
    & > span {
      display: block;
    }

    .content-block__eyebrow + & {
      margin-top: $spacing--xxs;
    }

    em {
      color: $color-brand--one;
      font-style: normal;
    }

    &--s {
      @include font-style($content-block-title-s, $content-block-title-s--l);
    }
  }

  &__description {
    margin-top: $spacing--s;

    &,
    & p:last-child {
      margin-bottom: 0;
    }
  }

  &__list {
    margin-top: $spacing--s;

    li {
      display: flex; // fix for issue with line-height on li & a
      margin-top: $baseline * 0.5;
    }

    a {
      @include font-style;
      @include text-ellipsis;
      text-decoration: $content-block-list-text-decoration;
    }
  }

  .button {
    margin-top: $spacing--m;
  }

  &__date-socials {
    margin-top: $spacing--s;
  }

  &__date,
  .social__share-text,
  .social__list {
    margin-top: $spacing--xs;
  }

  &__split-text {
    margin-top: $spacing--s;

    p:last-child {
      margin-bottom: 0;
    }
  }

  //column
  &__column {
    &-text {
      margin-top: $spacing--s;
      width: grid-columns(9, 12);
    }
    .button {
      margin-top: 0;
    }
  }

  &__form {
    margin-top: $spacing--m;
  }

  @include content-block-background-mapping;
}

// viewport s - m
@include viewport--l('inversed') {
  .content-block {
    width: 100%;

    &__bubble {
      @include font-style('title--m');
      margin-top: 5px;
    }
  }
}

// viewport l
@include viewport--l {
  .content-block {
    &__title-bottom {
      text-align: $content-block-title-align;
    }

    &__bubble {
      @include font-style('title--xl');
      display: inline-block;
      padding: 10px 20px 20px 20px;
    }

    &__bubble-top {
      border-radius: 15px 15px 0px 15px;
    }

    &__bubble-bottom {
      border-radius: 0px 15px 15px 15px;
      grid-column-start: 1;
    }

    &__title {
      & > span + span {
        margin-top: $content-block-title-spacing--l;
      }

      .content-block__eyebrow + & {
        margin-top: $spacing--xs;
      }
    }

    // list row layout
    &__list--row {
      display: flex;
      flex-wrap: wrap;

      li:not(:last-child) {
        margin-right: 30px;
      }
    }

    &__list:not(.content-block__list--row) + .button {
      margin-top: $spacing--l;
    }

    &__date-socials {
      display: flex;
      flex-wrap: wrap;
      margin-top: $baseline * 4;
    }

    &__date:not(:only-child) {
      margin-right: 50px; // only add margin if there are siblings
    }
    // full width
    &--full-width {
      width: 100%;
    }
    // split
    &__split {
      align-items: flex-end;
      display: flex;

      &-text {
        width: grid-columns(9, 12);
      }
      // small
      &-text--s {
        margin-top: $spacing--m;
        width: grid-columns(5, 12);
      }

      &-text--s + .button {
        margin-top: $spacing--l;
      }

      .button {
        margin-left: auto;
        max-width: grid-columns(3, 12);
      }
    }

    //column
    &__column {
      display: block;

      &-text {
        margin-top: $spacing--s;
        width: grid-columns(9, 12);
      }
      .button {
        margin-top: 0;
      }
    }

    // inherit from color set for viewport l
    &.text--dark-from-l,
    &.text--light-from-l {
      .content-block__eyebrow,
      .content-block__title,
      .content-block__description {
        color: currentColor;
      }
    }

    // dark text - ghost button
    &.text--dark-from-l .button.button {
      // chained to add specificity
      @include button--dark;
    }

    // light text - ghost button
    &.text--light-from-l .button.button {
      // chained to add specificity
      @include button--light;
    }
  }
}