.block-home-hero {
  background-color: var(--color-primary);
  color: var(--color-light);
  position: relative;

  @media (min-width: 1600px) {
    max-width: calc(1320px - 2 * 14px);
    margin: 0 auto;
  }

  svg {
    width: 35px;
  }

  .header-nav-mobile {
    margin-top: 35px;
    justify-content: center;
    display: none;
  }
  
  &.collapsed {
    .header-nav-mobile-close {
      display: none;
    }
  }

  &:not(.collapsed) {
    @media (max-width: 768px) {
      position: unset;

      .header-nav-mobile-open {
        display: none;
      }

      .header-nav-links {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        background-color: var(--color-white);
        justify-content: center;
        align-items: center;
        font-size: 21px;
        gap: 15px;
      }
    }
  }
}

.block-home-hero-image {
  position: absolute;
  display: none;
  top: 0;
  right: 0;
  width: 50%;

  @media (min-width: 768px) {
    display: block;
  }
}

.block-home-hero-brand {
  text-align: center;
}

.block-home-hero-content {
  width: 100%;

  @media (min-width: 768px) {
    width: 50%;
  }

  .header-nav-links {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 20px;

    @media (min-width: 1200px) {
      padding-top: 25px;
      padding-bottom: 60px;
    }

    @media (min-width: 1400px) {
      padding-top: 100px;
    }

    @media (min-width: 1600px) {
      padding-top: 0;
    }

    .main-navigation-link {
      text-transform: uppercase;
      letter-spacing: 1px;
      font-size: 14px;
      font-weight: var(--font-weight-semibold);

      a {
        text-decoration: none;
      }
    }    
  }

  .block-home-hero-brand {
    svg {
      margin: 80px auto;
      width: 60%;

      @media (min-width: 768px) {
        margin: 80px 80px 40px 80px;
        max-width: calc(100% - 2 * 80px);
      }

      @media (min-width: 992px) {
        margin: 80px 80px;
      }

      @media (min-width: 1200px) {
        margin: 175px 80px 145px 80px;
      }
    }
  }

}

.block-home-hero-navigation {
  padding-top: 0px;
  padding-bottom: 80px;
  margin-left: 30px;
  margin-right: 30px;

  @media (min-width: 1200px) {
    padding-bottom: 0;
  }
}