.gallery-image{
    cursor:pointer;
}
.gallery-image-wrapper {
    position: relative;
    display: inline-block;
    overflow: hidden; /* Zapobiega wychodzeniu obrazu poza kontener */
}

.gallery-image-wrapper img {
    display: block;
    width: 100%;
    transition: transform 0.4s ease-in-out; /* Płynne powiększenie obrazu */
}

.gallery-image-wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: rgba(255, 255, 255, 0.5); /* Biała warstwa z przezroczystością */
    opacity: 1; /* Początkowa przezroczystość */
    transition: opacity 0.6s ease-in-out; /* Płynne zanikanie warstwy */
    z-index: 1; /* Ustalamy wyższy poziom dla warstwy */
    pointer-events: none; /* Umożliwia interakcję z obrazem */
}

.gallery-image-wrapper:hover::before {
    opacity: 0; /* Usuwanie warstwy po najechaniu */
}

.gallery-image-wrapper:hover img {
    transform: scale(1.1); /* Powiększenie obrazu */
}

/* Modal */
#galleryModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.5s ease-in-out; /* Płynne pojawianie się galerii */
    z-index: 2000;
}

/* Kontener z zawartością - przezroczysty */
#galleryModal .modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: transparent; /* Przezroczysty kontener */
    max-width: 85%;
    max-height: 85%;
}

/* Stylizacja obrazu w galerii */
#galleryModal img {
    max-width: 80vw;
    max-height: 80vh;
    transition: all 0.5s ease-in-out; /* Płynne przejścia przez opacity */
    position: relative;
    opacity: 1; /* Początkowa przezroczystość */
}

/* Styl na obrazek, kiedy następuje zmiana */
.fade-out {
    opacity: 0!important; /* Zniknięcie obrazu */
}

/* Styl na obrazek, kiedy pojawi się nowy */
.fade-in {
    opacity: 1!important; /* Pojawienie się obrazu */
}

/* Przycisk X */
#galleryModal .close-button {
    position: absolute;
    top: -30px;
    right: 0px; /* Ustawiamy prawy margines zamiast right: 0px */
    background: transparent;
    border-radius: 50%; /* Okrągły kształt */
    cursor: pointer;
    padding: 0; /* Usuwamy padding, by nie wpływał na rozmiar */
    width: 40px;  /* Stała szerokość przycisku */
    height: 40px; /* Stała wysokość przycisku */
    display: flex; /* Używamy flexbox do wycentrowania zawartości */
    justify-content: center; /* Wyśrodkowanie poziome */
    align-items: center; /* Wyśrodkowanie pionowe */
    border: 0px;

}

/* Kontener okręgu wewnątrz przycisku */
#galleryModal .close-button .circle {
    border: 2px solid transparent; /* Początkowo przezroczysty border */
    display: flex; /* Używamy flexbox do wycentrowania zawartości */
    justify-content: center; /* Wyśrodkowanie poziome */
    align-items: center; /* Wyśrodkowanie pionowe */
    font-size: 30px;
    position: absolute;
    border-radius: 50%; /* Okrągły kształt kontenera */
    width: 36px;  /* Zajmuje całą przestrzeń przycisku */
    height: 36px; /* Zajmuje całą przestrzeń przycisku */
    transition: all 0.3s ease; /* Płynne przejście dla wszystkich efektów */
    line-height: 0px;
    will-change: transform, outline; /* Zapewnienie, że przeglądarka zoptymalizuje zmiany */
    color: white;
    opacity: 0.7;
}

/* Efekty po najechaniu na przycisk */
#galleryModal .close-button:hover .circle {
    border: 2px solid white; /* Zmiana koloru outline na biały */
    transform: rotate(90deg); /* Obrót o 360 stopni */
    width: 30px; /* Zmniejszenie szerokości przycisku */
    height: 30px; /* Zmniejszenie wysokości przycisku */
    opacity: 1;
}


/* Informacja i/n */
#galleryModal .image-info {
    position: absolute;
    bottom: -30px;
    right: 0px;
    color: white;
    font-size: 12px;
    opacity: 0.7;
}


#galleryModal button {
    border: 2px solid transparent; /* Początkowo przezroczysty border */
    background-color: transparent; /* Zmieniamy tło na przezroczyste */
    padding: 30px 25px; /* Zwiększamy padding, aby przyciski były wyższe */
    font-size: 40px; /* Zwiększamy rozmiar tekstu */
    cursor: pointer;
    color: white; /* Początkowy kolor tekstu */
    transition: all 0.3s ease; /* Płynne przejście dla efektów */
    opacity: 0.7;
    position: absolute;
    display: block;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2001;
}

#galleryModal .left-gallery-button{
    left: 0px;

}

#galleryModal .right-gallery-button{
    right: 0px;

}

/* Efekty po najechaniu na przycisk */
#galleryModal button:hover {
    opacity: 1;
}

.gallery-col-one-half{
	width: calc((100% - var(--gap))/2);
	box-sizing: border-box;
}

.gallery-col-one-full{
	width: 100%;
	box-sizing: border-box;
}

.gallery-row{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: flex-start;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr))!important;
    --gap: 20px!important;
    row-gap:20px!important;
}
@media (max-width: 767px) {
    .gallery-row{
        gap: var(--gap)!important;
        justify-content: center;        
    }
    .gallery-col-one-half{
        width: calc((100% - var(--gap))/2*0.85);
        box-sizing: border-box;
    }

    .gallery-image-wrapper::before{
        display: none;
    }
}