.help {
  display: flex;
  flex-direction: column;
  padding-inline: var(--space-medium);
  position: relative;
  z-index: 1;
}

.help__container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-medium);
  justify-content: center;
  margin-inline: auto;
  width: min(100%, 40em);
}

.help__card {
  align-content: start;
  color: inherit;
  display: grid;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  width: 100%;
}

.help__card header {
  display: grid;
  gap: var(--space-small);
  padding: 0.75em;
}

.help__card header h2 {
  font-size: var(--font-size-small);
  font-weight: 700;
  letter-spacing: var(--letter-spacing);
  margin-block: -0.3875em;
}

.help__card figure {
  display: grid;
  margin: 0.1875em;
  margin-top: 0;
  overflow: clip;
}

@media(min-width: 36em) {

  .help__card {
    width: min(100%, 10em);
  }

}

@media(min-width: 64em) {

  .help {
    padding-inline: var(--space-x-large);
  }

}