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

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

  .site-header .topbar,
  .full-width-nav .topbar {
    gap: 14px;
  }

  .app-header__bar,
  .admin-header__bar {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .container {
    width: min(var(--ds-container-width), calc(100% - 24px));
  }

  .brand-lockup p {
    display: none;
  }

  .full-width-nav .nav-panel.is-open,
  .site-header .nav-panel.is-open {
    display: grid;
  }

  .app-header__search,
  .admin-header__tools input {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .btn,
  .primary-button,
  .secondary-button,
  .action-button,
  .icon-action-button {
    min-height: 44px;
  }

  .modal,
  .modal-card {
    padding: 14px;
  }
}