$big-content-teaser-height-sm: ms(35);
$big-content-teaser-height-md: ms(40);

.wall-note {
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  min-height: 100vh;
}

.wall-note__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: $spacer-sm;
  background-color: $wall-note-content-bg-color;
  padding: $spacer-lg $spacer-base;
  max-width: $default-page-layout-content-width-md;
}

.wall-note__heading {
  @extend %h1;
  text-align: center;
  font-size: $font-size-xxl;
}

.wall-note__subheading {
  @extend %teaser-caption;
}

.wall-note__text {
  @extend %body-font-italic;

  font-size: $font-size-sm;
  // IE11 Hack
  // sass-lint:disable no-vendor-prefixes
  @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
    max-width: 100%;
  }
}

//Breakpoints
@media screen and (min-width: $grid-breakpoint-md) {
  .wall-note__content {
    padding: $spacer-xl $spacer-lg;
  }

  .wall-note__text {
    font-size: $font-size-lg;
  }
}