/*
==================================================
sections_generator.css
Układ sekcji + galerie 1x1
==================================================
*/

.sg-sekcja{
    width:100%;
    margin:0 auto;
}

/*
==================================================
OPIS GŁÓWNY
==================================================
*/

.sg-opis-glowny{
    max-width:1400px;
    margin:0 auto 60px auto;
    padding:20px;
}

.sg-opis-glowny > *:first-child{
    margin-top:0;
}

.sg-opis-glowny > *:last-child{
    margin-bottom:0;
}

/*
==================================================
BLOK FOTO + HTML
==================================================
*/

.sg-blok-foto-html{

    max-width:1400px;

    margin:
        0 auto
        80px
        auto;

    padding:
        0px
        20px;

    display:grid;

    grid-template-columns:
        minmax(320px,1fr)
        minmax(320px,1fr);

    gap:40px;

    align-items:center;
}

.sg-blok-odwrocony .sg-blok-foto{
    order:2;
}

.sg-blok-odwrocony .sg-blok-html{
    order:1;
}

.sg-blok-html{

    width:100%;

    overflow:hidden;
}

.sg-blok-html > *:first-child{
    margin-top:0;
}

.sg-blok-html > *:last-child{
    margin-bottom:0;
}

/*
==================================================
DUŻE FOTO W BLOKU
==================================================
*/

.sg-blok-foto{

    width:100%;

    aspect-ratio:1/1;

    overflow:hidden;

    border-radius:20px;

    cursor:pointer;

    position:relative;

    background:
        rgb(235,235,235);
}

.sg-img-blok{

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    transition:
        transform
        0.45s;

    will-change:
        transform;
}

.sg-blok-foto:hover .sg-img-blok{

    transform:
        scale(1.05);
}

/*
==================================================
GALERIA MINIATUR
==================================================
*/

.sg-galeria{

    max-width:1400px;

    margin:
        0 auto
        80px
        auto;

    padding:
        0px
        20px;

    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:14px;
}

.sg-miniatura{

    position:relative;

    overflow:hidden;

    aspect-ratio:1/1;

    border-radius:16px;

    background:
        rgb(240,240,240);

    cursor:
        zoom-in;
}

.sg-img-miniatura{

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    transition:
        transform
        0.45s;

    will-change:
        transform;
}

.sg-miniatura:hover .sg-img-miniatura{

    transform:
        scale(1.08);
}

/*
==================================================
MOBILKA
==================================================
*/

@media(max-width:1100px){

    .sg-galeria{

        grid-template-columns:
            repeat(2,1fr);
    }
}

@media(max-width:800px){

    .sg-blok-foto-html{

        grid-template-columns:
            1fr;

        gap:
            24px;

        margin-bottom:
            50px;
    }

    .sg-blok-odwrocony .sg-blok-foto,
    .sg-blok-odwrocony .sg-blok-html{

        order:initial;
    }

    .sg-blok-foto{

        aspect-ratio:
            1/1;
    }
}

@media(max-width:600px){

    .sg-galeria{

        grid-template-columns:
            1fr;

        gap:
            10px;
    }

    .sg-opis-glowny{

        padding:
            14px;
    }

    .sg-blok-foto-html{

        padding:
            14px;
    }

    .sg-galeria{

        padding:
            14px;
    }
}