1/* Declare variables */
2:root {
3    --color-primary: #C9A84C;
4    --space-md: 1.5rem;
5    --text-xl: clamp(1.5rem, 4vw, 2rem);
6}
7
8/* Use variables */
9h1 {
10    color: var(--color-primary);
11    margin-bottom: var(--space-md);
12    font-size: var(--text-xl);
13}
14
15/* With fallback value */
16p {
17    color: var(--color-primary, #FFD700);
18}

1/* Font scales smoothly between 2rem and 3.5rem based on viewport */
2h1 {
3    font-size: clamp(2rem, 6vw, 3.5rem);
4}
5
6/* Padding scales with viewport */
7section {
8    padding: clamp(1rem, 4vw, 3rem);
9}

1/* Base: Mobile (0px and up) */
2.grid {
3    grid-template-columns: 1fr;
4}
5
6/* Tablet (768px and up) */
7@media (min-width: 768px) {
8    .grid {
9        grid-template-columns: repeat(2, 1fr);
10    }
11}
12
13/* Desktop (1024px and up) */
14@media (min-width: 1024px) {
15    .grid {
16        grid-template-columns: repeat(3, 1fr);
17    }
18}
19
20/* Wide (1280px and up) */
21@media (min-width: 1280px) {
22    .grid {
23        grid-template-columns: repeat(4, 1fr);
24    }
25}

1@media (min-width: 768px) { ... }
2  ^       ^          ^
3  |       |          |
4  rule    condition  breakpoint value

1/* Declare on base state */
2.card {
3    transition: transform 0.3s ease, box-shadow 0.3s ease;
4}
5
6/* Change happens on hover */
7.card:hover {
8    transform: translateY(-8px);
9    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
10}

1transition: property duration timing-function delay;
2transition: transform 0.3s   ease           0s;

1/* Move */
2transform: translateY(-8px);     /* Move up 8px */
3transform: translateX(10px);     /* Move right 10px */
4
5/* Scale */
6transform: scale(1.05);          /* 105% size */
7transform: scale(0.95);          /* 95% size */
8
9/* Rotate */
10transform: rotate(45deg);        /* Rotate 45 degrees */
11
12/* Combine multiple transforms */
13transform: translateY(-10px) scale(1.02);

1/* Basic responsive image */
2img {
3    max-width: 100%;
4    height: auto;
5}
6
7/* Fill container (crop to fit) */
8.card-image img {
9    width: 100%;
10    height: 100%;
11    object-fit: cover;
12}
13
14/* Zoom on hover (contained) */
15.image-container {
16    overflow: hidden;
17}
18
19.image-container img {
20    transition: transform 0.3s ease;
21}
22
23.image-container:hover img {
24    transform: scale(1.05);
25}

1.nav {
2    position: sticky;
3    top: 0;
4    z-index: 100;
5}

1.hero {
2    position: relative;
3    background: url('image.jpg') center / cover;
4}
5
6.hero::before {
7    content: '';
8    position: absolute;
9    top: 0;
10    left: 0;
11    right: 0;
12    bottom: 0;
13    background: linear-gradient(to bottom, rgba(0,0,0,0.7), rgba(0,0,0,0.4));
14}
15
16.hero-content {
17    position: relative;  /* Above the overlay */
18    z-index: 1;
19}

1/* WRONG — fails silently! No error message. */
2color: var(--color-primry);
3
4/* CORRECT */
5color: var(--color-primary);
6
7/* SAFER — use fallback */
8color: var(--color-primary, #C9A84C);

1/* WRONG — this is desktop-first */
2@media (max-width: 768px) { ... }
3
4/* CORRECT — mobile-first uses min-width */
5@media (min-width: 768px) { ... }

1<!-- REQUIRED for responsive design -->
2<meta name="viewport" content="width=device-width, initial-scale=1.0">

1/* WRONG — only animates on hover-in, not hover-out */
2.card:hover {
3    transition: transform 0.3s ease;
4    transform: translateY(-8px);
5}
6
7/* CORRECT — transition on base state */
8.card {
9    transition: transform 0.3s ease;
10}
11.card:hover {
12    transform: translateY(-8px);
13}

1/* AVOID — transitions every property change */
2.card { transition: all 0.3s ease; }
3
4/* BETTER — specific properties only */
5.card { transition: transform 0.3s ease, box-shadow 0.3s ease; }