.region--below-header nav {
  align-items: center;
  display: flex;
  font-size: var(--dcc-font-size-100);
  justify-content: space-between;
  line-height: var(--dcc-line-height-700);
  min-height: 84px;
}

.region--below-header nav h2 {
  align-self: center;
  font-size: var(--dcc-font-size-200);
  line-height: var(--dcc-line-height-400);
  margin: 0;
  padding: 0;
  width: max-content;
}

.region--below-header ul.menu {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--dcc-spacing-100);
  margin: 0;
  padding: 0;
}

.region--below-header .menu-item {
  height: auto;
  list-style: none;
  padding: 0;
  text-align: center;
  width: auto;
}

.region--below-header .menu-item a {
  text-decoration: none;
  color: var(--dcc-pallete-neutral-black);
  padding-block: 0;
  padding-inline: 0;
  transition: none;

  &:hover {
    text-decoration: underline;
    text-decoration-thickness: var(--dcc-link-text-decoration-thickness);
    text-underline-offset: var(--dcc-link-text-underline-offset);
  }
}

.region--below-header .menu-item .is-active,
.region--below-header .menu-item.menu-item--active-trail a {
  font-weight: bold;
}

@media screen and (min-width: 40em) {
  .region--below-header nav h2 {
    width: auto;
  }

  .region--below-header ul.menu {
    gap: var(--dcc-spacing-200);
  }
}

@media screen and (min-width: 64em) {
  .region--below-header ul.menu {
    gap: 0;
    margin: 0 calc(-1 * var(--dcc-spacing-100)) 0 0;
  }

  .region--below-header .menu-item a {
    padding-block: var(--dcc-spacing-100);
    padding-inline: var(--dcc-spacing-100);
  }
}