.misg-gallery-wrapper {
    max-width: 600px;
    margin: 20px auto;
}

.misg-main-image img {
    width: 100%;
    height: auto;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.misg-thumbnails-wrapper {
    overflow-x: auto;
    margin-top: 10px;
}

.misg-thumbnails {
    display: flex;
    gap: 8px;
    width: max-content;
}

.misg-thumb {
    flex: 0 0 auto;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 4px;
}

.misg-thumb img {
    display: block;
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 4px;
}

.misg-thumb.active {
    border-color: #0073aa;
}



.misg-main-image img {
    border-radius: 0 !important;
    max-width: 100%;
}

.misg-thumbnails-wrapper {
    overflow-x: auto;
    margin-top: 10px;
    width: 100%;
}

.misg-thumbnails {
    display: flex;
    gap: 8px;
    width: max-content; /* чтобы контент ширился по миниатюрам */
}

.misg-thumb {
    flex: 0 0 auto;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 0 !important; /* убрать скругления */
}

.misg-thumb.active {
    border-color: #0071a1; /* или любой цвет выделения */
}

.misg-thumb img {
    border-radius: 0 !important;
    display: block;
    width: 60px; /* размер миниатюр */
    height: 60px;
    object-fit: cover;
}

/* Чтобы показывалось ровно 4 миниатюры на экране, задаём ширину контейнеру: */
.misg-thumbnails-wrapper {
    max-width: calc(60px * 4 + 8px * 3); /* 4 миниатюры + 3 промежутка */
}


.misg-container {
    max-width: 400px; /* или нужная тебе ширина главного изображения */
    margin: 0 auto;
}

.misg-main-image img {
    width: 100%;
    height: auto;
    border-radius: 0 !important;
    display: block;
}

.misg-thumbnails-wrapper {
    overflow-x: auto;
    margin-top: 10px;
    width: 100%;
}

.misg-thumbnails {
    display: flex;
    gap: 8px; /* расстояние между миниатюрами */
    width: max-content;
}

.misg-thumb {
    flex: 0 0 calc((100% - 24px) / 4); /* 24px = 3 gaps * 8px */
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 0 !important;
    box-sizing: border-box;
}

.misg-thumb img {
    width: 100%;
    height: 60px; /* высоту можно подкорректировать */
    object-fit: cover;
    border-radius: 0 !important;
    display: block;
}

.misg-thumb.active {
    border-color: #0071a1;
}