.gallery {
max-width: 1200px;
margin: auto;
padding: 20px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}


.gallery img {
width: 100%;
height: 220px;
object-fit: cover;
border-radius: 14px;
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}


.gallery img:hover {
transform: scale(1.05);
box-shadow: 0 15px 30px rgba(0,0,0,0.25);
}


/* MODAL */
.modal {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.9);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease;
z-index: 9999;
}


.modal.active {
opacity: 1;
visibility: visible;
}


.modal img {
max-width: 92%;
max-height: 90%;
border-radius: 12px;
}


.close {
position: absolute;
top: 25px;
right: 35px;
font-size: 38px;
color: #fff;
cursor: pointer;
user-select: none;
}