/* 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 {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-in-out, visibility 0s 0.5s;
}

section.visible {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease-in-out;
}

/* Style for the image grid container */
.image-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-width: 95%;
    width: 100%;
    box-sizing: border-box;
}

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

/* Style for individual images */
.image-grid img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    opacity: 0;
    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);
}

/* Desktop-specific heights (3 columns) */
@media (min-width: 768px) {
    .image-grid .column img:nth-child(-n+6) {
        height: 80vh;
        object-fit: cover;
    }
    .image-grid .column img:nth-child(n+7):nth-child(-n+14) {
        height: 82vh;
        object-fit: cover;
    }
    .image-grid .column2 img:nth-child(-n+6) {
        height: 82vh;
        object-fit: cover;
    }
    .image-grid .column2 img:nth-child(n+7):nth-child(-n+14) {
        height: 80vh;
        object-fit: cover;
    }
    .image-grid .column3 img:nth-child(-n+6) {
        height: 80vh;
        object-fit: cover;
    }
    .image-grid .column3 img:nth-child(n+7):nth-child(-n+14) {
        height: 82vh;
        object-fit: cover;
    }
}

/* Tablet (still 3 columns) */
@media (max-width: 1024px) and (min-width: 768px) {
    section {
        max-width: 85%;
    }
    .image-grid {
       
        max-width: 95%;
    }
    .image-grid .column,
    .image-grid .column2,
    .image-grid .column3 {
        
        flex: 1;
    }
    .image-grid img {
        max-height: 60vh; /* Cap height for tablet */
        height: auto; /* Still allow natural scaling */
    }
}

/* Mobile - Switch to 2 columns */
@media (max-width: 767px) {
    section {
        max-width: 90%;
        margin: clamp(20px, 5vw, 50px) auto;
        padding: clamp(8px, 2vw, 16px);
    }
    

    
    .image-grid .column,
    .image-grid .column2,
    .image-grid .column3 {
        flex: 0 0 calc(50% - clamp(8px, 0.25vw, 3px)); /* 2 columns */
        gap: clamp(4px, 0.5vw, 6px);
        min-width: 0;
    }
    
    .image-grid img {
        height: auto !important; /* Force natural height */
        max-height: none; /* Remove any max-height restrictions */
        object-fit: contain; /* Ensure no cropping */
    }
    
    .image-grid .column3 {
        display: none; /* Hide third column */
    }
}

/* Small mobile - Keep 2 columns */
@media (max-width: 480px) {
    section {
        max-width: 95%;
    }
    

    
    .image-grid .column,
    .image-grid .column2,
    .image-grid .column3 {
        flex: 0 0 calc(50% - 4px); /* Consistent 2 columns */
    }
    
    .image-grid img {
        height: auto !important; /* Reinforce natural height */
        max-height: none; /* No cap */
    }
}