body {
    background:
        radial-gradient(circle at top, #2a0008 0%, #0d0d0d 70%);
    color: white;
}

.gallery {
    background: #1a1a1a;
    color: white;
    padding: 100px;
    margin-top: 50%;
    border-radius: 14px;
    box-shadow: 0 0 25px rgba(0,0,0,0.5);

    display: grid;
    width: 65%;
    margin: 0 auto;   /* vycentrování */

    text-align: center;
    grid-template-columns: repeat(auto-fill, minmax(220px,1fr));
    gap: 15px;
}

.album{
    text-decoration:none;
    color:white;
}
    
.album img{
    width:100%;
    aspect-ratio:1/1;
    object-fit:cover;
    border-radius:10px;
}
    
.album h3{
    text-align:center;
    margin-top:5px;
}
    
.gallery-item img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition: 500ms;
}

.gallery-item img:hover{
    transform: scale(1.05);
}
    
.lightbox{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.9);
    justify-content:center;
    align-items:center;
    z-index:9999;
}
    
.lightbox.active{
    display:flex;
    z-index:9999;
}
    
.lightbox img{
    max-width:90%;
    max-height:90%;
}
    
.prev,.next{
    position:absolute;
    top:50%;
    font-size:50px;
    color:white;
    cursor:pointer;
}
    
.prev{left:20px}
.next{right:20px}
    
.close{
    position:absolute;
    top:20px;
    right:30px;
    font-size:40px;
    color:white;
    cursor:pointer;
}

@media (max-width: 768px){

    .gallery{
        width: 80%;
        padding: 10px;
        margin-top: 120px;
        grid-template-columns: repeat(1,1fr);
        gap: 10px;
    }

    .album h3{
        font-size: 16px;
    }

    .prev,.next{
        font-size: 40px;
    }

    .close{
        font-size: 35px;
        right: 20px;
    }

    .album img{
        max-width:75%;
        max-height:80%;
    }

}