/* ==========================================================================
   Banner.
   ========================================================================== */
.content-banner {
  position: relative;
  margin-bottom: var(--space-xl);
  border-radius: 4px;
  overflow: hidden;

  img,
  picture {
    display: block;
  }

  &:before {
    content: "";
    position: absolute;
    z-index: 5;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, .2);
  }
}
.content-banner--body {
  position: absolute;
  z-index: 10;
  padding: var(--space-xs) var(--space-l);
  bottom: 0;

  .content-title {
    color: #fff;
  }

  /* Responsive.
     ========================================================================== */
  @media screen and (min-width: 48em) {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
  }
}