.haxa-features {
  padding-block: clamp(4.5rem, 10vw, 7rem);
}

.haxa-features--subtle {
  background: var(--haxa-surface-subtle);
}

.haxa-feature-grid {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.haxa-feature-card {
  height: 100%;
  min-height: 17rem;
  padding: clamp(1.5rem, 4vw, 2.2rem);
  border: 1px solid var(--haxa-border);
  border-radius: 1.1rem;
  background: var(--haxa-surface);
  box-shadow: 0 1rem 2.8rem rgb(23 32 51 / 7%);
}

.haxa-feature-card__index {
  color: var(--haxa-brand);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.haxa-feature-card h3 {
  margin: 4.5rem 0 0;
  font-size: 1.45rem;
}

.haxa-feature-card p {
  margin: 0.7rem 0 0;
  color: var(--haxa-muted);
}

@media (min-width: 44rem) {
  .haxa-feature-grid--two,
  .haxa-feature-grid--three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .haxa-feature-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}