.item-security:before.
.grid {
display: flex;
flex-flow: row wrap;
}
.element-item {
flex: 0 0;
width: calc(20% - 10px);
margin: 0 0 10px 0;
position: relative;
}
.element-item:before {
/* формирователь соотношения сторон + задает габариты, которые будет считать Isotope */
content: "";
padding-bottom: 141.3242%; /* процентное соотношение сторон картинок */
display: block;
}
.element-item img {
/* картинка на абсолюте, как видишь */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.element-item p,
.element-item h3 {
/* скрываем тексты внутри, они для сортировки нужен только (код инициализации из их официального примера просто */
display: none;
}
/* адаптивность */
@media (min-width: 768px) and (max-width: 1200px) {
.element-item {
width: calc(25% - 10px);
}
}
@media (min-width: 400px) and (max-width: 767px) {
.element-item {
width: calc(33.333% - 10px);
}
}
@media (max-width: 399px) {
.element-item {
width: calc(50% - 10px);
}
}
.isotope {
-webkit-transition-property: height,width;
-o-transition-property: height,width;
transition-property: height,width;
width: 100%;
}
.isotope .isotope-item {
-webkit-transition-duration: .8s;
-o-transition-duration: .8s;
transition-duration: .8s;
width: 25%; /* тут размер элемента сетки по media-запросам */
}
.quest-block__link {
position: relative;
margin: 0 auto 27px;
width: 100%;
}
.quest-block__link:before {
content: "";
display: block;
padding-bottom: 141.3242%;
}
.quest-block__link img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}