/* ===== GRID ===== */
.image-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    /* margin-top: 30px; */
}

/* ===== CARD ===== */
.img-box{
    width: 100%;
    height: 220px; /* fixed height */
    overflow: hidden;
    border-radius: 14px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: #fff;
    border: 1px solid #eee; /* subtle border for card feel */
}

/* IMAGE */
.img-box img{
    width: 100%;
    height: 100%;
    object-fit: cover; /* better than fill for maintaining ratio */
    transition: transform 0.4s ease;
    display: block;
}

/* HOVER */
.img-box:hover{
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.2); /* slightly stronger shadow */
}

.img-box:hover img{
    transform: scale(1.07);
}

/* RESPONSIVE */
@media(max-width:900px){
    .image-grid{
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width:500px){
    .image-grid{
        grid-template-columns: 1fr;
    }
}