/* camera-ftp.css */

.image-gallery-container {
    width: 100%;
}

.image-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Spacing between images */
    justify-content: flex-start; /* Align items to the start */
}

.image-gallery-item {
    flex: 0 0 calc(25% - 10px); /* 4 items per row on desktop, minus gap */
    box-sizing: border-box;
    overflow: hidden; /* Prevent images from exceeding their container */
    position: relative; /* Needed for the lifting effect */
    transition: transform 0.3s ease; /* Smooth transition for the hover effect */
    z-index: 1; /* Initial z-index */
}

.image-gallery-item a {
    display: block; /* Make the link fill the container */
}

.image-gallery-item img {
    width: 100%;
    height: auto;
    display: block;  /* Remove extra space below images */
    cursor: pointer;
    transition: transform 0.3s ease; /* Add transition to the image itself */
    border-radius: 5px; /* Add 5px rounded corners */
}



/* Hover effect: Lift and Tilt the image */
.image-gallery-item:hover {
    transform: translateY(-10px) rotate(2deg) scale(1.1); /* Move up and rotate */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add a subtle shadow */
    z-index: 2; /* Bring the hovered item to the front */
}

/* Mobile Styles (2 items per row) */
@media (max-width: 768px) {
    .image-gallery-item {
        flex: 0 0 calc(50% - 10px); /* 2 items per row on mobile, minus gap */
    }
}