Фильмы этой недели

Дальше — фильмы, которые идут на этой неделе. Мы добавили в main новый раздел с заголовком и текстами трёх фильмов, но без окружающих элементов, поэтому в предпросмотре они слились в один блок текста. Давайте придадим им структуру.

Каждый фильм получит карточку: блок, который объединяет всё об одном предмете. Сайты полны карточек: товары в магазине, статьи, профили. У карточки в HTML нет особого значения, поэтому это div с классом для оформления. Название фильма в карточке — заголовок третьего уровня, потому что он стоит под заголовком На этой неделе. Жанр и продолжительность лежат в абзаце с классом details (он будет мельче и серым), а описание — в отдельном абзаце:

<div class="film">
    <h3>Смотритель маяка</h3>
    <p class="details">Драма · 112 мин</p>
    <p>На одиноком острове смотритель находит бутылку с запиской, которая меняет всё.</p>
</div>

Наконец, все три карточки помещаются ещё в один div с классом films. В CSS он поставит карточки рядом.

Подсказка: набирать тексты не нужно. Обрамите тегами тексты, которые уже есть в редакторе.