/* Text + Gallery Mosaic Block */
.text-gallery-mosaic {
    background: radial-gradient(96.98% 96.98% at 50% 50%, var(--secondary-800) 0%, rgba(29, 31, 20, 0.00) 100%);
    padding: 100px 0;
    margin: 0;
}

.text-gallery-mosaic .gallery {
    min-height: 300px;
}
.text-gallery-mosaic .text-content-column {
    display: flex;
    align-items: center;
}

.text-gallery-mosaic .multiple-images {
    display: flex;
    height: 100%;
    flex-direction: column;
    gap: 30px;
}

.text-gallery-mosaic .image {
    border-radius: 4px;
    border: 2px solid color-mix(in srgb, var(--white) 50%, transparent);
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.text-gallery-mosaic .text-content-column {
    padding-left: 30px;
}

.text-gallery-mosaic .flex-row-reverse .text-content-column {
    padding-right: 30px;
}

/* Ensure layout container is flex and support reversing on desktop */
.text-gallery-mosaic .text-and-gallery {
    display: flex;
}
.text-gallery-mosaic .text-and-gallery.flex-row-reverse {
    flex-direction: row-reverse;
}

@media (max-width: 768px) {
    .text-gallery-mosaic {
        padding: 50px 0;
    }
    /* reset to default */
    .text-gallery-mosaic .text-content-column {
        padding-left: 15px;
    }
    /* reset to default */
    .text-gallery-mosaic .flex-row-reverse .text-content-column {
        padding-right: 15px;
    }

    .gallery-col:first-of-type {
        padding-bottom: 30px;
    }

    .gallery-col:last-of-type {
        padding-bottom: 0px;
    }
    
    /* Stack on mobile and always show text first */
    .text-gallery-mosaic .text-and-gallery {
        flex-direction: column !important;
        display: flex !important;
    }
    .text-gallery-mosaic .text-content-column {
        order: 1;
        margin-bottom: 30px;
        width: 100%;
        max-width: 100%;
    }
    .text-gallery-mosaic .gallery-column {
        order: 2;
        width: 100%;
        max-width: 100%;
    }
    .text-gallery-mosaic .gallery {
        flex-direction: column;
    }
    .text-gallery-mosaic .image {
        aspect-ratio: 9 / 10;
        max-width: 400px;
        margin: 0 auto;
    }
}