@layer components {
  .process__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
  }

  .process__steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-6);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .step {
    --panel-gap: var(--space-2);

    position: relative;
    transition:
      border-color 200ms ease,
      transform 200ms ease;

    &:hover {
      border-color: var(--accent, var(--color-brand-green));
      transform: translateY(-4px);
    }
  }

  .step--numbered {
    align-items: center;
    text-align: center;
    gap: var(--space-4);
  }

  .step__number {
    position: absolute;
    top: var(--space-4);
    right: var(--space-6);
    font-family: var(--font-family-display);
    font-size: var(--font-size-lg);
    color: var(--color-gray-light);
  }

  .step--numbered .step__number {
    position: static;
    font-size: var(--font-size-2xl);
    color: var(--accent, var(--color-brand-green));
  }

  .process__steps--connected {
    position: relative;
  }

  .process__steps--connected::before {
    content: "";
    position: absolute;
    left: var(--space-6);
    right: var(--space-6);
    top: 50%;
    border-top: 2px dashed var(--color-gray-light);
  }

  .process__steps--connected > .step {
    position: relative;
  }

  .step__icon {
    display: grid;
    place-items: center;
    width: 3rem;
    aspect-ratio: 1;
    border-radius: 50%;

    & svg {
      width: 22px;
      height: 22px;
    }
  }

  .step__icon {
    background: color-mix(
      in srgb,
      var(--accent, var(--color-brand-green)) 14%,
      var(--color-white)
    );
    color: var(--accent, var(--color-brand-green));
  }

  .step__text {
    font-size: var(--font-size-sm);
    color: var(--color-gray-dark);
  }

  @media (max-width: 768px) {
    .process__steps--connected::before {
      display: none;
    }
  }
}