/* =============================================================================
   Hero hell
   ========================================================================== */

@scope (.hero) {
  :scope {
    position: relative;
    padding-top: 4.6rem;
    background-color: var(--color-ivory);
    background-image: url('../../images/logo_wasserzeichen_ivory.svg');
    background-repeat: no-repeat;
    background-position: 90% 0;
    background-size: contain;
    background-attachment: fixed;
  }

  @media (width <= 767px) {
    :scope {
      padding-top: 5rem;
    }
  }

  @media (width <= 479px) {
    :scope {
      background-position: 0 100%;
      background-size: cover;
      background-attachment: fixed;
    }
  }
}