.how-it-works {
  margin-top: 4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow-x: hidden;

  gap: 2rem;

  padding: 2rem;
  height: 100vh;
}

.title-hiw {
  font-size: 2rem;
  color: var(--white);
  letter-spacing: 0.06rem;
  font-weight: 700;
}

.title-hiw span {
  color: var(--color3);
}

.list-card-hiw {
  display: flex;
  flex-direction: row;
  gap: 2rem;
}

.card-hiw {
  display: flex;
  flex-direction: column;

  padding: 3rem;
  gap: 1rem;

  text-align: center;
  align-items: center;
  justify-content: center;

  border-radius: 1rem;
  border: 1px solid #ffffff25;
  background: linear-gradient(
    181deg,
    rgba(250, 250, 250, 0.6) -12.7%,
    rgba(250, 250, 250, 0) 133.07%
  );
  backdrop-filter: blur(10px);

  width: 300px;
  height: 300px;
}

.card-hiw h2 {
  color: var(--text);
  font-weight: 700;
  font-size: 1.5rem;
}

.card-hiw p {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--text);
}

@media (max-width: 1310px) {
  .list-card-hiw {
    display: grid;
    grid-template-columns: 1fr 1fr;
    flex-direction: column;
  }
}

@media (max-width: 900px) {
  .how-it-works {
    height: 100%;
  }
}

@media (max-width: 760px) {
  .list-card-hiw {
    display: flex;
    flex-direction: column;
  }
}