html {
  scroll-behavior: smooth;
}

.h2-navigation {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.h2-navigation__title {
  width: 100%;
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Button container — wraps exactly 5 per row */
.h2-navigation-buttons-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 1%;
  width: 100%;
}
.mt--1 {
  margin-top: 1rem;
}

.h2-navigation-buttons {
  flex: 0 1 calc(19% - 1%); /* 5 per row, accounting for gap */
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

.h2-navigation__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 48px; /* makes all buttons same height */
}

/* Responsive breakpoints */
@media (max-width: 992px) {
  .h2-navigation-buttons {
    flex: 0 1 calc(32% - 1%); /* 3 per row */
  }
}

@media (max-width: 576px) {
  .h2-navigation-buttons {
    flex: 0 1 calc(48% - 1%); /* 2 per row */
  }

  .h2-navigation__title {
    font-size: 1.2rem;
    white-space: normal; /* allow wrapping on small screens */
  }
}