/* Style for the section container */
section {
    margin: 0px auto;
    padding: 16px 0;
    max-width: 70%;
    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 {
    flex: 1; /* Each column takes equal width */
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 100%;
    box-sizing: border-box;
}

/* Style for individual images */
.image-grid img {
    width: 100%; /* Ensure images fill the column width */
    object-fit: cover; /* Cover the container while maintaining aspect ratio */
    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);
}

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

/* Column 1 - Images from 7th to 11th */
.image-grid .column img:nth-child(n+7):nth-child(-n+11) {
    height: auto;
}

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

.image-grid .column2 img:nth-child(n+7):nth-child(-n+11) {
    height: auto;
}

/* Mobile View: 2 Columns */
@media (max-width: 767px) {
    .image-grid {
        flex-direction: row; /* Keep 2 columns on mobile */
        gap: 4px; /* Maintain gap between columns */
        max-width: 95%; /* Allow the grid to take full width on small screens */
    }

    .image-grid .column,
    .image-grid .column2 {
        flex: 1; /* Each column takes equal width */
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    /* Reset specific heights for mobile */
    .image-grid img {
        height: auto !important; /* Ensure images are responsive on mobile */
    }
}

/* Shorter Web View: Smaller Images */
@media (max-width: 1024px) and (min-width: 768px) {
    .image-grid {
        max-width: 80%; /* Reduce grid width for shorter web views */
    }

    .image-grid img {
        max-width: 90%; /* Make images smaller */
    }
}