.grid-files {
display: -ms-grid;
display: grid;
grid-gap: 45px 55px;
gap: 45px 55px;
-ms-grid-columns: 1fr 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr 1fr;
-ms-grid-auto-rows: 1fr;
grid-auto-rows: 1fr;
-ms-grid-auto-columns: 1fr;
grid-auto-columns: 1fr;
margin: 40px auto;
}
.grid-files .grid-file {
overflow: hidden;
color: #000;
position: relative;
width: 100%;
margin-left: auto;
margin-right: auto;
}
.grid-file .img {
position: relative;
padding-top: calc(100% / 589 * 768);
background: #000;
}
.grid-file .img img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
transition: all 0.5s ease-in-out;
}
.grid-file .title {
position: relative;
transition: opacity 0.3s ease-in-out;
text-align: center;
font-weight: bold;
color: #102d8e;
font-size: 1.3rem;
padding-top: 10px;
}
@media (max-width: 575px) {
.grid-files {
-ms-grid-columns: 1fr !important;
grid-template-columns: 1fr !important;
max-width: 300px;
}
}
@media (max-width: 767px) {
.grid-files {
-ms-grid-columns: 1fr 1fr;
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 1199px) {
.grid-files {
-ms-grid-columns: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
}
}