Squarespace 7.0 Summary Block – Tweaking Mobile Carousel

Hey,

I'm helping a client create this landing page and I'm having an issue with the summary block under the 'Testimonials' subheading on mobile.

Original this broke the page, but using some CSS I found online I've managed to turn these items into a stacked layout – However we'd ideally like for this to be a single column carousel, so the user can scroll through the four testimonials, rather than them being in a long list – Is this possible?

I've pasted the current CSS below and if anyone could help us out with extra CSS/JavaScript it would be much appreciated!

@media screen and (max-width: 640px)

{

    .summary-item-list {

      display: -webkit-box;

      display: -webkit-flex;

      display: -ms-flexbox;

      display: flex;

      -webkit-box-orient: vertical;

      -webkit-box-direction: normal;

      -webkit-flex-direction: column;

          -ms-flex-direction: column;

              flex-direction: column;

    }

    .summary-item {

      width: 100%!important;

      margin-bottom: 50px;

    }

  }

You can consider adding 2 summaries: 1 show 2 items/row, 1 show 1 item/row, then we can give code to show 1 on desktop, show another on mobile