div.theme-atomik {
  div.ccm-block-hero-image-offset-title {

    @include media-breakpoint-up(lg) {
      margin-top: 2rem;
      margin-bottom: 4rem;

    }

    img {
      // Standard responsive behaviors by default.
      max-width: 100%;
      height: auto;

      @include media-breakpoint-down(lg) {
        // Once the screen gets smaller let's change how this works.
        height: 400px;
        object-fit: cover;
      }
    }


    div.ccm-block-hero-image-text {

      text-align: center;

      @include media-breakpoint-up(lg) {
        margin-left: 6rem;
        margin-right: 6rem;
      }

      @include media-breakpoint-up(xl) {
        position: relative;
        z-index: 2;
        margin-top: -6rem; // put the h1 on top of the image.
        background-color: $body-bg;
      }

      h1 {
        font-family: $display-font-family;
        @extend .display-2;
        padding-top: 3rem;
        padding-bottom: 3rem;
        margin-bottom: 0;

      }

      p {
        @include line-height-crop(3);
        font-size: $lead-font-size;
        color: $secondary;
      }
    }

  }
}