.user-logged-in {

  .region-navigation {
    @media (width < 976px) {
      top: calc(
        var(--interface-toolbar-secondary-height-mobile) + var(--interface-toolbar-primary-height) +
          var(--header-height-mobile)
      );
    }

    @media (width>= 976px) and (width < 1024px) {
      left: var(--toolbar-left-width);
      top: calc(var(--header-height-mobile) + var(--interface-toolbar-secondary-height-desktop));
    }
  }

  .region-navigation--active {
    @media (width < 976px) {
      height: calc(
        100vh -
          (
            var(--interface-toolbar-secondary-height-mobile) + var(--interface-toolbar-primary-height) +
              var(--header-height-mobile)
          )
      );
    }

    @media (width>= 976px) and (width < 1024px) {
      height: calc(100vh - (var(--header-height-mobile) + var(--interface-toolbar-secondary-height-desktop)));
      width: calc(100% - var(--toolbar-left-width));
    }
  }

  .hero-slider,
  .hero-banner--promo {
    @media (width < 976px) {
      height: calc(
        100vh - var(--header-height-mobile) - var(--interface-toolbar-secondary-height-mobile) -
          var(--interface-toolbar-primary-height)
      );
    }

    @media (width >= 976px) and (width <= 1024px) {
      height: calc(100vh - var(--interface-toolbar-secondary-height-desktop) - var(--header-height-mobile));
    }
  }
}

body:not(.user-logged-in) {

  .hero-slider,
  .hero-banner--promo {
    @media (width < 1024px) {
      height: calc(100vh - var(--header-height-mobile));
    }
  }
}

.hero-slider,
.hero-banner--promo {
  @media (width >= 1024px) {
    height: 75vh;
  }
}