Responsive design.
One layout. Every screen.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

/* min-width — at least this wide (mobile-first) */
@media (min-width: 768px) {
.box {
background: #1572B6;
}
}
/* Applies when viewport is 768px or wider */

/* max-width — at most this wide (desktop-first) */
@media (max-width: 767px) {
.box {
background: #ef4444;
}
}
/* Applies when viewport is 767px or narrower */

/* Range with and — both conditions must be true */
@media (min-width: 768px) and (max-width: 1023px) {
.box {
background: #10b981;
}
}
/* Applies only between 768-1023px (tablet range) */

/* Modern range syntax (widely supported) */
@media (768px <= width <= 1023px) {
.box {
background: #8b5cf6;
}
}

/* Multiple media queries — stack responsive changes */
.box {
padding: 16px;
font-size: 14px;
}
@media (min-width: 640px) {
.box {
padding: 24px;
font-size: 16px;
}
}
@media (min-width: 1024px) {
.box {
padding: 32px;
font-size: 18px;
}
}

/* MOBILE-FIRST — base styles are for small screens */

/* Base: single column, smaller text (mobile default) */
.card {
display: block;
padding: 16px;
font-size: 15px;
}

.grid {
display: grid;
grid-template-columns: 1fr; /* 1 column on mobile */
gap: 16px;
}

/* Tablet and up: 2 columns, more padding */
@media (min-width: 768px) {
.card {
padding: 24px;
font-size: 16px;
}
.grid {
grid-template-columns: repeat(2, 1fr);
}
}

/* Desktop and up: 3 columns, larger padding */
@media (min-width: 1024px) {
.card {
padding: 32px;
font-size: 17px;
}
.grid {
grid-template-columns: repeat(3, 1fr);
}
}

/* Large desktop: 4 columns */
@media (min-width: 1280px) {
.grid {
grid-template-columns: repeat(4, 1fr);
}
}

/* ================================================================
DESKTOP-FIRST (the older approach — avoid unless you have to)
================================================================ */

/* Base: 4 columns (desktop default) */
.old-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
}

/* Tablet: drop to 2 columns */
@media (max-width: 1023px) {
.old-grid {
grid-template-columns: repeat(2, 1fr);
}
}

/* Mobile: drop to 1 column */
@media (max-width: 767px) {
.old-grid {
grid-template-columns: 1fr;
}
}

/* rem — relative to root font size (16px by default) */
html { font-size: 16px; }
h1 { font-size: 2rem; } /* 32px */
h2 { font-size: 1.5rem; } /* 24px */
body { font-size: 1rem; } /* 16px */
.small { font-size: 0.875rem; } /* 14px */

/* em — relative to the PARENT font size (compounds — usually avoid) */
.card { font-size: 18px; }
.card p { font-size: 1em; } /* 18px (same as parent) */

/* % — relative to the parent */
.container { width: 100%; } /* full width of parent */
.half { width: 50%; } /* half of parent */

/* vw / vh — relative to viewport */
.hero {
width: 100vw; /* full viewport width */
height: 100vh; /* full viewport height */
}
.hero-half {
height: 50vh; /* half viewport height */
}

/* The responsive container pattern */
.container {
width: 100%;
max-width: 1200px; /* cap on very wide screens */
margin: 0 auto; /* center */
padding: 0 16px; /* mobile gutters */
}
@media (min-width: 768px) {
.container { padding: 0 24px; } /* more gutter on larger screens */
}

/* Responsive images */
img {
max-width: 100%; /* never wider than container */
height: auto; /* maintain aspect ratio */
display: block; /* remove inline-image gap */
}

/* ================================================================
UNITS CHEAT SHEET
================================================================ */

/* rem — font sizes, spacing (scales with user accessibility) */
/* % — widths, fluid layouts */
/* vh/vw — full-viewport elements, hero sections */
/* px — borders, small fixed spacing, minimum sizes */
/* em — rarely (compounds — use rem instead) */

/* NEVER use fixed px width on containers */
/* NEVER use vh for content that might overflow — use min-height: 100vh */

/* 1. RESPONSIVE CONTAINER — the most-used pattern */
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 16px;
}
@media (min-width: 768px) {
.container { padding: 0 24px; }
}

/* 2. RESPONSIVE NAV — stack on mobile, row on desktop */
.nav {
display: flex;
flex-direction: column;
gap: 12px;
padding: 16px;
}
@media (min-width: 768px) {
.nav {
flex-direction: row;
justify-content: space-between;
align-items: center;
}
}

/* 3. RESPONSIVE GRID — 1 → 2 → 3 → 4 columns */
.grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
@media (min-width: 640px) {
.grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1280px) {
.grid { grid-template-columns: repeat(4, 1fr); }
}

/* 4. RESPONSIVE TYPOGRAPHY — bigger headings on wider screens */
h1 {
font-size: 1.75rem; /* mobile */
line-height: 1.2;
}
@media (min-width: 768px) {
h1 { font-size: 2.25rem; }
}
@media (min-width: 1024px) {
h1 { font-size: 2.75rem; }
}

/* Or better — fluid typography with clamp() */
h1 {
font-size: clamp(1.75rem, 4vw + 1rem, 2.75rem);
}
/* min 1.75rem, max 2.75rem, scales with viewport between those */

/* 5. RESPONSIVE IMAGES */
img {
max-width: 100%;
height: auto;
display: block;
}

/* Hero image — cover full width, aspect ratio preserved */
.hero-image {
width: 100%;
height: 300px;
object-fit: cover;
object-position: center;
}
@media (min-width: 768px) {
.hero-image { height: 500px; }
}