/* Style for the section container */
section {
    margin: 0px auto;
    padding: 16px 0;
    max-width: 90%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    opacity: 0; /* Start with 0 opacity */
    visibility: hidden; /* Hide sections initially */
    transition: opacity 0.5s ease-in-out, visibility 0s 0.5s; /* Smooth fade-in */
}

section.visible {
    opacity: 1; /* Fade in to full opacity */
    visibility: visible; /* Make sections visible */
    transition: opacity 0.5s ease-in-out; /* Smooth transition */
}

/* Style for the image grid container */
.image-grid {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    max-width: 90%;
    width: 100%;
    box-sizing: border-box;
}

/* Style for each column */
.image-grid .column,
.image-grid .column2,
.image-grid .column3,
.image-grid .column4 {
    flex: 1; /* Each column takes equal width */
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 100%;
    box-sizing: border-box;
}

/* Column 1 - First 11 images */
.image-grid .column img:nth-child(-n+11) {
    height: 700px;
}

/* Column 1 - Images from 12th to 22nd */
.image-grid .column img:nth-child(n+12):nth-child(-n+22) {
    height: 600px;
}

/* Column 3 - Same as Column 1 */
.image-grid .column3 img:nth-child(-n+11) {
    height: 700px;
}

.image-grid .column3 img:nth-child(n+12):nth-child(-n+22) {
    height: 600px;
}

/* Column 2 & 4 - Different height */
.image-grid .column2 img:nth-child(-n+11) {
    height: 600px;
}

.image-grid .column2 img:nth-child(n+12):nth-child(-n+22) {
    height: 700px;
}

.image-grid .column4 img:nth-child(-n+11) {
    height: 600px;
}

.image-grid .column4 img:nth-child(n+12):nth-child(-n+22) {
    height: 700px;
}

/* Style for individual images */
.image-grid img {
    width: 100%;
    object-fit: cover; /* Ensure images cover the container */
    display: block;
    opacity: 0; /* Start invisible */
    transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Make images visible when loaded class is added */
.image-grid img.loaded {
    opacity: 1;
    transform: translateY(0);
}

/* Scroll animation */
.image-grid img.scroll-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive Layout Adjustments */

/* 3 Columns Layout */
@media (max-width: 1024px) {
    .image-grid {
        gap: 6px; /* Reduce gap for smaller screens */
    }

    .image-grid .column4 {
        display: none; /* Hide the 4th column */
    }
}

/* 2 Columns Layout */
@media (max-width: 767px) {
    .image-grid {
        gap: 8px; /* Maintain gap for mobile */
    }

    .image-grid .column3 {
        display: none; /* Hide the 3rd column */
    }

    /* Adjust image heights for 2-column layout */
    .image-grid .column img:nth-child(-n+11),
    .image-grid .column2 img:nth-child(-n+11),
    .image-grid .column img:nth-child(n+12):nth-child(-n+22),
    .image-grid .column2 img:nth-child(n+12):nth-child(-n+22) {
        height: auto; /* Allow images to scale naturally */
        aspect-ratio: 3 / 4; /* Maintain aspect ratio (adjust as needed) */
    }
}

/* Very Small Screens (e.g., 360px) */
@media (max-width: 360px) {
    .image-grid {
        gap: 4px; /* Reduce gap further for very small screens */
    }

    /* Ensure images remain proportional */
    .image-grid img {
        height: auto; /* Allow images to scale naturally */
        aspect-ratio: 3 / 4; /* Maintain aspect ratio (adjust as needed) */
    }
}