.clip-path {
  clip-path: polygon(100% 50%,86.46% 60.71%,92.06% 77.03%,74.88% 78.72%,70.77% 95.48%,55.41% 87.61%,42.88% 99.49%,34.21% 84.57%,17.26% 87.79%,18.03% 70.54%,2.03% 64.09%,12% 50%,2.03% 35.91%,18.03% 29.46%,17.26% 12.21%,34.21% 15.43%,42.88% 0.51%,55.41% 12.39%,70.77% 4.52%,74.88% 21.28%,92.06% 22.97%,86.46% 39.29%);
}

@media (max-width: 1399px) {
  .clip-path {
    translate: 120px -60px;
  }
}

@media (max-width: 1199px) {
  .clip-path {
    translate: 150px -60px;
  }
}

@media (max-width: 991px) {
  .clip-path {
    translate: 280px -60px;
  }
}

@media (max-width: 767px) {
  .clip-path {
    translate: 200px -60px;
  }
}

@media (max-width: 575px) {
  .clip-path {
    translate: 100px -60px;
  }
}

.clip-path-round {
  /* clip-path: circle(50% at 50% 50%); */
  /* buat clip path bulat lebih kecil lagi */
  clip-path: circle(45% at 50% 50%);
}

#differentList {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  justify-content: center;
}
#differentList > div {
  min-height: 280px;
  flex: 1 1 320px;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-sizing: border-box;
}

@media (max-width: 1199px) {
  #differentList > div {
    min-height: 250px;
    flex: 1 1 45%;
    max-width: 45%;
  }
}

@media (max-width: 991px) {
  #differentList > div {
    min-height: 220px;
    flex: 1 1 100%;
    max-width: 100%;
  }
}
@media (max-width: 767px) {
  #differentList {
    flex-direction: column;
    gap: 1.25rem;
  }
  #differentList > div {
    min-height: 180px;
    max-width: 100%;
  }
}
#differentList > div {
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}