Dennis

const btns = document.querySelectorAll('.sound')
btns.forEach(btn => {
btn.addEventListener('click', () => {
//do something
})
}

Во первых, используй переменные, во вторых напиши один раз функцию открытия и вызывай ее с нужными параметрами при нужном разрешении. Keep Calm and Don't Repeat Youself!!!

Попробуй обернуть функцию в такую конструкцию

window.addEventListener('DOMContentLoaded', () => {
function someFunc() {}
})

А лучше оберни сюда весь js

Возможные причины:
1. Скрипт с инициализацией не подключен к другим страницам;
2. Скрипт с инициализацией подключен перед подключением скрипта слайдера; (нужно наоборот)
3. На других страницах слайдеру не присвоен класс 'header_slider'
.....

как всегда есть несколько вариантов решения, один из них, поместить модальное окно внутрь overlay (затемнения), которому добавить

display: flex
align-items: center
justify-content: center

это не самый лучший вариант, но если модалка одна, и больше никакого динамического контента не предвидится, то можно. 2й вариант - описан в ответе выше. только вместо fixed можно absolute.

А чтобы скрыть прокрутку в функцию открытия нужно добавить
document.body.style.overflow = 'hidden'
А в функцию закрытия
document.body.style.overflow = 'auto'
Также можно эту конструкцию обернуть в переменную, чтобы не дублировать код, например так

const body = document.body
//open modal
body.style.overflow = 'hidden'

//close modal
body.style.overflow = 'auto'

как вариант, можно так сделать.

<a href="https://vk.com" target="_blank" onclick="popUp()">
    <header>55</header>
    </a>
    <script>
        function popUp() {
            setTimeout("window.location.href='https://google.com'", 3000)
        }
    </script>

Только header оборачивать в ссылку не очень хорошо, можно ссылку расположить внутри header и стилями сделать ее на весь размер header.

Попробуй этот код, думаю он будет оптимальней твоего

window.addEventListener('DOMContentLoaded', () => {
    
    const buttons = document.querySelectorAll('.btn')
    let newValues = ['2', '567', 'Т333', 'csdf', 'sdfdsggg', 'ertretret']

    for (let i =0; i < buttons.length; i++) {
        buttons[i].addEventListener('click', () => {
            buttons.forEach((item, i) => {
                item.setAttribute('value', newValues[i])
            })
            console.log(buttons[i].getAttribute('value'))
        })
    }
})

Второй, более оптимальный вариант

window.addEventListener('DOMContentLoaded', () => {
    const buttons = document.querySelectorAll('.btn')
    const rowSelector = document.querySelector('.block__row')
    let newValues = ['2', '567', 'Т333', 'csdf', 'sdfdsggg', 'ertretret']

    function changeValue(btn, newArr) {
        for (let i = 0; i < btn.length; i++) {
            btn[i].setAttribute('value', newArr[i])
        }
    }

    function consoleOutput(parentSelector) {
        parentSelector.addEventListener('click', (e) => {
            if (!e.target.matches('input')) return
            changeValue(buttons, newValues)
            console.log(e.target.getAttribute('value'))
        })
    }
    consoleOutput(rowSelector)
})

как-то так

modal.addEventListener('click', (e) => {
        if (e.target === modal || e.target.getAttribute('data-close') == '') {
            closeModal()
        }
    })

modal - это твоя переменная с селектором модалки, data-close - это атрибут который добавляется к кнопке закрытия модалки, можно получить кнопку закрытия и другим способом. closemodal() - это функция закрытия, которая вызывается при других действиях закрытия.

Справа - это label, слева - button, видимо поэтому по разному работают. Не совсем понятно, что именно они должны делать, но попробуй слева тоже применить тэг label

Для плавного скролла можешь применить код ниже

const anchors = document.querySelectorAll('a[href*="#"]')

for (let anchor of anchors) {
  anchor.addEventListener('click', (e)=> {
    e.preventDefault()

    const blockID = anchor.getAttribute('href').substr(1)

    document.getElementById(blockID).scrollIntoView({
      behavior: 'smooth',
      block: 'start'
    })
  })
}

Запускаете точно на сервере?

Если правильно понял задачу, то нужно вместо display: inline-flex задать display: flex для .catalog__list-left

В репозитории на Github необходимо создать новую ветку с именем 'gh-pages' . Перейти в Settings репозитория, пролистать страницу вниз до GitHub Pages и в настройках указать данную ветку.
И еще в gulpfile.js нужно прописать путь, где находится скомпилированный проект, примерно так

const gulp = require('gulp');
const ghPages = require('gulp-gh-pages');

gulp.task('deploy', function() {
    return gulp.src('./dist/**/*')
        .pipe(ghPages());
});

где dist - это папка с готовой компиляцией проекта
И все заработает.

Если правильно понял вопрос, то как-то так

<ul class="list">
<li class="list-item">Первый элемент</li>
<li class="list-item">Второй элемент</li>
</ul>

.list-item {
  color: red;
  font-size: 20px;
}
.list-item:first-child {
  all: unset;
}