section {
  margin-block: var(--size-solid-100);
  gap: calc(var(--size-100) - 0.15rem);
}

/* COUNTER*/

.counter {
  counter-reset: step;
}
.counter div {
  counter-increment: step;
  position: relative;
}

.counter div::after {
  content: counter(step);
  position: absolute;
  top: 0;
  right: 0;
  width: var(--size-600);
  aspect-ratio: 1;
  text-align: right;
  padding: var(--size-100);
  color: var(--clr-primary);
  font-weight: var(--fw-400);
  background: var(--clr-btn);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  border-top-right-radius: var(--rounded);
}

.percentage {
 display: none;
}

:target {
  outline: 2px solid var(--clr-flow);
  transition: border 200ms linear;
}

@media (min-width: 48em) {
  section {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .h2 {
    font-size: var(--fs-700);
  }
}
@media (min-width: 64em) {
  section {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}