@media (max-width: 1200px) {
  .container {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #3f3f3f;
    max-height: 30vh;
  }

  .pending-panel {
    width: 100%;
    border-left: none;
    border-top: 1px solid #3f3f3f;
    max-height: 40vh;
  }

  main {
    padding: 20px;
  }

  .media-modal-body {
    column-count: 2;
  }
}

@media (max-width: 768px) {
  .header-links {
    flex-direction: column;
    gap: 8px;
  }

  .sidebar {
    max-height: 25vh;
  }

  .pending-panel {
    max-height: 35vh;
  }

  .media-modal-body {
    column-count: 1;
  }
}