Мітка: Ручний відкіт |
Мітка: Скасовано |
||
| Рядок 1: | Рядок 1: | ||
{{#css: | {{#css: | ||
/* Контейнер всієї сітки */ | |||
.mainpage-grid { | .mainpage-grid { | ||
display: grid; | display: grid; | ||
grid-template-columns: repeat(auto-fit, minmax( | grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); | ||
gap: | gap: 32px; | ||
max-width: 1400px; | |||
margin: 40px auto; | margin: 40px auto; | ||
padding: 0 16px; | |||
box-sizing: border-box; | |||
} | } | ||
/* Одна картка */ | |||
.mainpage-card { | .mainpage-card { | ||
background: #f6f6f6; | background: #f6f6f6; | ||
border: 1px solid #ddd; | border: 1px solid #ddd; | ||
border-radius: 12px; | border-radius: 12px; | ||
padding: | padding: 32px 24px; | ||
box-shadow: 0 | box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04); | ||
display: flex; | display: flex; | ||
flex-direction: column; | flex-direction: column; | ||
| Рядок 19: | Рядок 23: | ||
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; | ||
box-sizing: border-box; | |||
} | } | ||
.mainpage-card:hover { | .mainpage-card:hover { | ||
transform: translateY(- | transform: translateY(-3px); | ||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0. | box-shadow: 0 10px 20px rgba(0, 0, 0, 0.06); | ||
} | } | ||
/* Заголовок категорії */ | |||
.mainpage-card h2 { | .mainpage-card h2 { | ||
font-size: 1. | font-size: 1.6em; | ||
color: #002855; | color: #002855; | ||
margin-bottom: 18px; | margin-bottom: 18px; | ||
border-bottom: 2px solid #0057b7; | border-bottom: 2px solid #0057b7; | ||
padding-bottom: | padding-bottom: 6px; | ||
width: 100%; | width: 100%; | ||
text-align: left; | text-align: left; | ||
} | } | ||
/* Обгортка зображення */ | |||
.mainpage-card .image { | .mainpage-card .image { | ||
width: 100%; | |||
max-height: 180px; | |||
max-height: | |||
display: flex; | display: flex; | ||
justify-content: center; | justify-content: center; | ||
align-items: center; | align-items: center; | ||
margin-bottom: 1.2em; | margin-bottom: 1.2em; | ||
overflow: hidden; | |||
} | } | ||
/* Сам логотип */ | |||
.mainpage-card .image img { | .mainpage-card .image img { | ||
max-height: 100%; | max-height: 100%; | ||
max-width: | max-width: 100%; | ||
height: auto; | |||
width: auto; | |||
object-fit: contain; | object-fit: contain; | ||
display: block; | display: block; | ||
} | } | ||
. | /* Категорії */ | ||
.categorytree { | |||
text-align: left; | |||
width: 100%; | |||
font-size: 1.15em !important; | font-size: 1.15em !important; | ||
line-height: 1.7 | line-height: 1.7; | ||
margin-top: auto; | |||
} | |||
/* Адаптація для мобільних */ | |||
@media screen and (max-width: 500px) { | |||
.mainpage-grid { | |||
grid-template-columns: 1fr; | |||
padding: 0 12px; | |||
} | |||
.mainpage-card { | |||
padding: 24px 18px; | |||
} | |||
} | } | ||
}} | }} | ||