.Hero {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 560px;
  margin-top: 130px;
  margin-bottom: -80px;
}

.Hero + .Main {
    margin-top: 0;
  }

.Hero .Hero-content {
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--clr-white);
  }

.Hero .Hero-content .Hero-title.Headline {
      margin-bottom: 0;
      word-wrap: normal;
    }

.Hero .Hero-content .Hero-venue.Headline {
      margin-top: var(calc(var(--spaces) * 1.7));
      margin-bottom: var(calc(var(--spaces) * 1.7));
      font-size: 1.125rem;
      font-weight: 900;
    }

@media screen and (min-width: 1024px) {

  .Hero .Hero-content .Hero-venue.Headline {
        font-size: 2.5rem;
    }
      }

.Hero .Hero-content .Hero-link {
      display: flex;
      align-items: center;
      font-size: 1rem;
      font-weight: 700;
      color: var(--clr-white);
    }

.Hero .Hero-content .Hero-link svg {
        width: auto;
        height: var(--spaces);
        margin-right: calc(var(--spaces) / 2);
        fill: var(--clr-white);
      }

.Hero .Hero-content .Hero-link:hover {
        color: var(--clr-primary);

        svg {
          fill: var(--clr-primary);
        }
      }

@media screen and (min-width: 1024px) {

  .Hero .Hero-content .Hero-link {
        font-size: 1.25rem;
    }
      }

.Hero .Hero-content .Hero-breadcrumbs {
      padding: 10px;
      background-color: var(--clr-red);
      color: var(--clr-white);
    }

.Hero .Hero-content .Hero-description {
      max-width: 80%;
      margin-top: calc(-1 * var(--spaces) / 2);
      text-align: center;
    }

@media screen and (min-width: 1024px) {

  .Hero .Hero-content .Hero-description {
        max-width: 50%;
    }
      }

.Hero .Hero-media {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }

.Hero .Hero-media::before {
      content: '';
      position: absolute;
      z-index: 1;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(180deg, rgba(29, 29, 29, 0.2) 0%, var(--clr-black) 100%);
    }

.Hero .Hero-media .Picture {
      position: relative;
      overflow: hidden;
      width: 100%;
      height: 100%;
    }

.Hero .Hero-media .Picture img {
        -o-object-fit: cover;
           object-fit: cover;
        width: 100%;
        height: 100%;
      }

.Hero .Hero-media .Video {
      -o-object-position: 50% 0;
         object-position: 50% 0;
    }

.Hero.Hero--home {
    height: 476px;
  }

.Hero.Hero--home .Hero-content {
      align-items: start;
      justify-content: space-between;
      height: 100%;
      padding-bottom: 100px;
    }

.Hero.Hero--home .Hero-title.Headline {
      margin-top: var(--spaces);
      text-transform: uppercase;
    }

.Hero.Hero--home .Hero-link {
      margin-top: auto;
    }

@media screen and (min-width: 1024px) {

  .Hero.Hero--home {
      height: 90vh;
      margin-bottom: -200px;
  }

      .Hero.Hero--home .Hero-content {
        height: auto;
      }

      .Hero.Hero--home .Hero-title.Headline {
        max-width: 75%;
        margin-top: 0;
        margin-top: initial;
      }
    }