/* Main container with square aspect ratio */
#imageGallery {
    position: relative;
    width: 100%;           /* Takes full width of parent */
    padding-top: 100%;     /* Creates 1:1 aspect ratio (height = width) */
    margin: 0 auto;        /* Center horizontally */
    max-width: 600px;     /* Optional: Set maximum width (height will match) */
}

/* Inner container that fills the square */
.carousel-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Image styling */
.carousel-item {
    width: 100%;
    height: 100%;
}

.carousel-item img {
    width: auto;
    height: auto;
    max-width: 75%;
    max-height: 100%;
    object-fit: contain;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* For mobile devices */
@media (max-width: 992px) {
    #imageGallery {
        /*position: relative;*/
        /*width: 100%;           !* Takes full width of parent *!*/
        padding-top: max(50%, 250px);     /* Creates 1:1 aspect ratio (height = width) */
        /*margin: 0 auto;        !* Center horizontally *!*/
        /*max-width: 300px;     !* Optional: Set maximum width (height will match) *!*/
    }
}

.color-dot {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%; /* Makes it circular */
    border: 1px solid #ddd; /* Optional: adds a border */
}