/* =========================
GALLERY GRID
========================= */
#gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 18px;
max-width: 1200px;
margin: 0 auto;
}

/* =========================
GALLERY CARD
========================= */
.gallery-card {
aspect-ratio: 1 / 1;
overflow: hidden;
border-radius: 10px;
cursor: pointer;
transition: transform 0.3s ease;
position: relative;
}

.gallery-card:hover {
transform: scale(1.05);
}

/* IMAGE FIT */
.gallery-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

/* =========================
THANOS EFFECT
========================= */
.gallery-card.thanos {
animation: thanosSnap 0.7s forwards;
}

@keyframes thanosSnap {
0% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.5;
transform: scale(0.8) translate(-20px, -20px);
filter: blur(4px);
}
100% {
opacity: 0;
transform: scale(0.2) translate(-80px, -80px);
filter: blur(10px);
}
}

/* =========================
GRID CONTROLS (gallery-only usage)
========================= */
.grid-controls {
display: flex;
gap: 10px;
justify-content: center;
margin: 20px;
}

.grid-controls button,
.grid-controls input {
padding: 8px 12px;
border-radius: 8px;
border: none;
cursor: pointer;
}