_homepage-hero.scss

.homepage-hero {
  display: flex;
  flex-direction: column;
  margin-top: 70px;
  margin-bottom: 5px;

  @include breakpoint(tablet){
    margin-top: 50px;
  }

  &__content {
    display: flex;
    flex-direction: column;
    position: relative;
    justify-content: center;

    &__header {
      display: flex;
      flex-direction: column;
      padding: 10px 20px;

      &__pre {
        text-align: center;
        color: var(--prehader-color-mobile )
      }
    
      &__title {
        margin-top: 0;
        margin-bottom: 40px;
        text-align: center;
        color: var(--headline-color-mobile);
      }
    
      &__cta {
        padding: 15px 20px;
        text-align: center;
        border: 0;
        border-radius: 5px;
        margin-bottom: 30px;
        color: var(--cta-color-mobile);
        background: var(--cta-background-color-mobile);
      }
    }

    &__picture {
      z-index: -1;
    }

    &__link {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      cursor: pointer;
      z-index: 3;
    }
    
    &__video {
      z-index: -1;
      width: 100%;
      height: 100%;
    }

    &__button {
      align-self: center;
      display: flex;
      z-index: 100;
      flex-wrap: wrap;
      justify-content: center;
      width: 100%;
      align-content: space-around;
      align-items: center;

      @include breakpoint(mobileOnly){
        flex-wrap: initial;
        flex-direction: column;
      }
    }

    &__header{

      &__button{

        &__cta {
          border: 0;
          color: var(--cta-hero1-color);
          background: var(--cta-hero1-background-color);
          justify-content: center;
          padding: 15px 35px;
          text-align: center;
          border-radius: 5px;
          display: flex;
          margin: 10px 5px;
          align-self: center;

          @include breakpoint(tablet){
            margin: 10px 25px;
          }

          &:last-child{
            color: var(--cta-hero2-color);
            background: var(--cta-hero2-background-color);
          }
        }
      }
    }
  }
}