.WHS-HowItWorks-Grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}

.WHS-HowItWorks-Card {
  flex: 0 1 calc(33.333% - 1rem);
  max-width: 400px;
}

@media screen and (max-width: 1024px) {
  .WHS-HowItWorks-Card {
    flex: 0 1 calc(50% - 1rem);
  }
}

@media screen and (max-width: 800px) {
  .WHS-HowItWorks-Grid {
    gap: 2.5rem;
    padding: 0;
  }

  .WHS-HowItWorks-Card {
    flex: 0 1 100%;
    max-width: 400px;
  }
}

@media screen and (max-width: 520px) {
  .WHS-HowItWorks-Grid {
    gap: 2rem;
    padding: 16px 24px ;
  }
}