/* Container Styles */
.product {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px;
    position: relative;
    height: auto; /* Auto height to fit content */
    overflow: auto;
}

/* Image Container Styles */
.img-container {
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
}

.img-container img {
    height: auto;
    max-width: 100%;
}

/* Small Image List Styles */
.product-small-img {
    overflow-x: auto;
    text-align: center;
}

.product-small-img ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    width: max-content; /* Allow ul to expand based on its content */
}

.product-small-img li {
    flex: 0 0 auto; /* Prevent list items from shrinking or growing */
    margin: 5px; /* Adjust margin as needed */
}

.product-small-img img {
    height: 92px; /* Default height */
    cursor: pointer;
    display: block;
    opacity: .6;
    transition: opacity 0.3s;
}

.product-small-img img:hover {
    opacity: 1;
}

/* Responsive Styles */
@media (max-width: 576px) {
    .product-small-img img {
        height: 64px; /* Smaller thumbnails for very small screens */
    }
    .product {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px;
    position: relative;
    height: auto; /* Auto height to fit content */
    overflow: auto;
}
}

@media (min-width: 576px) and (max-width: 767px) {
    .product-small-img img {
        height: 80px; /* Slightly larger thumbnails for small tablets */
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .product-small-img img {
        height: 90px; /* Adjust thumbnail size for tablets and small desktops */
    }
}

@media (min-width: 992px) {
    .product-small-img img {
        height: 69px; /* Larger thumbnails for desktops */
    }
}