.c-num-list{
  & .list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap: var(--spacing-auto-xl);
  counter-reset: num-list;

  }

  .c-list-item{
    --couter-size: clamp(5rem, 4rem + 7vw, 9.35rem);
    counter-increment: num-list;
    display: grid;
    gap: 1.25rem;
    grid-template-columns: var(--couter-size) 1fr;
    align-items: center;

    &::before{
      content: counter(num-list);
      display: grid;
      place-content: center;
      font-weight: 700;
      font-size: var(--font-size-h1);
      color: var(--headings-color);
      line-height: 1;
      width: var(--couter-size, 3rem);
      height: var(--couter-size, 3rem);
      border: 6px solid #fff;
      border-radius: var(--couter-size, 3rem);
      background-color: transparent;
      transition: all 0.2s ease-in-out;

    }

    &:hover::before{
      border-color: var(--color-secondary);
      font-size: calc(var(--font-size-h1) + 0.5rem);
    }
  }
}