/* COLORS */
/* TYPOGRAPHY */
/* ---- MEDIA QUERIES ----- */
.post-block {
  background-color: #E1F7D3;
  position: relative;
}
.post-block.has-waves {
  margin: 18rem 0 13.1rem;
}
.post-block .container {
  display: flex;
  flex-direction: column;
  gap: 4.8rem;
}
.post-block .heading {
  text-align: center;
}
.post-block .post-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.4rem;
}
.post-block .button-container {
  display: flex;
  justify-content: center;
}
.post-block .wave {
  position: absolute;
  width: 100%;
  left: 0;
}
.post-block .wave.wave-top {
  top: 0.1rem;
  transform: translateY(-100%);
}
.post-block .wave.wave-bottom {
  bottom: 0.1rem;
  transform: translateY(100%);
}
.post-block .wave svg {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 1024px) {
  .post-block .post-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .post-block.has-waves {
    margin: 13rem 0 13.1rem;
    z-index: 9;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .post-block.add-negative-margin {
    margin-top: -3rem;
  }
  .post-block .post-grid {
    grid-template-columns: 1fr;
  }
  .post-block .wave {
    width: 100%;
    overflow: hidden;
  }
  .post-block .wave.wave-top {
    top: 0.1rem;
    transform: translateY(-100%);
  }
  .post-block .wave.wave-top svg {
    transform: translateX(-50%);
  }
  .post-block .wave.wave-bottom {
    bottom: 0.1rem;
    transform: translateY(100%);
  }
  .post-block .wave.wave-bottom svg {
    transform: translateX(-40%);
  }
  .post-block .wave svg {
    width: unset;
  }
}