Карточки кошек

Шапка и hero-блок готовы. В редакторе вы найдёте нашу версию; если вы копировали свою, вставьте её поверх нашей. Теперь самая важная часть страницы: кошки.

В разделе «Наши кошки» (id="cats") есть заголовок и div с четырьмя карточками. Каждая карточка — это article с картинкой и div с именем, возрастом, описанием и кнопкой. В карточке Оскара есть ещё span со значком «Новый». Несколько напоминаний из прошлых уроков:

• Колонки для каждой ширины. Классы без префикса действуют при любой ширине, sm: — от 640 px, md: — от 768 px, а lg: — от 1024 px и шире. Одна колонка для телефонов, две для планшетов и четыре для компьютеров: grid gap-6 sm:grid-cols-2 lg:grid-cols-4.
• Обрезанные картинки. object-cover заставляет картинку заполнить свой блок и обрезает то, что не поместилось, чтобы кошка не сплющилась. У блока должен быть размер: w-full и соотношение сторон (aspect-video, aspect-square) или фиксированная высота (h-48). Соотношение сторон обрезает картинку одинаково при любой ширине.
• Скруглённые углы. Если у карточки скруглённые углы, а картинка доходит до её краёв, квадратные углы картинки торчат наружу. overflow-hidden на карточке их обрезает.
• Значок на картинке. Карточка получает relative, а значок — absolute и положение вроде top-3 left-3, которое отсчитывается от угла карточки.
• Кнопки на одной высоте. Описания разной длины, поэтому кнопки оказались бы на разной высоте. Сделайте карточку и её div flex-колонками (flex flex-col), пусть div заполняет остаток карточки (flex-1), и пусть описание тоже растёт (flex-1): оно прижмёт кнопку к низу.

Время от времени переключайте предпросмотр на 375, 768 и 1280 px: в сетке должны быть одна, две и четыре колонки.

Проверки не могут навести мышь на кнопку, поэтому для hover: (и для focus: в следующем упражнении) они смотрят на классы в HTML. Если вы делаете собственный класс для кнопок через @apply, как в предыдущем уроке, всё равно оставьте класс с hover: в HTML.