| Рядок 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 64px; /* Отступы по бокам */ | ||
padding: 0 64px; | |||
} | } | ||
/* По умолчанию ( | /* По умолчанию (до 767px) — одна колонка */ | ||
.mainpage-card { | .mainpage-card { | ||
flex: 0 0 100%; | flex: 0 0 100%; | ||
| Рядок 28: | Рядок 27: | ||
} | } | ||
/* | /* От 768px до 1199px — две колонки */ | ||
@media (min-width: | @media (min-width: 768px) and (max-width: 1199px) { | ||
.mainpage-card { | .mainpage-card { | ||
flex: 0 0 calc((100% - 20px) / 2); | flex: 0 0 calc((100% - 20px) / 2); | ||
} | } | ||
} | } | ||
/* | /* От 1200px и выше — три колонки */ | ||
@media (min-width: | @media (min-width: 1200px) { | ||
.mainpage-card { | .mainpage-card { | ||
flex: 0 0 calc((100% - 40px) / 3); | flex: 0 0 calc((100% - 40px) / 3); | ||
} | } | ||
} | } | ||
| Рядок 59: | Рядок 56: | ||
} | } | ||
/* Блок для изображения */ | |||
.mainpage-card .image { | .mainpage-card .image { | ||
height: auto; | height: auto; | ||
min-height: 140px; | min-height: 140px; | ||
max-height: 200px | /* Если хотите ограничить высоту, можно поставить max-height: 200px, но на мобильном экране это может обрезать картинку */ | ||
display: flex; | display: flex; | ||
justify-content: center; | justify-content: center; | ||
| Рядок 70: | Рядок 68: | ||
} | } | ||
/* Изображение внутри карточки */ | |||
.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; | |||
margin: 0 auto; | |||
} | } | ||
.CategoryTreeItem { | .CategoryTreeItem { | ||