CSS Media Query ও Responsive Design

@media (max-width: 768px) {
  .sidebar {
    display: none;
  }
}

.container {
  display: block;    /* base: stacked, mobile-এর জন্য */
}

@media (min-width: 768px) {
  .container {
    display: flex;    /* enhanced: পাশাপাশি, tablet আর তার উপরের জন্য */
  }
}

@media (orientation: landscape) { /* উচ্চতার চেয়ে চওড়া */ }
@media (prefers-color-scheme: dark) { /* user-এর dark mode চালু */ }
@media (prefers-reduced-motion: reduce) { /* user কম motion চেয়েছে */ }

@media (min-width: 768px) and (orientation: landscape) {
  .layout { grid-template-columns: 1fr 1fr; }
}