html {
  scroll-behavior: smooth;
}

.site-nav {
  scrollbar-width: none;
}

.site-nav::-webkit-scrollbar {
  display: none;
}

@media (max-width: 700px) {
  .site-brandbar {
    height: auto !important;
    min-height: 64px;
    padding: 8px 16px !important;
    gap: 12px !important;
  }

  .site-brand-left {
    flex: 1 1 auto;
    gap: 8px !important;
  }

  .nus-wordmark {
    font-size: 27px !important;
  }

  .nus-divider {
    flex: 0 0 2px;
    height: 32px !important;
  }

  .nus-school {
    min-width: 0;
    font-size: 13px !important;
    line-height: 1.18 !important;
  }

  .rise-link {
    flex: 0 0 auto;
    font-size: 16px !important;
  }

  .site-nav {
    height: 46px !important;
    padding: 0 16px !important;
    gap: 22px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .site-nav a {
    flex: 0 0 auto;
  }

  .site-main,
  .site-footer-inner {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .profile-hero {
    gap: 28px !important;
    padding-top: 36px !important;
  }

  .profile-photo {
    width: 170px !important;
    height: 201px !important;
    margin: 0 auto;
  }

  .profile-content {
    flex-basis: 100% !important;
  }

  .people-grid {
    justify-content: center;
  }
}

@media (max-width: 390px) {
  .site-brandbar {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .site-brand-left {
    gap: 6px !important;
  }

  .nus-wordmark {
    font-size: 25px !important;
  }

  .nus-school {
    font-size: 12px !important;
  }

  .rise-link {
    font-size: 15px !important;
  }
}