/* ==========================================================
   SP44MS
   GALLERY.CSS
   ========================================================== */

#gallery{

    background:#ffffff;

    overflow:hidden;

}

/* ==========================================
   GRID
   ========================================== */

.gallery-grid{

    display:grid;

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

    grid-auto-rows:14.5833vw;

    gap:1.25vw;

}

/* ==========================================
   UKŁAD
   ========================================== */

.gallery-grid figure:nth-child(1){

    grid-column:span 2;

}

.gallery-grid figure:nth-child(4){

    grid-row:span 2;

}

.gallery-grid figure:nth-child(6){

    grid-column:span 2;

}

/* ==========================================
   KAFELKI
   ========================================== */

.gallery-grid figure{

    position:relative;

    overflow:hidden;

    border-radius:1.4583vw;

    cursor:pointer;

    box-shadow:var(--shadow-sm);

    transition:.45s;

    background:#ddd;

}

.gallery-grid figure:hover{

    transform:translateY(-0.5208vw);

    box-shadow:var(--shadow-xl);

}

.gallery-grid img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:1s;

}

.gallery-grid figure:hover img{

    transform:scale(1.10);

}

/* ==========================================
   NAKŁADKA
   ========================================== */

.gallery-grid figure::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        to top,

        rgba(0,0,0,.45),

        transparent 55%

    );

    opacity:0;

    transition:.35s;

    z-index:2;

}

.gallery-grid figure:hover::before{

    opacity:1;

}

/* ==========================================
   IKONA
   ========================================== */

.gallery-grid figure::after{

    content:"+";

    position:absolute;

    left:50%;

    top:50%;

    width:3.8542vw;

    height:3.8542vw;

    margin-left:-1.9271vw;

    margin-top:-1.9271vw;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(255,255,255,.92);

    color:var(--primary);

    font-size:2rem;

    font-weight:700;

    transform:scale(.5);

    opacity:0;

    transition:.35s;

    z-index:3;

}

.gallery-grid figure:hover::after{

    transform:scale(1);

    opacity:1;

}

/* ==========================================
   RESPONSIVE
   ========================================== */

@media(max-width:57.2917vw){

.gallery-grid{

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

}

.gallery-grid figure:nth-child(1),

.gallery-grid figure:nth-child(6){

grid-column:span 1;

}

.gallery-grid figure:nth-child(4){

grid-row:span 1;

}

}

@media(max-width:40.0vw){

.gallery-grid{

grid-template-columns:1fr;

grid-auto-rows:13.5417vw;

}

.gallery-grid figure{

grid-column:auto !important;

grid-row:auto !important;

}

}