/**
 * Images Grid Styles
 * Masonry-style grid layout for gallery images
 */

/* Grid Container */
.images-grid-section {
    padding: 60px 0;
}

/* Grid Items - Default styles for all screens */
.images-grid__item {
    overflow: hidden;
}

.images-grid__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Desktop only: Apply CSS Grid layout (1025px and up) */
@media (min-width: 1025px) {
    /* Grid Wrapper - Using CSS Grid with 2 columns */
    .images-grid {
    position: relative;
    width: 100%;
}
    .images-grid__wrapper {
        display: grid !important;
        grid-template-columns: 2fr 1fr !important; /* 2 columns: 66% and 33% */
        grid-auto-rows: minmax(200px, auto) !important;
        position: relative !important;
        height: auto !important; /* Override masonry inline height */
    }

    /* Grid Items */
    .images-grid__item {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
    }

    /* First image: Takes first column and spans 2 rows */
    .images-grid__item.w-66 {
        grid-column: 1;
        grid-row: 1 / 3; /* Spans row 1 and 2 */
    }

    /* Second image: Takes second column, first row */
    .images-grid__item.w-33:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
    }

    /* Third image: Takes second column, second row */
    .images-grid__item.w-33:nth-child(3) {
        grid-column: 2;
        grid-row: 2;
    }

    /* Images after the third: Each takes full width (2 columns) */
    .images-grid__item.w-50 {
        grid-column: 1 / -1; /* Spans all columns */
        grid-row: auto;
    }
}

/* Mobile and Tablet: Keep default slider behavior (no grid overrides) */
@media (max-width: 1024px) {
    .images-grid-section {
        padding: 40px 0;
    }
}