/* === THUMBNAIL LIST WRAPPER === */
#thumbnail-list {
    display: flex;
    flex-wrap: nowrap; /* nema prelaska u novi red */
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 1% 4%;
    background-color: #f8f9fd;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

/* === THUMBNAIL INNER === */
.thumbnail-inner {
    display: flex;
    flex-wrap: nowrap; /* isto nema prelamanja */
    justify-content: center;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* === THUMBNAIL BUTTON === */
.media-thumb-button {
    flex: 0 0 auto;
    width: clamp(60px, 6vw, 120px);
    height: clamp(60px, 6vw, 120px);
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 10%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

/* === HOVER EFEKT === */
.media-thumb-button:hover {
    transform: scale(1.05);
}

/* === WRAPPER ZA SLIKU === */
.thumb-wrapper {
    width: 100%;
    height: 100%;
    border-radius: 10%;
    background-color: #f8f9fd;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* === SLIKA UNUTAR BUTTONA === */
.thumb-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
    background-color: transparent;
    border: none;
}

/* === INDIKATOR SELEKCIJE === */
.thumb-indicator {
    display: none !important;
}

/* === RESPONSIVE MAX LIMITI === */
@media (min-width: 1920px) {
    .media-thumb-button {
    width: clamp(70px, 18vw, 140px);
    height: clamp(70px, 18vw, 140px);
}
}

@media (max-width: 1200px) {
   .media-thumb-button {
    width: clamp(70px, 18vw, 140px);
    height: clamp(70px, 18vw, 140px);
}
}

@media (max-width: 900px) {
    .media-thumb-button {
    width: clamp(70px, 18vw, 140px);
    height: clamp(70px, 18vw, 140px);
}
}