.hero-circle {
    --outline: 3px;

    width: 250px;
    aspect-ratio: 1;
    position: relative;
}

.hero-circle::before {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    clip-path: circle();
    background-color: white;
}

.hero-circle::after {
    content: "";
    display: block;
    position: absolute;
    left: var(--outline);
    top: var(--outline);
    right: var(--outline);
    bottom: var(--outline);
    clip-path: circle();
    background-size: cover;
}