.gallery-container {

    .header {
        margin-top: 20px;
    }

    .header1 {
        display: flex;
        gap: 50px;
        border-bottom: 1px solid rgba(33, 37, 41, 0.25);
        padding-bottom: 10px;

        .title {
            flex-grow: 1;

            font-weight: 400;
            font-size: 16px;
            line-height: 150%;
            
            a {
                text-decoration: none;
                color: #212529;
                font-weight: 400;
                font-size: 16px;
                line-height: 150%;
            }

            img {
                margin-top: -2px;
                width: 16px;
                height: 16px;
            }
        }

        .icons {
            display: flex;
            align-items: center;
            gap: 16px;

            img {
                width: 20px;
                height: 20px;
            }
        }
    }

    .header2 {
        display: flex;
        justify-content: space-between;
        font-size: 24px;
        font-weight: 400;
        line-height: 120%;
        margin-top: 20px;
        margin-bottom: 15px;

        .text1 {

            img {
                width: 20px;
                height: 20px;            
            }
        }
    }

    .gallery-wrapper {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        margin-top: 20px;

        @media (max-width: 1295px) {
            .right {
            }
        }

        .left {
            max-width: 879px;

            .grid {
                display: flex;
                flex-wrap: wrap;
                gap: 10px;

                .grid-item {
                    width: calc(50% - 5px);
                    border-radius: 6px;
                    overflow: hidden;
                    margin-bottom: 10px;

                    img {
                        width: 100%;
                        object-fit: cover; 
                        height: auto; 
                        display: block;
                        border-radius: 6px;
                    }
                }
            }

            .grid0 {
                margin-bottom: 10px;

                .grid-item {
                    width: 100%;
                    border-radius: 6px;
                    overflow: hidden;

                    img {
                        width: 100%;
                        height: auto;
                    }
                }
            }
        }

        .right {
            display: flex;
            flex-grow: 1;
        }
    }
}

#galleryModal {

    /* Czarne tło całego modala */
    .bg-black {
        background-color: #000 !important;
    }

    /* Zdjęcie na pełnym ekranie */
    .gallery-full-img {
        max-height: 85vh; /* Zostawiamy miejsce na paski */
        max-width: 90vw;  /* Margines po bokach */
        object-fit: contain; /* Ważne! Nie ucina zdjęcia, dopasowuje je */
        box-shadow: 0 0 50px rgba(0,0,0,0.5);
    }

    /* Przycisk Close (Prawy górny róg) */
    .btn-close-gallery {
        position: absolute;
        top: 30px;
        right: 30px;
        z-index: 1060; /* Musi być nad karuzelą */
        background: transparent;
        color: #fff;
        border: 1px solid white;
        padding: 8px 16px;
        border-radius: 6px;
        font-size: 16px;
        transition: all 0.3s;
    }
    .btn-close-gallery:hover {
        background: rgba(255,255,255,0.1);
        border-color: #fff;
        color: #fff;
    }

    /* --- DOLNE KRESKI (Indicators) --- */
    .custom-indicators {
        bottom: 30px; /* Odsunięcie od dołu */
        margin-bottom: 0;
        gap: 8px; /* Odstęp między kreskami */
    }

    /* Styl pojedynczej kreski */
    .custom-indicators [data-bs-target] {
        width: 40px;      /* Długość kreski */
        height: 2px;      /* Grubość kreski */
        background-color: rgba(255,255,255,0.3); /* Nieaktywna - szara */
        border: none;
        margin: 0;
        opacity: 1;
        transition: background-color 0.3s;
    }

    /* Aktywna kreska */
    .custom-indicators .active {
        background-color: #fff; /* Aktywna - biała */
        height: 3px; /* Opcjonalnie: minimalnie grubsza */
    }

    /* Strzałki nawigacji */
    .carousel-control-prev, .carousel-control-next {
        width: 5%; /* Węższe strefy klikania */
        opacity: 1;
        color: #fff;
    }
    .carousel-control-prev:hover, .carousel-control-next:hover {
        opacity: 1;
    }
}