Code
css
/* Mobile first */
.container {
width: 100%;
padding: 10px;
}
/* Tablet */
@media (min-width: 768px) {
.container {
max-width: 720px;
padding: 20px;
}
}
/* Desktop */
@media (min-width: 1024px) {
.container {
max-width: 960px;
}
}
/* Large screen */
@media (min-width: 1440px) {
.container {
max-width: 1200px;
}
}
/* Orientation */
@media (orientation: landscape) {
.grid { grid-template-columns: 1fr 1fr; }
}
/* Dark mode */
@media (prefers-color-scheme: dark) {
body { background: #1a1a1a; color: #f0f0f0; }
}
/* Reduce animation */
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; transition: none !important; }
}
/* Print */
@media print {
.no-print { display: none; }
body { font-size: 12pt; }
}
/* Hover support */
@media (hover: hover) {
.card:hover { transform: scale(1.05); }
}