@media (max-width: 1200px) {
  .stats-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  :root {
    --sidebar-w: 82px;
  }

  .app-sidebar {
    padding: 16px 10px;
  }

  .app-sidebar__brand {
    font-size: 14px;
    padding: 4px 4px 12px;
  }

  .app-sidebar__user {
    padding: 10px 8px;
  }

  .app-sidebar__user-name,
  .app-sidebar__user-role {
    font-size: 11px;
  }

  .app-nav-link {
    font-size: 12px;
    padding: 0 8px;
  }

  .workspace-layout {
    grid-template-columns: 1fr;
  }

  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .account-summary {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .app-topbar {
    padding: 14px 16px;
  }

  .page-wrap {
    padding: 16px;
  }

  .page-title {
    font-size: 24px;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .dashboard-grid--2,
  .stats-grid--3,
  .stats-grid--4 {
    grid-template-columns: 1fr;
  }

  .section-head,
  .list-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .list-row__time {
    white-space: normal;
  }
}

@media (max-width: 980px) {
  .panel__head--stack,
  .comment-card__head {
    flex-direction: column;
    align-items: flex-start;
  }

  .meta-row {
    flex-direction: row;
  }
}

@media (max-width: 980px) {
  .studio-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 700px) {
  .form-grid {
    grid-template-columns: 1fr;
  }

  .app-modal__dialog {
    width: calc(100vw - 16px);
    margin: 8px auto;
  }
}

@media (max-width: 700px) {
  .form-grid {
    grid-template-columns: 1fr;
  }

  .app-modal__dialog {
    width: calc(100vw - 16px);
    margin: 8px auto;
  }
}