Dot navigation

<ul class="dots">
    <li class="dots__item"></li>

    <!-- Repeat other dots -->
    ...
</div>

.dots {
                        /* Center the content */
                        align-items: center;
                        display: flex;
                        justify-content: center;

                        /* Reset styles */
                        list-style-type: none;
                        margin: 0;
                        padding: 0;
                    }

                    .dots__item {
                        /* Rounded border */
                        border-radius: 9999px;
                        height: 12px;
                        width: 12px;

                        /* Active dot */
                        background-color: rgba(0, 0, 0, 0.3);

                        /* Inactive dot */
                        background-color: transparent;
                        border: 1px solid rgba(0, 0, 0, 0.3);

                        /* OPTIONAL: Spacing between dots */
                        margin: 0 4px;
                    }