/* --- Базовые стили (Десктоп) --- */
.slider-container {
    overflow: hidden; 
    padding: 20px 0;
    background: transparent;
}

.marquee-wrapper {
    display: flex;
    width: 100%;
    margin-bottom: 30px;
    background-color: #484848;
    padding: 20px;
}

.marquee-content {
    display: flex;
    gap: 20px; 
    white-space: nowrap;
}

.marquee-content a {
    display: inline-block;
    flex-shrink: 0; /* Чтобы фотки не сжимались, если их много */
}

.marquee-content img {
    height: 300px;
    width: auto;
    object-fit: contain;
    border-radius: 10px;
    display: block; /* Убирает лишние отступы снизу */
    transition: transform 0.3s ease; /* Добавим для красоты */
}

/* Эффект при наведении на конкретную фотку */
.marquee-content a:hover img {
    transform: scale(1.05); /* Слегка увеличиваем при наведении */
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

/* --- Анимации --- */
@keyframes scrollRight {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

@keyframes scrollLeft {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.track-right {
    animation: scrollRight 30s linear infinite;
}

.track-left {
    animation: scrollLeft 30s linear infinite;
}

.track-right-slow {
    animation: scrollRight 35s linear infinite;
}

/* Пауза при наведении (на мобилках не особо робит, но пусть будет) */
.marquee-content:hover {
    animation-play-state: paused;
}

/* --- АДАПТИВ ПОД МОБИЛКИ (Главная магия тут) --- */
@media (max-width: 768px) {
    .marquee-wrapper {
        padding: 10px; /* Уменьшаем отступы обертки */
        margin-bottom: 15px;
    }

    .marquee-content {
        gap: 10px; /* Расстояние между фотками поменьше */
    }

    .marquee-content img {
        height: 150px; /* Уменьшаем высоту в 2 раза, чтобы их больше влезло в экран */
        border-radius: 8px;
    }

    /* Ускоряем анимацию, так как путь стал короче из-за размера картинок */
    .track-right {
        animation: scrollRight 30s linear infinite;
    }

    .track-left {
        animation: scrollLeft 30s linear infinite;
    }

    .track-right-slow {
        animation: scrollRight 35s linear infinite;
    }
}