/* ===================== */
/* 🌑 Карусель 🌑 */
/* ===================== */

.popular-carousel .col {
    padding: 10px; /* Отступы между карточками */
}

.popular-carousel .card {
    border: 1px solid #444;
    border-radius: 8px;
    background-color: #1e1e1e;
    overflow: hidden;
    height: 321px; /* Увеличенная высота */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.popular-carousel .card img {
    height: 320px; /* Увеличенная высота изображения */
    object-fit: cover;
    border-bottom: 1px solid #444;
    transition: transform 0.3s ease;
}

.popular-carousel .card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(230, 3, 3, 0.747);
    border: 1px solid #dc3545;
}

.popular-carousel .card:hover img {
    transform: scale(1.01);
}

.popular-carousel .anime-title {
    text-align: center;
    padding: 10px 0;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    height: 2.8em;
}

/* ===================== */
/* 🌑 Карусель для мобильных устройств 🌑 */
/* ===================== */

@media (max-width: 768px) {
    .popular-carousel {
        height: auto; /* Высота адаптируется к карточкам */
    }

    .popular-carousel .col {
        padding: 5px; /* Отступы между карточками */
    }

    .popular-carousel .card {
        height: 280px; /* Та же высота, что на ПК */
        width: auto; /* 50% ширины с отступами */
        margin: 10px; /* Отступы вокруг карточек */
        display: flex;
        flex-direction: column;
    }

    .popular-carousel .card img {
        height: 320px; /* Пропорциональная высота изображений */
        width: auto; /* Полная ширина карточки */
        object-fit: cover; /* Пропорциональное заполнение */
        border-bottom: 1px solid #444;
    }

    .popular-carousel .anime-title {
        font-size: 14px; /* Уменьшенный шрифт для компактности */
        padding: 5px 10px;
        text-align: center;
    }
}

@media (max-width: 576px) {
    .popular-carousel .card {
        width: auto; /* Ширина карточек уменьшена */
        margin: 5px; /* Уменьшенные отступы */
    }

    .popular-carousel .card img {
        height: 320px; /* Та же высота изображений */
    }

    .popular-carousel .anime-title {
        font-size: 12px; /* Уменьшенный шрифт */
        padding: 3px 8px;
    }
}