@import "../../scss/grid.mixins";
@import "../../scss/typo.mixins";
@import "../../scss/breakpoints.mixins";

.content-banner {
  position: relative;
  color: #fff;
}

.content-banner__img {
  width: 100%;
}

.content-banner__wrapper {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}

.content-banner__container {
  @include make-container;
  @include make-container-max-widths;

  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: center;

  .content-banner--centered & {
    align-items: center;
    text-align: center;
  }
}

.content-banner__tagline {
  @extend %typo-16;

  display: flex;
  text-transform: uppercase;
  flex-direction: column;

  @include media-breakpoint-up(tablet) {
    @include typo-18;
  }

  &::after {
    display: block;
    width: 20px;
    height: 1px;
    margin: 10px 0;
    content: "";
    background: #fff;
  }

  .content-banner--centered & {
    align-items: center;
  }
}

.content-banner__cta {
  margin-top: 32px;
}