Проблемы с сеткой CSS и карточками

Question

У меня проблема с моими картами. Я создаю систему, но карты, которые я использую, обрезаются div внизу.

Я ограничен тем, что могу показать, но покажу как можно больше.

.wrapper {
  display: grid;
  height: 80%;
  grid-template-columns: repeat(12, 1fr);
}

.page-layout {
  display: flex;
  flex-flow: column;
}

.menu-wrapper {
  display: grid;
  height: 100%;
  grid-template-columns: repeat(2, 1fr);
}

.header {
  grid-column: span 12;
  display: flex;
  align-items: left;
  justify-content: left;
  flex-direction: row;
  flex-wrap: wrap;
  flex-flow: row wrap;
  align-content: flex-end;
}

.content-page {
  display: block;
  height: auto;
}

.cs-card {
  grid-column: span 1;
  display: flex;
  flex-flow: column;
  width: 160px;
  height: 248px;
  margin-right: 16px;
  margin-left: 16px;
  margin-bottom: 12px;
  margin-top: 12px;
  background: #ffffff 0% 0% no-repeat padding-box;
  box-shadow: 0px 3px 8px #00000029;
  border-radius: 20px;
  opacity: 1;
}

.cs-card-body {
  display: flex;
  flex-flow: column;
  flex: 1;
  height: 100%;
  width: 100%;
}

.cs-card-description {
  margin-top: 8px;
  margin-bottom: 8px;
  padding-right: 8px;
  padding-left: 8px;
  flex: 1;
  font-size: 12px;
  align-content: left;
}

.cs-card-price {
  padding-right: 8px;
  padding-left: 8px;
  font-size: 16px;
  font-weight: bold;
  align-content: left;
  margin-top: 8px;
  margin-bottom: 8px;
}

.cs-card-footer {
  width: 160px;
  min-height: 40px;
  background: #fcf8ee 0% 0% no-repeat padding-box;
  border-radius: 0px 0px 20px 20px;
  opacity: 1;
}

.cs-card img {
  max-width: 160px;
  min-height: 128px;
  border-radius: 20px 20px 0px 0px;
}

.cs-favourite {
  width: 24px;
  height: 24px;
  margin: 8px;
  background-image: url("../images/star.svg");
}

.cs-not-favourite {
  width: 24px;
  height: 24px;
  margin: 8px;
  background-image: url("../images/empty-star.svg");
}

.cs-add {
  width: 24px;
  height: 24px;
  margin: 8px;
  background-image: url("../images/plus-circle.svg");
}

.cs-toggle-off-minus {
  width: 24px;
  height: 24px;
  margin: 8px;
}

.cs-minus {
  width: 24px;
  height: 24px;
  margin: 8px;
  background-image: url("../images/minus-circle.svg");
}

.cs-amount {
  flex: 1;
  font-size: 16px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 8px;
}

.cs-amount-controls {
  display: flex;
  flex-flow: row;
}

<div class="page-layout">
  <div class="content-page">
    <div class="menu-wrapper">
      <div class="cs-card">
        <div class="cs-card-image"><img src="https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2019/02/SVGFilterEffects_feturbulance_featured.jpg"></div>
        <div class="cs-card-body">
          <p class="cs-card-description">テスト商品1</p>
          <p class="cs-card-price">¥100</p>
        </div>
        <div class="cs-amount-controls">
          <div class="cs-not-favourite"></div>
          <div class="cs-minus"></div>
          <div class="cs-amount">1</div>
          <div class="cs-add"></div>
        </div>
      </div>
      <div class="cs-card">
        <div class="cs-card-image"><img src="https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2019/02/SVGFilterEffects_feturbulance_featured.jpg"></div>
        <div class="cs-card-body">
          <p class="cs-card-description">テスト商品2</p>
          <p class="cs-card-price">¥100</p>
        </div>
        <div class="cs-amount-controls">
          <div class="cs-not-favourite"></div>
          <div class="cs-minus"></div>
          <div class="cs-amount">2</div>
          <div class="cs-add"></div>
        </div>
      </div>
      <div class="cs-card">
        <div class="cs-card-image"><img src="https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2019/02/SVGFilterEffects_feturbulance_featured.jpg"></div>
        <div class="cs-card-body">
          <p class="cs-card-description">テスト商品1</p>
          <p class="cs-card-price">¥100</p>
        </div>
        <div class="cs-amount-controls">
          <div class="cs-not-favourite"></div>
          <div class="cs-minus"></div>
          <div class="cs-amount">1</div>
          <div class="cs-add"></div>
        </div>
      </div>
      <div class="cs-card">
        <div class="cs-card-image"><img src="https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2019/02/SVGFilterEffects_feturbulance_featured.jpg"></div>
        <div class="cs-card-body">
          <p class="cs-card-description">テスト商品1</p>
          <p class="cs-card-price">¥100</p>
        </div>
        <div class="cs-amount-controls">
          <div class="cs-not-favourite"></div>
          <div class="cs-minus"></div>
          <div class="cs-amount">1</div>
          <div class="cs-add"></div>
        </div>
      </div>
      <div class="cs-card">
        <div class="cs-card-image"><img src="https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2019/02/SVGFilterEffects_feturbulance_featured.jpg"></div>
        <div class="cs-card-body">
          <p class="cs-card-description">テスト商品1</p>
          <p class="cs-card-price">¥100</p>
        </div>
        <div class="cs-amount-controls">
          <div class="cs-not-favourite"></div>
          <div class="cs-minus"></div>
          <div class="cs-amount">1</div>
          <div class="cs-add"></div>
        </div>
      </div>
    </div>
  </div>
</div>