@keyframes marquee-left {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

@keyframes marquee-right {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.news-widget-container {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    width: 100%;
    display: flex; /* Ustawienie Flexboxa, aby elementy były w jednym rzędzie */
    align-items: center;
    animation-timing-function: linear; /* Zapewnia równomierne przesuwanie */
    --marquee-speed: 10s; /* Domyślna prędkość, będzie zmieniana przez JS */
    animation: marquee-left var(--marquee-speed) linear infinite; /* Domyślnie animacja w lewo */
}

/* Styl podstawowy dla news-item */
.news-item {
    display: inline-block;
    padding: 10px;
    font-size: 16px;
    line-height: 1.5;
    margin-right: 50px; /* Odstęp między elementami */
    white-space: nowrap; /* Zapobiega łamaniu się tekstu */
    overflow: hidden; /* Ukrywa nadmiar tekstu */
    text-overflow: ellipsis; /* Dodaje elipsę, jeśli tekst jest zbyt długi */
}

/* Dostosowanie na urządzenia mobilne */
@media (max-width: 768px) {
    .news-item {
        padding: 8px;
        font-size: 14px; /* Zmniejszenie rozmiaru czcionki */
        margin-right: 30px; /* Zmniejszenie odstępu między elementami */
    }
}

@media (max-width: 480px) {
    .news-item {
        padding: 6px;
        font-size: 12px; /* Dalsze zmniejszenie rozmiaru czcionki */
        margin-right: 20px; /* Jeszcze mniejszy odstęp */
    }
}

/* Klasy dla różnych kierunków animacji */
.news-widget-container.marquee-left {
    animation: marquee-left var(--marquee-speed) linear infinite;
}

.news-widget-container.marquee-right {
    animation: marquee-right var(--marquee-speed) linear infinite;
}