Changing related products to carousel on mobile?

Hey, I am currently using a code to only show 4 items for the related products in a Shop. However, I would prefer this was actually a carousel, similar to a summary block, but without having to do it all the time.

//only 4 per row related products//
.ProductItem .ProductItem-relatedProducts .grid-item:nth-child(n+5) {
  display: none
}
// end of related products//
 

Is there a way to turn the related products into a carousel? If not, can we show 2 on mobile? I tried adding a code from a blog but it's no longer working.

https://studio-apri.squarespace.com/shop/?noredirect/password=hair (password hair)