.teaser-block__body {
  padding: 20px;
  text-align: initial;
}

.teaser-block--bg-image {
  .teaser-block__image:after {
    width: 100%;
    height: 100%;
    content: "";
    position: absolute;
    top: 0;
    left:0;
    transition: background-color 0.2s linear;
    // Set this up as totally transparent to fade-in on hover
    background-color: rgba($colour-dark-blue, 0);
  }

  .teaser-block__body {
    /* Increase padding-top to extend gradient 'reach';
     * provides better accessibility against the first line of text */
    padding: 100px 30px 40px;
    margin: 0;
    width: 100%;
    position: absolute;
    bottom: 0;
    top: auto;
    height: auto;
    background-image: linear-gradient(transparent, $colour-dark-blue);

    /* Ensure the last element is flush to the padding of the block */
    .cr-body {
      height: auto;
      
      > *:last-child {
        margin-bottom: 0;
      }
    }

    /* Re-add our margin to the CTA if present, so the above last-child doesn't
      sit flush with it */
    .teaser-block__cta {
      .btn { 
        margin-top: 20px;
      }
      .link { 
        display: inline-block;
        margin-top: 15px;
        width: auto;
      }
    }
  }

  &:hover,
  .teaser-block__link:focus  {
    .teaser-block__image:after {
      background-color: rgba($colour-dark-blue, 0.5);
    }
  }
}