/**
 * ===================================================================
 * 14. Image Columns
 *
 * File: /blocks/image-columns/image-columns.css
 * ===================================================================
 */

.image-columns-section {
    padding: 96px 0;
    position: relative;
    overflow: hidden;
}

.image-columns-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 48px;
}

/* 
 * MOBILE & TABLET: 2-COLUMN GRID
 * This is the default, mobile-first layout.
*/
.image-columns-grid {
    display: grid;
    gap: 15px;
    grid-template-columns: 1fr 1fr;
    align-items: end; 
    .image-columns-grid
}

/* The first main image is for desktop only, so we hide it by default. */
.image-columns-grid .main-image {
    display: none;
}

/* All other main image instances are for mobile/tablet, so they are visible by default. */
.image-columns-grid .main-image-mobile {
    display: grid;
}

/* General styles for all columns */
.image-columns-grid .image-column {
    display: grid;
    gap: 16px;
}

.image-columns-grid .image-column-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    object-fit: contain; /* Ensures the entire image is visible, maintaining aspect ratio */
}

.item-image .heading {
    margin-bottom: 0;
}

/* TABLET: Adjusts the gap for slightly more space. */
@media (min-width: 768px) {
    .image-columns-grid {
        gap: 20px;
    }
}

/* 
 * DESKTOP: 4-COLUMN GRID
 * This layout applies to screens 1024px and wider.
*/
@media (min-width: 1024px) {
    .image-columns-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 25px;
    }

    /* On desktop, we show the one main image that was hidden on mobile. */
    .image-columns-grid .main-image {
        display: grid;
    }
    
    /* We hide all the duplicated 'mobile' versions of the main image. */
    .image-columns-grid .main-image-mobile {
        display: none;
    }
}