@media (max-width:600px) {
  body > aside {
    max-width:100%;
    margin:0;
    height:78px;
    border:0;
    box-shadow:0 -4px 20px rgba(101,30,72,.08);
    padding:7px;
    border-radius:24px 24px 0 0;
  }
  body > aside > nav {
    display:flex;
    justify-content:flex-start;
    flex-wrap:nowrap;
    width:100%;
    min-width:0;
    height:60px;
    gap:6px;
    align-items:center;
    overflow-x:auto;
    overflow-y:hidden;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
  }
  body > aside > nav > a,
  body > aside > nav > a:not(.active) {
    flex:0 0 auto;
    min-width:52px;
    padding:4px 8px;
    height:44px;
    gap:0;
    color:var(--muted);
    justify-content:center;
    font-size:0;
    border-radius:16px;
    background:transparent;
    box-shadow:none;
  }
  body > aside > nav > a > i {
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    border-radius:13px;
    background:#fff6fa;
    color:var(--pink);
    font-size:18px;
    box-shadow:inset 0 0 0 1px #f7deea;
  }
  body > aside > nav > a.active {
    color:var(--hot);
    background:linear-gradient(135deg,#ffe4f1,#fff3f8);
    box-shadow:0 9px 20px #bd287519;
  }
  body > aside > nav > a.active > i {
    color:#fff;
    background:linear-gradient(135deg,var(--pink),#ff70b6);
    box-shadow:0 7px 16px #ef168f45;
  }
  .hero .btn,
  .sweet-welcome > .btn {
    display:inline-flex;
    justify-content:center;
    align-items:center;
    max-width:100%;
    white-space:normal;
    text-align:center;
    line-height:1.35;
    overflow-wrap:break-word;
  }
}