@media (max-width: 760px) {
  .home-page {
    padding-top: 18px;
  }

  .hero-character {
    width: 100%;
    max-width: 430px;
    height: clamp(240px, 68vw, 300px);
    margin: -22px 0 10px;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: url("/assets/hero-character.png") center 42% / min(115vw, 430px) auto no-repeat;
  }

  .hero-character img {
    opacity: 0;
  }

  .home-nav {
    width: min(100%, 300px);
    max-width: 300px;
    gap: 12px 8px;
  }

  .icon-button {
    width: 100%;
    min-width: 0;
  }

  .icon-button__glyph {
    width: 60px;
    height: 60px;
  }

  .icon-button__label {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}