WapSter

Кусок кода отвечающий за это с сайта примера разбирайся)

//first window parallax petel
    var $parallaxContainer = $(".plx-wrap-main"); //our container
    var $parallaxItems = $parallaxContainer.find(".plx-wrap-main__petel-plx");  //elements
    var $parallaxContainerSecond = $(".features-window__container"); //our container
    var $parallaxItemsSecond = $parallaxContainerSecond.find(".features-window__petel-plx");  //elements
    var fixer = 0.0007;		//experiment with the value
    var wait = false;
    var waitSecond = false;
    var speedX, speedY, pageX, pageY;

    //main window petel init
    function mainPetelMouseMoveInit() {
        $(document).on("mousemove", function(event){
            if(!wait){
                pageX =  event.pageX - ($parallaxContainer.width() * 0.5);
                pageY =  event.pageY - ($parallaxContainer.height() * 0.5);

                $parallaxItems.each(function(){
                    var item 	= $(this);
                    speedX	= item.data("speed-x");
                    speedY	= item.data("speed-y");

                    TweenLite.to(item,1.3, {
                        x: -(item.position().left + pageX * speedX )*fixer,
                        y: -(item.position().top + pageY * speedY)*fixer,
                        ease: Power3.easeNone
                    });
                });
                wait = true;
                setTimeout(function(){ wait = false; },120);
            }
        });
    }

    //main window petel disable
    function petelMouseMoveUnbind() {
        $(document).off('mousemove');
    }

    //second window petel init
    function secondPetelMouseMoveInit() {
        $(document).on("mousemove", function(event){
            if(!waitSecond){
                pageX =  event.pageX - ($parallaxContainerSecond.width() * 0.5);
                pageY =  event.pageY - ($parallaxContainerSecond.height() * 0.5);

                $parallaxItemsSecond.each(function(){
                    var item 	= $(this);
                    speedX	= item.data("speed-x");
                    speedY	= item.data("speed-y");

                    TweenLite.to(item,1.3, {
                        x: -(item.position().left + pageX * speedX )*fixer,
                        y: -(item.position().top + pageY * speedY)*fixer,
                        ease: Power3.easeNone
                    });
                });
                waitSecond = true;
                setTimeout(function(){ waitSecond = false; },120);
            }
        });
    }

Ты увеличил вес селекторов своей вложенностью, это все равно, что прописать !important. Селектор медиа запроса должен быть таким же как и селектор основной верстки.

.box .link { color: #000; }
@media (max-width: 720px) { 
   .box .link { color: red; } 
}

Задать через media одну колонку grid контейнеру.

Используй обычную функцию в событии, а не стрелочную (нет контекста).

Вырежи лампочку, и насильно прибей через позиционирование к списку или что там у тебя.

const itemsEl = document.querySelectorAll('.item')

itemsEl.forEach(el => {
  el.querySelector('.list') ? el.classList.add('test') : null
})

.slider{
//..
left: 0;
//..
}

Это полноразмерное приложение и в рамки его вообще загонять не нужно. Ограничь по ширине контент и это все, что требуется.

Фронтендер и бэкендер. Фронт реализует передачу данных на бэк и обработку ответа, бэкендер ловит запрос обращается к базе данных отдает ответ на фронт. Верстальщики если такие есть оформляют, возможно еще вставляют элемент для манипуляции по типу слайдера цен.

Responsive Display В самом начале документации..

Первый вариант верен, но не совсем там есть элемент и он же другой элемент, более правильнее модификатор дать. И как это разные по смыслу? Это списки отображаются они одинаково, то что ты описали решается модификаторами. К тому же во втором варианте элементы одного блока вставлены в элементы другого так делать нельзя.

Все довольно просто. Разбирайся: