.dot {
    flex: 0 0 auto;
    position: relative;
    width: 1rem;
    height: 1rem;
    border: 1px solid var(--orange);
    border-radius: 50%;
    box-sizing: content-box;
}

.dot::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0.4375rem;
    height: 0.4375rem;
    background: var(--orange);
    border-radius: 50%;
}