Мітка: Ручний відкіт |
|||
| Рядок 1: | Рядок 1: | ||
{{ | {{#css: | ||
.flex-columns { | |||
display: flex; | |||
flex-wrap: wrap; | |||
gap: 32px; | |||
justify-content: center; | |||
max-width: 1600px; | |||
margin: 40px auto; | |||
padding: 0 24px; | |||
} | |||
.flex-columns > div { | |||
flex: 1 1 300px; | |||
max-width: 420px; | |||
background: #f9f9f9; | |||
border: 1px solid #ddd; | |||
border-radius: 12px; | |||
padding: 28px 20px; | |||
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05); | |||
text-align: center; | |||
transition: transform 0.2s ease, box-shadow 0.2s ease; | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
} | |||
.flex-columns > div:hover { | |||
transform: translateY(-4px); | |||
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08); | |||
} | |||
.flex-columns img { | |||
max-width: 100%; | |||
max-height: 100px; | |||
object-fit: contain; | |||
margin-bottom: 20px; | |||
} | |||
.flex-columns .categorytree { | |||
text-align: left; | |||
width: 100%; | |||
font-size: 17px; | |||
line-height: 1.6; | |||
} | |||
}} | }} | ||
<div class="flex-columns"> | |||
{{#if: {{{1|}}} | <div>{{{1}}}</div> }} | |||
{{#if: {{{2|}}} | <div>{{{2}}}</div> }} | |||
{{#if: {{{3|}}} | <div>{{{3}}}</div> }} | |||
{{#if: {{{4|}}} | <div>{{{4}}}</div> }} | |||
{{#if: {{{5|}}} | <div>{{{5}}}</div> }} | |||
{{#if: {{{6|}}} | <div>{{{6}}}</div> }} | |||
{{#if: {{{7|}}} | <div>{{{7}}}</div> }} | |||
{{#if: {{{8|}}} | <div>{{{8}}}</div> }} | |||
{{#if: {{{9|}}} | <div>{{{9}}}</div> }} | |||
{{#if: {{{10|}}} | <div>{{{10}}}</div> }} | |||
</div> | |||