| Рядок 1: | Рядок 1: | ||
{{#css: | {{#css: | ||
.flex-container { | .flex-container { | ||
display: flex; | display: flex; /* Включаем флекс */ | ||
flex-wrap: wrap; | flex-wrap: wrap; /* Разрешаем перенос строк */ | ||
gap: 40px; | gap: 40px; /* Отступ между карточками */ | ||
justify-content: | justify-content: space-between; /* или center, в зависимости от желаемого выравнивания */ | ||
padding: 0 32px; | padding: 0 32px; | ||
margin: 40px auto; | margin: 40px auto; | ||
} | } | ||
/* Каждая «карточка» */ | |||
.mainpage-card { | .mainpage-card { | ||
flex: 1 1 | flex: 1 1 auto; /* Позволяет и сжиматься, и расти */ | ||
min-width: 280px; /* Минимальная ширина карточки */ | |||
/* max-width: 480px; Если нужно ограничить максимальную ширину, раскомментируйте */ | |||
background: #f6f6f6; | background: #f6f6f6; | ||
border: 1px solid #ddd; | border: 1px solid #ddd; | ||
| Рядок 17: | Рядок 19: | ||
padding: 28px 24px; | padding: 28px 24px; | ||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.04); | box-shadow: 0 6px 16px rgba(0, 0, 0, 0.04); | ||
display: flex; | display: flex; | ||
flex-direction: column; | flex-direction: column; | ||
justify-content: flex-start; | justify-content: flex-start; | ||
align-items: flex-start; | align-items: flex-start; | ||
transition: transform 0.2s ease, box-shadow 0.2s ease; | transition: transform 0.2s ease, box-shadow 0.2s ease; | ||
} | } | ||
| Рядок 39: | Рядок 43: | ||
} | } | ||
/* Блок с изображением внутри карточки */ | |||
.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; | ||
| Рядок 58: | Рядок 63: | ||
} | } | ||
/* Стили для CategoryTree */ | |||
.CategoryTreeItem { | .CategoryTreeItem { | ||
font-size: 1.15em !important; | font-size: 1.15em !important; | ||
| Рядок 65: | Рядок 71: | ||
} | } | ||
}} | }} | ||
<div class="flex-container"> | <div class="flex-container"> | ||
{{#if: {{{1|}}} | <div class="mainpage-card">{{{1}}}</div> }} | {{#if: {{{1|}}} | <div class="mainpage-card">{{{1}}}</div> }} | ||
{{#if: {{{2|}}} | <div class="mainpage-card">{{{2}}}</div> }} | {{#if: {{{2|}}} | <div class="mainpage-card">{{{2}}}</div> }} | ||
{{#if: {{{3|}}} | <div class="mainpage-card">{{{3}}}</div> }} | {{#if: {{{3|}}} | <div class="mainpage-card">{{{3}}}</div> }} | ||
< | {{#if: {{{4|}}} | <div class="mainpage-card">{{{4}}}</div> }} | ||
{{#if: {{{5|}}} | <div class="mainpage-card">{{{5}}}</div> }} | |||
{{#if: {{{6|}}} | <div class="mainpage-card">{{{6}}}</div> }} | |||
{{#if: {{{7|}}} | <div class="mainpage-card">{{{7}}}</div> }} | |||
{{#if: {{{8|}}} | <div class="mainpage-card">{{{8}}}</div> }} | |||
{{#if: {{{9|}}} | <div class="mainpage-card">{{{9}}}</div> }} | |||
{{#if: {{{10|}}} | <div class="mainpage-card">{{{10}}}</div> }} | |||
</div> | </div> | ||