Помогите решить вопрос со слайдерами?

подскажите пожалуйста как решить вопрос. уже два дня бьюсь и не могу решить. суть вот в чем. есть блок, который превращается в слайдер при экранах 768px и 320px. проблема заключается в том что при экране 768px слайдер работает как положено. при экране 320px срабатывает код также для 768px, хотя прописан и для 320px. Вот код слайдера для двух экранов:

let offset = 0; //смещение от левого края
const sliderLine = document.querySelector('.slider__line');

const isMobile = () => window.innerWidth <= 320;

document.querySelector('.slider__next').addEventListener('click', function() {
    if (isMobile()) {
        offset = offset + 304;
        if (offset > 912) offset = 0;
    } else {
        offset = offset + 500;
        if (offset > 500) offset = 0;
    }
    sliderLine.style.left = -offset + 'px';
});
document.querySelector('.slider__prev').addEventListener('click', function() {
    if (isMobile()) {
        offset = offset - 304;
        if (offset < 0) offset = 912;
    } else {
        offset = offset - 500;
        if (offset < 0) offset = 500;
    }
    sliderLine.style.left = -offset + 'px';
});

Это код который превращается в слайдер:

 <section>
            <h2 class="main__news-title">новости компании</h2>
            <div class="main__news">
                <div class="container">
                    <div class="actual__news slider">
                        <p class="main__description news__desc">Актуальные статьи, информация, отзывы в нашем блоге</p>
                        <div class="actual__news-cards slider__line">
                            <div class="actual__news-card">
                                <img src="images/news__card-img1.png" alt="">
                                <h2 class="actual__news-title">Новые продукты для животноводства</h2>
                                <p class="actual__news-desc">Свердловская область вошла в десятку субьектов РФ по производству</p>
                            </div>
                            <div class="actual__news-card">
                                <img src="images/news__card-img2.png" alt="">
                                <h2 class="actual__news-title">Новые продукты для животноводства</h2>
                                <p class="actual__news-desc">Свердловская область вошла в десятку субьектов РФ по производству</p>
                            </div>
                            <div class="actual__news-card">
                                <img src="images/news__card-img3.png" alt="">
                                <h2 class="actual__news-title">Новые продукты для животноводства</h2>
                                <p class="actual__news-desc">Свердловская область вошла в десятку субьектов РФ по производству</p>
                            </div>
                            <div class="actual__news-card">
                                <img src="images/news__card-img4.png" alt="">
                                <h2 class="actual__news-title">Новые продукты для животноводства</h2>
                                <p class="actual__news-desc">Свердловская область вошла в десятку субьектов РФ по производству</p>
                            </div>
                        </div>
                        <a href="#" class="read__news-btn input__form-btn">Читать в блоге</a>
                    </div>
                    <button class="slider__prev">&#8592;</button>
                    <button class="slider__next">&#8594;</button>
                </div>

            </div>
        </section>

НО САМОЕ ИНТЕРЕСНОЕ, ЧТО ПРОБЛЕМА ПРОЯВЛЯЕТСЯ ИМЕННО ЕСЛИ ПОДКЛЮЧАЮ КОД В ПРОЕКТЕ. ЕСЛИ ВЫНЕСТИ ЭТОТ БЛОК В ОТДЕЛЬНЫЙ ФАЙЛ INDEX.HTML И ДОБАВИТЬ ЕМУ СКРИПТ ТО ВСЕ БУДЕТ РАБОТАТЬ КАК ПОЛОЖЕНО.

Куда смотреть и где искать данную проблему уже не знаю. Что я пропустил?

Сама ссылка на проект.