/* ============================================
   Block: Hero with Menu
   ============================================ */

.block-hero-menu {
  text-align: center;
  padding-top: calc(var(--header-height) + 100px);

  & .title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    max-width:600px;
    margin:0 auto 1rem;
  }

  & .subtitle {
    font-size: clamp(1rem, 2.5vw, 1.375rem);
    margin-bottom: var(--space-lg);
  }

  & .featured-image {
    position: relative;
    margin-bottom: calc(-1 * var(--space-lg));

    & > img {
      display: block;
      max-width: 100%;
      height: auto;
      margin: 0 auto;
    }

    & .greasy-decoration {
      position: absolute;
      bottom: 100px;
      left: 20;
      width: 150px;
      pointer-events: none;
    }
  }

  & .menu-svg {
    & svg {
      display: block;
      max-width: 100%;
      height: auto;
      margin: 0 auto;
      fill: currentColor;
      position:relative;
      z-index:1;
    }

    &.desktop-only {
      display: block;

      @media (max-width: 767px) {
        display: none;
      }
    }

    &.mobile-only {
      display: none;

      @media (max-width: 767px) {
        display: block;
      }
    }
  }


  &.pb-sm { padding-bottom: var(--space-sm); }
  &.pb-md { padding-bottom: var(--space-md); }
  &.pb-lg { padding-bottom: var(--space-lg); }
  &.pb-xl { padding-bottom: var(--space-xl); }
}