.mobile-menu {
    white-space: nowrap; /* [1] */
    overflow-x: auto; /* [2] */
    -webkit-overflow-scrolling: touch; /* [3] */
    -ms-overflow-style: none; /* For Internet Explorer and Edge */
    scrollbar-width: none; /* For Firefox */
}
/* [5] */
.mobile-menu::-webkit-scrollbar { display: none; }
.overflow-auto::-webkit-scrollbar {
    display: none; /* Hides scrollbar for Chrome/Safari */
}
.overflow-auto {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
.square-container {
    width: 100%; /* Or a specific width, e.g., 200px */
    max-width: 100px; /* Optional: limit max size */
}

.square-image {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1; /* Forces square ratio */
    object-fit: cover;    /* Crops image to fill square without distortion */
    object-position: center; /* Centers the crop */
}