body {



}







/*пишем CSS для сетки и карточек (card-grid)*/
/*Используем магическую формулу repeat(auto-fill, minmax(...)), которая сама решает, сколько колонок уместить в ряд. / см. Адаптация для мобильных 400*/

.card-grid {
    display: grid;
    /* Карточки будут минимум 280px, максимум — на всю ширину колонки minmax(280px, 1fr)); */
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    gap: 10px; /* Расстояние между карточками */
    padding: 15px;
    max-width: 1200px; /* Ограничение ширины для больших мониторов */
    margin: 0 auto;
}


.card {
    position: relative;
    background-color: var(--card-bg); /*var(--card-bg);*/
    border-radius: 12px;   
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width:18rem;
    height: 40rem; /* 350px; Фиксированная Высота для ровной сетки */    
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

    .card img {
        width: 100%; /* 100%*/
        height: 160px; /* 200 px*/
        object-fit: cover; /* Картинка не растягивается, а заполняет область */
    }

.card-title {
    padding: 10px; /*15px;*/
    font-size: 1.4rem; /*1.2rem; h4*/
    font-weight: bold;
    flex-grow: 1;
    height:65px;
}


.card-text li {
    border: 0px solid white;
    font-size: 1.4rem;
    font-weight: bold;
    
}

.card-text li i {  
    font-size: 1rem;
    color:#377fec;
}

.card-text a {
    width: 100%;
    height: 40%;
    border-radius: 10px;
    background-color: #a18e2c;    
}



.card-body ul {
    text-align:center;
}



/*flex-grow: 1; — это CSS-свойствоуказывающее flex-элементу (дочернему блоку) занимать всё доступное свободное пространство внутри контейнера. Если у всех элементов установлено flex-grow: 1они растянутся поровну. Значение
(вместо 
 по умолчанию) позволяет элементу «расти» и заполнять пустоты.*/




/*
добавить эффект наведения (hover), чтобы карточка слегка приподнималась или подсвечивалась при наведении курсора на ноутбуке*/
/*деликатный hover-эффект, который сделает интерфейс «живым» на десктопах. Важно использовать медиа-запрос @media (hover: hover),
    чтобы этот эффект не мешал пользователям на смартфонах (где ховера нет, а есть только нажатие). */
/* Эффект только для устройств с мышкой */

@media (hover: hover) {
    .card {
        transition: transform 0.3s cubic-bezier(0.2, 0, 0.2, 1), box-shadow 0.3s ease, background-color 0.5s ease; /* сохраняем плавность темы */
    }

        .card:hover {
            transform: translateY(-8px); /* Приподнимаем */
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2); /* Углубляем тень */
        }

            /* Немного подсветим заголовок при наведении */
            .card:hover .card-title {
                color: var(--loader-color);
            }

        /* Эффект увеличения для картинки внутри карточки */
        .card img {
            transition: transform 0.5s ease;
        }

        .card:hover img {
            transform: scale(1.05);
        }             

}


/* Состояние, когда карточка уже нажата — отключаем hover, чтобы не мешал анимации */
.card.clicked {
    pointer-events: none;
}






@media screen and (max-width: 400px) {

  


}