.content-page-card {
  margin-bottom: map-get($spacers, block);

  @include media-breakpoint-down($theme-responsive-text-breakpoint) {
    margin-right: -$marko-web-page-wrapper-padding * 2;
    margin-left: -$marko-web-page-wrapper-padding * 2;
  }

  &__header {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    width: 100%;
  }

  &__header-image-wrapper {
    position: relative;
  }

  &__image-inner-wrapper {
    @include marko-web-node-fluid-image(16, 9);
    position: relative;
    display: block;
  }

  &__image {
    @include marko-web-node-fluid-image-item();
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    border: 0;
  }

  &__header-body {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    width: 80%;
    padding: .5rem 0;
    background-color: rgba($white, .9);
    @include media-breakpoint-down($theme-responsive-text-breakpoint) {
      width: 100%;
      padding-right: $marko-web-page-wrapper-padding * 2;
      padding-left: $marko-web-page-wrapper-padding * 2;
    }
  }

  &__header-image-wrapper + &__header-body {
    margin-top: -124px;
    @include media-breakpoint-down($theme-responsive-text-breakpoint) {
      margin-top: -100px;
    }
    @include media-breakpoint-down(xs) {
      margin-top: 0;
    }
  }

  &__website-section-name {
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -.1px;
  }

  &__content-name {
    @include theme-apply-fonts(
      $font-family: $theme-item-title-font-family,
      $font-size-sm: 30px,
      $font-size: 40px,
      $font-weight: 600,
      $line-height-sm: 1.5,
      $line-height: 1.5,
    );
    color: $theme-page-title-color;

    @include media-breakpoint-down(xs) {
      font-size: 24px;
    }
  }

  &__content-teaser {
    @include theme-apply-fonts(
      $font-family: $theme-font-family-sans-serif,
      $font-size-sm: 18px,
      $font-size: 20px,
      $font-weight: 500,
      $line-height-sm: 1.5,
      $line-height: 1.6,
    );
    color: #222;

    @include media-breakpoint-down(xs) {
      font-size: 17px;
    }
  }

  &__image-credit {
    position: absolute;
    top: 0;
    right: 0;
    padding: .25rem .75rem;
    font-size: .75rem;
    font-weight: 600;
    color: #fff;
    background-color: rgba(64, 71, 93, .5);
  }
}