html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

@media (max-width: 850px) {
  .site-header {
    width: 100%;
    max-width: 100vw;
    gap: 8px;
  }

  .site-header .brand {
    flex: 1 1 auto;
    min-width: 0;
  }

  .site-header .brand > span:last-child {
    min-width: 0;
  }

  .site-header .mobile-home,
  .site-header .mobile-menu {
    flex: 0 0 auto;
    margin-left: 0;
  }

  .site-header .mobile-menu summary {
    min-width: 50px;
    padding-inline: 10px;
  }
}

@media (max-width: 520px) {
  .site-header .mobile-home {
    width: 42px;
    padding: 0;
    justify-content: center;
  }

  .site-header .mobile-home span {
    display: none;
  }
}

@media (max-width: 360px) {
  .site-header {
    padding-inline: 12px;
  }

  .site-header .brand small {
    display: none;
  }
}