| Рядок 2: | Рядок 2: | ||
.flex-container { | .flex-container { | ||
display: flex; | display: flex; | ||
flex-wrap: wrap; | flex-wrap: wrap; | ||
justify-content: space-between; | justify-content: space-between; | ||
gap: 20px; | gap: 20px; | ||
margin: 40px auto; | margin: 40px auto; | ||
padding: 0 | padding: 0 32px; | ||
} | } | ||
/* По умолчанию ( | /* По умолчанию (mobile-first) — одна колонка */ | ||
.mainpage-card { | .mainpage-card { | ||
flex: 0 0 100%; | flex: 0 0 100%; | ||
| Рядок 27: | Рядок 27: | ||
} | } | ||
/* | /* Две колонки (пример) */ | ||
@media (min-width: 768px) and (max-width: 1199px) { | @media (min-width: 768px) and (max-width: 1199px) { | ||
.mainpage-card { | .mainpage-card { | ||
| Рядок 34: | Рядок 34: | ||
} | } | ||
/* | /* Три колонки (пример) */ | ||
@media (min-width: 1200px) { | @media (min-width: 1200px) { | ||
.mainpage-card { | .mainpage-card { | ||
flex: 0 0 calc((100% - 40px) / 3); | flex: 0 0 calc((100% - 40px) / 3); | ||
} | |||
} | |||
/* >>> ВАЖНО: уменьшаем отступы на мобильных (до 767px) <<< */ | |||
@media (max-width: 767px) { | |||
.flex-container { | |||
margin: 20px auto; /* вместо 40px, чтобы уменьшить верх/низ */ | |||
padding: 0 10px; /* вместо 32px, чтобы карточка стала шире */ | |||
} | } | ||
} | } | ||
| Рядок 56: | Рядок 64: | ||
} | } | ||
.mainpage-card .image { | .mainpage-card .image { | ||
height: auto; | height: auto; | ||
min-height: 140px; | min-height: 140px; | ||
display: flex; | display: flex; | ||
justify-content: center; | justify-content: center; | ||
| Рядок 68: | Рядок 74: | ||
} | } | ||
.mainpage-card .image img { | .mainpage-card .image img { | ||
width: 100%; | width: 100%; | ||
height: auto; | height: auto; | ||
max-width: 100%; | max-width: 100%; | ||
object-fit: contain; | object-fit: contain; | ||
display: block; | display: block; | ||