/* stylelint-disable media-feature-range-notation */
#html-external-header-v3 .nav-dropdown-wrapper .nav-dropdown-menu {
    gap: 16px;
  }
  
  #html-external-header-v3 .nav-dropdown-wrapper .nav-showcase-wrapper,
  #html-external-header-v3 .nav-dropdown-wrapper .nav-dropdown-grid-wrapper {
    grid-template-columns: 1fr;
  }
  
  #html-external-header-v3 .nav-dropdown-wrapper .spotlight-card {
    max-width: 330px;
    min-width: 330px;
  }
  
  /* For XL screens and above */
  @media (min-width: 1200px) {
    #html-external-header-v3 .nav-dropdown-wrapper .nav-showcase-wrapper,
    #html-external-header-v3 .nav-dropdown-wrapper .nav-dropdown-grid-wrapper {
      grid-template-columns: repeat(3, minmax(234px, 1fr));
    }
  }
  
  /* For This specific break point */
  @media (min-width: 768px) and (max-width: 1200px) {
    #html-external-header-v3 .nav-dropdown-wrapper .spotlight-card {
      max-width: 270px;
      min-width: 270px;
    }
  
    #html-external-header-v3 .nav-dropdown-wrapper .nav-dropdown-menu {
      gap: 16px;
    }
  
    #html-external-header-v3 .nav-dropdown-wrapper .nav-showcase-wrapper,
    #html-external-header-v3 .nav-dropdown-wrapper .nav-dropdown-grid-wrapper {
      grid-template-columns: repeat(3, minmax(200px, 1fr));
    }
  }
  
  #html-external-header-v3 .nav-dropdown-desktop-toggle[aria-expanded='true'] .toggle-collapsed,
  #html-external-header-v3 .nav-dropdown-mobile-toggle[aria-expanded='true'] .toggle-collapsed {
    animation: rotate 150ms;
    transform: rotate(180deg);
  }
  
  #html-external-header-v3 .nav-dropdown-desktop-toggle[aria-expanded='true'] {
    box-shadow: 0 -3px 0 inset #00beac !important;
  }
  
  #html-external-header-v3 .nav-dropdown-desktop-toggle[aria-expanded='false'] {
    box-shadow: none;
  }
  
  /* Overwrite bootstrap transition 
      For some reason, when adding custom `mouseover` event top expand dropdown, it blocks subsequents events (i.e. hovering multiple elements in a fast sequence)
  */
  @media (min-width: 992px) {
    #html-external-header-v3 .nav-dropdown-wrapper.collapsing {
      transition: none !important;
    }
  
    #html-external-header-v3 .nav-dropdown-wrapper {
      opacity: 0%;
      visibility: hidden;
      transition: max-height 250ms ease;
    }
  
    #html-external-header-v3 .nav-dropdown-wrapper.show {
      opacity: 100%;
      visibility: visible;
      transition: opacity 250ms ease;
    }
  }