@media (max-width: 768px) {
  /* Navigation */
  nav {
    flex-direction: column;
    gap: var(--padding-m);
    padding: var(--padding-m);
  }

  nav button {
    width: 100%;
    text-align: center;
  }

  /* Board Section */
  section {
    flex-direction: column;
    gap: var(--padding-l);
    padding: var(--padding-m);
  }

  section .task-column {
    width: 100%;
  }

  /* Task cards */
  section .task-column .task {
    font-size: 0.95rem;
  }

  section .task-column .task button {
    width: 100%;
    align-self: stretch;
  }

  /* Modal */
  .modal .center {
    width: 90%;
    padding: var(--padding-l);
  }

  .modal .center button {
    width: 100%;
  }
}

/* =========================
   EXTRA SMALL DEVICES
   ========================= */
@media (max-width: 480px) {
  :root {
    --nav-padding: 10px;
    --section-padding: 10px;
  }

  nav {
    padding: var(--padding-s);
  }

  section {
    padding: var(--padding-s);
  }

  section .task-column {
    padding: var(--padding-s);
  }

  .modal .center {
    padding: var(--padding-m);
  }
}