| Рядок 1: | Рядок 1: | ||
/* Контейнер усієї сітки */ | |||
. | .mainpage-grid { | ||
display: | display: grid; | ||
grid-template-columns: repeat(auto-fit, minmax(460px, 1fr)); /* ширші колонки */ | |||
gap: | gap: 36px; | ||
max-width: 1600px; | |||
max-width: | margin: 40px auto; | ||
margin: | padding: 0 24px; | ||
padding: 0 | |||
} | } | ||
. | /* Оформлення кожної картки */ | ||
.mainpage-card { | |||
background: #f6f6f6; /* світло-сірий */ | |||
background: #f6f6f6; | |||
border: 1px solid #ddd; | border: 1px solid #ddd; | ||
border-radius: 12px; | border-radius: 12px; | ||
padding: | padding: 36px 28px; | ||
box-shadow: 0 6px 18px rgba(0, 0, 0, 0. | box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04); | ||
display: flex; | display: flex; | ||
flex-direction: column; | flex-direction: column; | ||
align-items: | justify-content: flex-start; | ||
align-items: flex-start; | |||
transition: transform 0.2s ease, box-shadow 0.2s ease; | |||
} | } | ||
. | /* Наведи — піднімається */ | ||
.mainpage-card:hover { | |||
transform: translateY(-4px); | transform: translateY(-4px); | ||
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08); | box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08); | ||
} | } | ||
. | /* Заголовок всередині картки */ | ||
.mainpage-card h2 { | |||
font-size: 2em; /* великий заголовок */ | |||
color: #002855; | |||
margin-bottom: 20px; | |||
border-bottom: 2px solid #0057b7; | |||
padding-bottom: 4px; | |||
width: 100%; | |||
text-align: left; | |||
} | |||
/* Обгортка логотипу */ | |||
.mainpage-card .image { | |||
height: auto; | |||
min-height: 160px; | |||
max-height: 220px; | |||
display: flex; | display: flex; | ||
justify-content: center; | justify-content: center; | ||
align-items: center; | align-items: center; | ||
margin-bottom: 1.5em; | margin-bottom: 1.5em; | ||
width: 100%; | |||
} | } | ||
. | /* Сам логотип */ | ||
.mainpage-card .image img { | |||
max-height: 100%; | max-height: 100%; | ||
max-width: 90%; | max-width: 90%; | ||
object-fit: contain; | object-fit: contain; | ||
display: block; | |||
margin: 0 auto; | margin: 0 auto; | ||
} | } | ||
. | /* Список категорій */ | ||
.categorytree { | |||
text-align: left; | |||
width: 100%; | |||
font-size: 1.15em !important; /* збільшено, з перебивкою */ | |||
line-height: 1.8; | |||
margin-top: auto; | |||
/* | |||
line-height: 1. | |||
} | } | ||
<div class="flex-columns"> | <div class="flex-columns"> | ||