.howoo-card {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 0;
  padding: 18px;
  color: var(--cream);
  background: #757f4a;
}

.howoo-card h2,
.howoo-card p {
  margin: 0;
}

.howoo-card h2 {
  font-size: var(--type-t2-size);
  font-weight: var(--type-t2-weight);
  line-height: var(--type-t2-line-height);
  letter-spacing: var(--type-t2-letter-spacing);
}

.howoo-card p {
  color: rgb(252 252 251 / 78%);
  font-size: var(--type-t3-size);
  font-weight: var(--type-t3-weight);
  line-height: var(--type-t3-line-height);
  letter-spacing: var(--type-t3-letter-spacing);
}

.howoo-card-link {
  width: fit-content;
  color: var(--acid);
  text-decoration: none;
  font-size: var(--type-t3-size);
  font-weight: var(--type-t3-weight);
  line-height: var(--type-t3-line-height);
  letter-spacing: var(--type-t3-letter-spacing);
}

.howoo-card-link:hover,
.howoo-card-link:focus-visible {
  color: var(--cream);
}

.howoo-card-link:focus-visible {
  outline: 2px solid var(--cream);
  outline-offset: 3px;
}