Шаги и форма

Остались два раздела: «Как взять кошку» (id="adopt") с тремя шагами в нумерованном списке ol и «Контакты» (id="contact") с адресом и формой.

• Снова те же классы. Обоим разделам нужны такая же ширина и такие же внутренние отступы, как у раздела «Наши кошки». Можно скопировать его классы или записать их один раз как собственный класс, например .section в @layer components с помощью @apply, как в предыдущем уроке.
• Шаги рядом. На телефонах шаги идут друг под другом, а начиная с md: — рядом: с помощью сетки, grid gap-6 md:grid-cols-3, или с помощью flexbox, flex flex-col gap-6 md:flex-row.
• Круглые номера. Preflight убрал номера списка, поэтому номер каждого шага лежит в своём span. Круг — это квадрат с полностью скруглёнными углами (size-10 rounded-full), а flex items-center justify-center ставит номер в его середину.
• Поля формы. Preflight убрал и рамки, и внутренние отступы у полей, поэтому их почти не видно. Задайте им рамку, внутренние отступы и скруглённые углы. Каждая подпись лежит в div вместе со своим полем: flex flex-col gap-1 на div ставит подпись над полем.
• Фокус. Посетителям, которые перемещаются по форме клавишей Tab, нужно видеть, в каком они поле. Задайте полям и кнопке заметный стиль фокуса, например focus:outline-2 focus:outline-brand-500. Никогда не убирайте контур просто так (outline-hidden), не заменив его чем-то другим.

На широких экранах адрес и форма могут стоять рядом: div, в котором они лежат, тоже может быть сеткой.