Карта начальной загрузки не схлопывается с другими картами и не сливается с картами ⇐ CSS

[Anonymous]

Я использую начальную загрузку для создания сетки карточек, но при изменении размера экрана все карточки объединяются. В основном это происходило, когда я пытался расположить значки так, чтобы они отображались в левом верхнем углу карточки и в средней нижней части, одновременно добавляя тег href к изображению.



















---- Таблица стилей CSS ----
display: flex;
justify-content: space-evenly;
margin-top: auto; /* Push the bottom icons to the bottom */
}

.icon-placeholder {
position: absolute;
top: 0;
left: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
height: 100%;
padding: 10px;
box-sizing: border-box;
}

.card img {
border-radius: 20px;
max-height: 320px;
max-width: 320px;
object-fit: cover;
display: block;
}

.card {
position: relative;
border-radius: 20px;
background-color: #ffffff00;
max-width: 264px;
max-height: 352px;
transition: transform .2s; /* Add transition property for smooth animation */
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}


Подробнее здесь: https://stackoverflow.com/questions/782 ... with-cards