Flexbox help—Empy space below summary block carousel

Hello!

I'm newer to flexbox and can't seem to figure out what's causing the empty space below my summary carousels on mobile. If anyone has any insight, I would be so grateful! 

https://andasanas.com/events

pw: 140ann

In case it's helpful, here's the code I added to stack the summary items:

  section[data-section-id="64396857e07e6a52b47f4e0f"] {
    .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;
    }
    .summary-item:last-child {
      margin-bottom: 0px;
    }
    .summary-carousel-pager {
      display: none!important;
    }
  } 

Add to Design > Custom CSS

@media screen and (max-width:767px) {
.fe-644b28a2af439541732b1369 {
    grid-template-rows: repeat(80,minmax(24px, auto)) !important;
}
}