Summary Carousel issues

I am close to getting my FAQ the way I want it, but running into a couple of issues with the carousel summary.

https://wayfarenursing.squarespace.com/faqs (hopefully that works - I'm previewing/tweaking Brine template).

1. At all screen sizes, items are cut off on the sides of the carousel. It looks like the carousel itself is larger than the container it's in?

2. At mobile size, the thumbnail image is getting shrunk in a weird way.

You can see both issues below.

At other screen sizes, the thumbnail is fine but content is still cut-off, as below:

The CSS I have in place:

//Summary Block Design //

.sqs-block-summary-v2 .summary-item {
  background-color: #ffffff;
  border-radius: 20px;
  -webkit-box-shadow: 0px 0px 15px rgba(100, 100, 100, 0.1) !important;
  -moz-box-shadow: 0px 0px 15px rgba(100, 100, 100, 0.1) !important;
  box-shadow: 0px 0px 15px rgba(100, 100, 100, 0.1) !important;
}

//Summary Content Padding //

.sqs-block-summary-v2 .summary-item .summary-content {
    padding: 5px 20px 20px 20px;
}
.sqs-block-summary-v2 .summary-title {
  font-size: 20px !important;
  color: #F05123;
}
.sqs-block-summary-v2 .summary-item .summary-excerpt {
  color: #43403C !important;
}
.sqs-block-summary-v2 .summary-item .summary-read-more-link {
  color: #00A3B0 !important;
}
.sqs-block-summary-v2, .sqs-gallery-design-carousel {
  margin: 0px !important;
}
.sqs-block-summary-v2, .sqs-gallery-design-carousel-slide {
  padding-right:0px!important;
  padding-left: 0px !important;
  margin-right: 5px !important;
  margin-left: 5px !important;
}

Any help would be greatly appreciated!