$background-height: 302px;

.crisis-hero {
  background: image-url('backgrounds/crisis-header.jpg') no-repeat;

  @include breakpoint(lg) {
    background-size: 100% $background-height;
  }
}

.left-border-content {
  border-left: 6px solid $state-warning-border;
  padding: $margin-double;

  @include breakpoint(sm) {
    padding: $margin-quadruple $margin-triple;
  }

  ul {
    padding-left: 1em;
    list-style: disc;
  }
}

.large-text {
  font-size: 1.8rem;
}

.crisis-date {
  color: $color-grey;
}

.crisis-header {
  height: $background-height;
  position: relative;
}

.crisis-heading {
  position: absolute;
  bottom: 60px;
  color: $color-white;
  padding-right: $margin-normal;
}