.hero {
  color: #fff;
  height: calc(100vh - 230px);
  min-height: 400px;
  max-height: 640px;
  overflow: hidden;
  position: relative; }
  @media screen and (min-width: 1200px) {
    .hero {
      height: 100vh;
      max-height: 700px; } }

.hero__media {
  height: 100%;
  position: relative; }
  .hero__media .media-item .media-item__image article,
  .hero__media .media-item .media-item__image img {
    height: 100%; }
  .hero__media .media-item .media-item__image::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(55deg, black -20%, 10%, rgba(0, 0, 0, 0) 55%); }
    @media screen and (min-width: 768px) {
      .hero__media .media-item .media-item__image::after {
        background: linear-gradient(45deg, black -25%, 15%, rgba(0, 0, 0, 0) 50%); } }

.hero__media-fallback {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0; }
  .hero__media-fallback.video-is-playing {
    display: none; }

.hero__content {
  position: absolute;
  bottom: 90px;
  left: 15px;
  width: 65%;
  z-index: 1; }
  @media screen and (min-width: 768px) {
    .hero__content {
      width: 47%; } }
  @media screen and (min-width: 1200px) {
    .hero__content {
      bottom: 150px;
      left: 80px; } }

.hero__heading {
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.8);
  font-size: 2.25rem;
  margin-bottom: 20px; }
  @media screen and (min-width: 1200px) {
    .hero__heading {
      margin-bottom: 15px;
      font-size: 3rem; } }

.hero__body {
  font-size: 1.125rem;
  line-height: 1.625;
  margin-bottom: 35px; }
  @media screen and (min-width: 1200px) {
    .hero__body {
      margin-bottom: 30px;
      font-size: 1.25rem; } }
  .hero__body p {
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
    margin: 0; }

.hero__arrow-down {
  bottom: 0;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  z-index: 1; }
  @media screen and (min-width: 1200px) {
    .hero__arrow-down {
      bottom: 10px; } }
  .hero__arrow-down svg {
    height: 66px;
    width: 140px; }
    .hero__arrow-down svg path {
      fill: #fff; }

.hero--short {
  height: 450px;
  min-height: 450px; }
  @media screen and (min-width: 1200px) {
    .hero--short {
      height: 375px;
      min-height: 375px; } }
  .hero--short .hero__content {
    bottom: 35px; }
    @media screen and (min-width: 1200px) {
      .hero--short .hero__content {
        bottom: 50%;
        transform: translateY(50%); } }

.hero__media .media-item__btn {
  bottom: 35px; }

.hero--internal,
.hero.subbrand {
  display: block;
  max-height: 450px;
  min-height: unset; }
  .hero--internal .hero__media .media-item .media-item__image::after,
  .hero.subbrand .hero__media .media-item .media-item__image::after {
    display: none; }
  .hero--internal .hero__content,
  .hero.subbrand .hero__content {
    display: block; }
    @media screen and (min-width: 1200px) {
      .hero--internal .hero__content,
      .hero.subbrand .hero__content {
        display: none; } }