/* --- Контейнер для карточек --- */
.items-container {
    display: flex; /* Располагаем карточки в строку */
    flex-wrap: wrap; /* Переносим на новую строку, если не помещаются */
    gap: 20px; /* Отступ между карточками */
    justify-content: center; /* Центрируем карточки, если их меньше, чем ряд */
    margin-top: 20px; /* Отступ сверху */
}

/* --- Стили для отдельной карточки --- */
.item {
    display: block; /* Делаем ссылку блочной */
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden; /* Обрезаем все, что выходит за границы */
    text-decoration: none; /* Убираем подчеркивание у ссылок */
    color: #333; /* Цвет текста */
    width: 300px; /* Фиксированная ширина карточки */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Более выраженная тень */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Плавные эффекты при наведении */
    text-align: center; /* Центрируем текст под изображением */
}

.item:hover {
    transform: translateY(-5px); /* Приподнимаем карточку */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Усиливаем тень */
}

.item img {
    width: 100%; /* Изображение занимает всю ширину карточки */
    height: 200px; /* Фиксированная высота изображения */
    object-fit: cover; /* Изображение будет обрезано, чтобы заполнить блок, сохраняя пропорции */
    display: block; /* Убираем лишний пробел */
}

.item p {
    padding: 15px; /* Отступы вокруг текста */
    margin: 0; /* Убираем стандартные отступы параграфа */
    font-size: 1.1em;
    font-weight: bold;
    color: #35424a; /* Темно-синий цвет для названия */
}