@media (max-width: 1199px) {
  .sr-grid--metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sr-grid--main,
  .sr-docs-grid,
  .sr-hero-panel,
  .sr-form-grid,
  .sr-pricing-grid,
  .sr-section-grid,
  .sr-section-grid--three,
  .sr-summary-bar,
  .sr-board {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 991px) {
  body {
    background:
      radial-gradient(circle at top center, rgba(37, 99, 235, 0.12), transparent 24%),
      linear-gradient(180deg, #fafcff 0%, #f4f7fb 60%, #edf2ff 100%);
  }

  .sr-shell,
  .sr-auth-shell {
    grid-template-columns: 1fr;
  }

  .sr-appbar {
    padding: 1rem 1rem 0;
  }

  .sr-navbar {
    padding: 0.85rem;
  }

  .sr-navbar-actions {
    flex-direction: column;
    align-items: stretch;
    margin-top: 1rem;
  }

  .sr-account-toggle {
    justify-content: center;
  }

  .sr-sidebar {
    position: sticky;
    top: 0;
    z-index: 30;
    height: auto;
    padding-bottom: 0;
    overflow: visible;
  }

  .sr-sidebar:not(.sr-sidebar--open) .sr-nav,
  .sr-sidebar:not(.sr-sidebar--open) .sr-sidebar-card,
  .sr-sidebar:not(.sr-sidebar--open) .sr-search-chip {
    display: none;
  }

  .sr-sidebar.sr-sidebar--open .sr-nav,
  .sr-sidebar.sr-sidebar--open .sr-sidebar-card,
  .sr-sidebar.sr-sidebar--open .sr-search-chip {
    display: flex;
  }

  .sr-sidebar.sr-sidebar--open .sr-sidebar-card,
  .sr-sidebar.sr-sidebar--open .sr-search-chip {
    display: block;
  }

  .sr-sidebar.sr-sidebar--open .sr-nav,
  .sr-sidebar.sr-sidebar--open .sr-sidebar-card,
  .sr-sidebar.sr-sidebar--open .sr-search-chip {
    margin-top: 1rem;
  }

  .sr-main {
    padding-top: 0.5rem;
  }

  .sr-topbar {
    flex-direction: column;
  }

  .sr-auth-header {
    flex-direction: column;
  }
}

@media (max-width: 767px) {
  .sr-main,
  .sr-sidebar,
  .sr-auth-showcase,
  .sr-auth-panel,
  .sr-utility-shell {
    padding: 1rem;
  }

  .sr-navbar-logo {
    height: 36px;
  }

  .sr-topbar,
  .sr-hero-panel,
  .sr-panel,
  .sr-utility-card {
    padding: 1.15rem;
  }

  .sr-grid--metrics {
    grid-template-columns: 1fr;
  }

  .sr-topbar-actions,
  .sr-inline-actions,
  .sr-auth-stats {
    flex-wrap: wrap;
  }

  .sr-auth-form--fancy {
    padding: 1.25rem;
  }

  .sr-state-item {
    flex-direction: column;
  }

  .sr-state-item span:last-child {
    text-align: left;
  }
}