<div class="cards-wrapper">
<div class="card-item">
<div class="card-category">$CATEGORY_NAME$</div>
<div class="card-image"><img src="$IMG_URL1$" alt="$TITLE$"></div>
<div class="card-title"><a href="$ENTRY_URL$">$TITLE$</a></div>
</div>
<!-- добавляйте столько карточек, сколько нужно -->
</div>
<style>
.cards-wrapper {
display: flex;
flex-wrap: wrap;
gap: 5px; /* минимальный отступ между карточками */
margin: 0;
padding: 0;
}
.card-item {
position: relative;
flex: 1 1 calc(33.33% - 5px); /* три карточки в ряд */
min-width: 200px;
}
.card-category {
position: absolute;
right: 0;
top: 210px;
background: #000; /* черный фон категории */
color: #fff;
padding: 4px 9px;
border-radius: 5px;
font-size: 16px;
font-family: Arial, sans-serif;
}
.card-image {
width: 100%;
height: 199px;
overflow: hidden;
border: 1px solid #000; /* черная рамка */
box-shadow: 0 0 8px 1px rgba(80, 77, 77, 0.84), 0 0 3px 1px rgba(49, 47, 47, 0.69);
border-radius: 5px;
}
.card-image img {
width: 100%;
height: 199px;
object-fit: cover;
border-radius: 5px;
}
.card-title {
height: 49px;
position: relative;
margin-top: -49px;
background: rgba(16, 16, 16, 0.9);
transition: all 0.3s;
border-radius: 5px;
}
.card-title:hover {
background: rgba(16, 16, 16, 0.9); /* фон не меняется */
}
.card-title a {
color: #fff;
display: block;
font-family: Arial, Tahoma, sans-serif;
font-size: 13px;
padding: 12px 5px;
text-decoration: none;
}
@media screen and (max-width: 1100px) {
.card-item {
flex: 1 1 calc(48% - 5px);
}
}
@media screen and (max-width: 600px) {
.card-item {
flex: 1 1 100%;
}
}
</style>
