.custom-tooltip-images {
    position: absolute; /* przykotwiczone do pozycji scrollowania, porusza się razem ze stroną */
    background: transparent; /* bez tła */
    border: none; /* bez ramki */
    padding: 0; /* bez paddingu */
    border-radius: 0; /* bez zaokrąglenia */
    display: flex;
    flex-wrap: wrap; /* na większych ekranach grafiki obok siebie */
    gap: 10px;
    z-index: 9999;
    box-shadow: none; /* bez cienia */
    transform: translateX(-50%); /* wyśrodkowanie poziome względem miejsca kliknięcia */
}

.custom-tooltip-images img {
    border: 1px solid #000; /* czarna ramka wokół grafik */
    max-width: none; /* usuń ograniczenie szerokości - oryginalny rozmiar */
    height: auto;
    display: block;
}

.tooltip-trigger {
    display: inline;
    white-space: normal;
    cursor: pointer;
    color: darkblue; /* standardowy niebieski kolor linków */
    text-decoration: none; /* bez podkreślenia */
}

.tooltip-trigger:hover {
    color: blue; /* ciemniejszy niebieski podczas najechania */
    text-decoration: none; /* bez podkreślenia podczas najechania */
}

/* Responsywność dla mobile i tablet */
@media (max-width: 768px) {
    .custom-tooltip-images {
        left: 50% !important; /* wyśrodkowanie na wąskich ekranach */
        transform: translateX(-50%) !important;
        flex-direction: column; /* grafiki w pionie TYLKO na mobile */
        align-items: center; /* wyśrodkowanie grafik */
        gap: 5px; /* mniejsza przerwa na mobile */
    }
    
    .custom-tooltip-images img {
        max-width: none; /* oryginalny rozmiar również na mobile */
    }
}

@media (max-width: 480px) {
    .custom-tooltip-images {
        gap: 3px; /* mniejsza przerwa na bardzo wąskich ekranach */
    }
    
    .custom-tooltip-images img {
        max-width: none; /* oryginalny rozmiar na wszystkich ekranach */
    }
}