.header {
  opacity: 0;
}
.hero {
  height: 60.1875rem;
}
.hero > .hero__wrapper {
  background-color: transparent;
  padding-top: 9.1875rem;
  padding-bottom: 4.6875rem;
  position: relative;
}

.hero .hero__background {
  z-index: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  height: 100%;
  width: 100%;

  transform: scale(0);
  transform-origin: center;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero .hero__content {
  position: relative;
  max-width: 100%;
  z-index: 1;
}
.hero .hero__content .hero__title {
  color: var(--white);
  width: 100%;
}
.hero .hero__content .hero__title > span > span {
  opacity: 0;
}

.hero .hero__description {
  color: #fff;
  width: 100%;
  opacity: 0;
  margin-bottom: 1.6875rem;
}
.hero .hero__btn {
  opacity: 0;
  transition: transform 0.1s ease, background-color 0.3s ease, color 0.3s ease;
}
.hero .hero__button{
  align-self: center;
}
.hero > .hero__wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  flex-grow: 1;
}
.hero .hero__bottom {
  margin-top: auto;
  width: 100%;
}
.hero .hero__content {
  position: relative;
  max-width: 100%;
  z-index: 1;
  
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.hero .hero__text {
  margin-top: auto;
  width: 100%;
}

.hero .hero__button {
  align-self: center;
}
@media screen and (max-width: 959px) {
  .hero .hero__text .hero__description br {
    display: none;
  }
  .hero .hero__content .hero__title{
    text-align: center
  }
  .hero > .hero__wrapper {
    height: 100dvh;
  }
  .hero .hero__bottom{
    height: 100%;
  }
  .hero .hero__text {
    margin-top: 1.125rem;
  }
  .hero .hero__button {
      margin-top: auto;
  }
  .hero > .hero__wrapper {
      padding-top: 7.75rem;
      padding-bottom: 1.75rem;
  }
}

@media screen and (min-width: 960px) {
  .hero .wrapper {
    padding-top: 10.375rem;
    padding-bottom: 5.9375rem;
    /*min-height: calc(100vh + 5.9375rem);*/
  }
  .hero .hero__content {
    width: 100%;
    min-height: auto;
  }
  .hero .hero__content .hero__title {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 0px;
  }
  .hero .hero__content .hero__title > span:first-of-type {
    max-width: 72.9375rem;
    margin-bottom: 9.9375rem;
  }
  .hero .hero__text {
    width: 32.8125rem;
    left: 0px;
  }
  .hero .hero__text .hero__description {
    margin-bottom: 2.890625rem;
  }
  
}