Думаю как-то так:

$('.gallery').slick({
            slidesToShow: 2,
            slidesToScroll: 2,
            responsive: [
                {
                    breakpoint: 768,
                    settings: {
                        slidesToShow: 1,
                        slidesToScroll: 1
                    }
                }
            ]
        });

П.С Надеюсь все понятно :)

На смежных разрешениях между вашими тремя экранами сайт должен отображаться адекватно. Никто не делает адаптив, где на допустим 1080пх все поехало, а на 768пх - адекватно.

То есть про такие медиа-запросы забудьте:

@media screen and (width:768px) { 
  body { background: #fc0; }
}

Используйте либо mobile first:

@media screen and (min-width:320px) { 
  body { background: #fc0; }
}

Либо же начиная с десктопа:

@media screen and (max-width:1200px) { 
  body { background: #fc0; }
}

Но обязательно продумывайте поведение элементов так, чтобы на всех разрешениях смотрелось годно)