.counter-circle{

    --stroke-width: calc(3 * var(--wp--custom--border-width));
    position:relative;
    aspect-ratio: 1 / 1;
    width: calc(4 * var(--wp--preset--font-size--5-dvw));
    margin: 0 auto;

        .circle-svg{
            width:100%;
            height:100%;
            transform:rotate(-90deg);
        }

        .circle-bg{
            fill:none;
            stroke: var(--wp--preset--color--mid);
            stroke-width: var(--stroke-width);
        }

        .circle-progress{
            fill:none;
            stroke:var(--wp--preset--color--ci-yellow);
            stroke-width: var(--stroke-width);
            stroke-linecap:round;

            stroke-dasharray:339.292;
            stroke-dashoffset:339.292;
        }

        .counter-text{
            position:absolute;
            inset:0;

            display:flex;
            align-items:center;
            justify-content:center;

            color: var(--wp--preset--color--ci-yellow);

            font-size:var(--wp--preset--font-size--5-dvw);
            font-weight:900;

            .counter-symbol{
                margin-left:4px;
            }
        }

        
}