.process-card {
    --counter-font-size: var(--h2);
    --counter-size: calc(var(--counter-font-size) * 1.5);
    --mask: linear-gradient(black, black) no-repeat bottom/100% calc(100% - var(--border-width)), linear-gradient(black, black) no-repeat top left/calc(50% - var(--counter-size) / 2) var(--border-width), linear-gradient(black, black) no-repeat top right/calc(50% - var(--counter-size) / 2) var(--border-width);

    padding: var(--space-m);
    position: relative;
    isolation: isolate;

&::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border: var(--border-width) dashed var(--border-color-dark);
    -webkit-mask: var(--mask);
    mask: var(--mask);
}

&::after {
    content: counter(process);
    counter-increment: process;
    position: absolute;
    inset: calc(var(--counter-font-size) * 1.5 / -2) auto auto 50%;
    translate: -50% 0;
    font-size: var(--counter-font-size);
    line-height: 1;
    inline-size: var(--counter-size);
    block-size: var(--counter-size);
    display: grid;
    place-items: center;
}
}