.main-header {
  --band-nav-height: 3.1875rem;
  position: relative;
  font-family: klt;
  font-weight: 100;
}

.main-header .header-content-container {
  padding-block: 1rem;
  background-color: var(--band-color);
  color: var(--band-font-color);
  width: 100%;
}

.main-header #header-content {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  position: relative;
  justify-content: space-between;
  max-width: var(--header-max-width);
  padding: 0;
  padding-left: 16px;
  width: 100%;
  margin-inline: auto;
}

.main-header #header-content > #view-toggle {
  margin-left: auto;
}

.main-header #header-content > .menu-bar {
  margin-left: auto;
  padding-right: 1rem;
}

@media (max-width: 430px) {
  .main-header #header-content {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    gap: 1rem;
    padding-left: 0;
  }

  .main-header #header-content > #view-toggle {
    margin-left: 0
  }

  .main-header #header-content > .menu-bar {
    margin-left: 0;
    padding-right: 0;
  }
}