Используя приведённый код HTML, добавьте к нему стили, чтобы получить результат, показанный на рис. 1.
Рис. 1
Карточки должны располагаться в одну строку, если места по ширине не хватает, то карточки переносятся на другую строку.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Селекторы</title>
</head>
<body>
<div class="themes">
<figure class="theme">
<img src="image/selector_element.svg" width="50">
<figcaption>Селектор элемента</figcaption>
</figure>
<figure class="theme">
<img src="image/selector_class.svg" width="50">
<figcaption>Классы</figcaption>
</figure>
<figure class="theme">
<img src="image/selector_id.svg" width="50">
<figcaption>Идентификаторы</figcaption>
</figure>
<figure class="theme">
<img src="image/selector_universal.svg" width="50">
<figcaption>Универсальный селектор</figcaption>
</figure>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Селекторы</title>
<style>
.themes {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: flex-start;
}
.theme {
width: 160px;
text-align: center;
}
.themes img {
background-color: chocolate;
padding: 1em;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="themes">
<figure class="theme">
<img src="image/selector_element.svg" width="50">
<figcaption>Селектор элемента</figcaption>
</figure>
<figure class="theme">
<img src="image/selector_class.svg" width="50">
<figcaption>Классы</figcaption>
</figure>
<figure class="theme">
<img src="image/selector_id.svg" width="50">
<figcaption>Идентификаторы</figcaption>
</figure>
<figure class="theme">
<img src="image/selector_universal.svg" width="50">
<figcaption>Универсальный селектор</figcaption>
</figure>
</div>
</body>
</html>