@media screen and (max-width: 1024px) {
  .site-content.account-page {
    padding: clamp(48px, 10vw, 96px) 0 clamp(110px, 18vw, 160px);
    gap: clamp(36px, 8vw, 48px);
  }

  .account-page__container {
    padding-inline: clamp(16px, 6vw, 48px);
  }

  .profile {
    flex-direction: column;
  }

  .sidebar {
    position: static;
    width: 100%;
    max-height: none;
    padding: clamp(24px, 6vw, 36px);
  }

  .sidebar-scroll-hint {
    display: inline-flex;
    font-size: 0.66rem;
    letter-spacing: 0.22em;
  }

  .main-container.account-surface {
    width: 100%;
    padding: clamp(26px, 6vw, 40px);
  }

  .dashboard-container {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }

  .form-container {
    max-width: none;
  }
}

@media screen and (max-width: 640px) {
  .site-content.account-page {
    padding-top: clamp(64px, 16vw, 88px);
  }

  .account-page__container {
    padding-inline: clamp(14px, 8vw, 28px);
  }

  .dashboard-container {
    grid-template-columns: 1fr;
  }

  .top-buttons {
    flex-direction: column;
  }

  .top-buttons button {
    max-width: none;
    width: 100%;
  }

  .bottom-button button {
    width: 100%;
  }
}