@media (min-width: 901px) {
  #main-navigation .nav-list,
  .topbar .navlinks {
    gap: clamp(10px, 1.25vw, 20px) !important;
  }

  #main-navigation .nav-link,
  .topbar .navlinks a {
    font-size: clamp(10px, .82vw, 13px) !important;
    white-space: nowrap;
  }
}

@media (min-width: 901px) and (max-width: 1120px) {
  #main-navigation .nav-list,
  .topbar .navlinks {
    gap: 9px !important;
  }

  #main-navigation .nav-link,
  .topbar .navlinks a {
    font-size: 10px !important;
  }
}
/* Shared two-column hero treatment for all VIBE module pages. */
.hero .hero-grid.has-hero-right-visual {
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) !important;
  align-items: center;
  gap: clamp(24px, 3vw, 56px);
}

.hero .hero-grid.has-hero-right-visual > .visual {
  display: none !important;
}

.hero-right-visual {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  transform: translateY(70px);
}

.hero-right-visual img {
  display: block;
  width: min(100%, 760px);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 24px 38px rgba(20, 73, 166, .16));
}

@media (max-width: 900px) {
  .hero .hero-grid.has-hero-right-visual {
    grid-template-columns: 1fr !important;
  }

  .hero-right-visual {
    display: none;
  }
}