Всем привет! Не получается разместить карточки по кругу:
.cards_wrapper {
display: flex;
justify-content: space-between;
align-items: flex-end;
flex-direction: column;
position: absolute;
top: 20%;
right: 15%;
}
.card {
width: 61px;
height: 52px;
text-align: center;
}
.card_title,
.card_rating {
margin: 0;
}
.card:nth-child(1) {
transform: translateX(50deg);
}
<section class="cards">
<div class="container">
<div class="cards_wrapper">
<div class="card">
<img class="card_img" src="images/profile2.1.png" alt="">
<h4 class="card_title">Иванов Сергей</h4>
<p class="card_rating">4.9</p>
</div>
<div class="card">
<img class="card_img" src="images/profile2.1.png" alt="">
<h4 class="card_title">Иванов Сергей</h4>
<p class="card_rating">4.9</p>
</div>
<div class="card">
<img class="card_img" src="images/profile2.1.png" alt="">
<h4 class="card_title">Иванов Сергей</h4>
<p class="card_rating">4.9</p>
</div>
<div class="card">
<img class="card_img" src="images/profile2.1.png" alt="">
<h4 class="card_title">Иванов Сергей</h4>
<p class="card_rating">4.9</p>
</div>
<div class="card">
<img class="card_img" src="images/profile2.1.png" alt="">
<h4 class="card_title">Иванов Сергей</h4>
<p class="card_rating">4.9</p>
</div>
</div>
</div>
Как сделать вот такое размещение?