Responsive галерея зображень

Створи responsive галерею зображень, яка красиво виглядає на будь-якому екрані. Використай Flexbox для розкладки та CSS transitions для hover-ефектів.

Завдання

Файлова структура

flexbox-gallery/
├── index.html
├── style.css
└── images/         ← 8-12 зображень (можна з picsum.photos)

Вимоги

1. HTML-структура:

• Хедер з назвою галереї
• Секція з фільтрами (кнопки: "Все", "Природа", "Місто", "Люди" — стилізовані, без JS)
• Сітка зображень (8-12 карток)
• Кожна картка: зображення + підпис + категорія
• Футер

2. Flexbox Layout:

• Контейнер карток — display: flex з flex-wrap: wrap
• Картки використовують flex: 1 1 280px (мінімум 280px, ростуть рівномірно)
• gap між картками
• Навігація фільтрів — flex з justify-content: center та gap

3. Responsive:

• Mobile (до 768px): картки на всю ширину (1 колонка)
• Tablet (768px+): 2 колонки
• Desktop (1024px+): 3-4 колонки
• Хедер адаптується (менший font-size на мобільному)

4. Hover-ефекти:

• Картка при наведенні: transform: translateY(-4px) + box-shadow
• Зображення при наведенні: transform: scale(1.05) з overflow: hidden на контейнері
• Кнопки фільтрів: зміна фону при hover
• Всі ефекти з transition

5. Стилізація:

• Google Fonts
• border-radius на картках
• Категорія відображається як бейдж (маленький тег з фоном)
• box-sizing: border-box на всіх елементах

Для зображень

Якщо немає своїх фото, використовуй Lorem Picsum:

<img src="https://picsum.photos/400/300?random=1" alt="Опис фото">
<img src="https://picsum.photos/400/300?random=2" alt="Опис фото">

Підказки

• Для overflow ефекту на зображенні: обгортка з overflow: hidden, зображення з transition: transform 0.3s
• Кнопки фільтрів стилізуй як flex-елементи з gap, без функціональності (це CSS-завдання)
• Для mobile-first: базові стилі — одна колонка, потім @media для tablet та desktop
• aspect-ratio: 4/3 на зображеннях для однакових пропорцій

Критерії оцінки