/* Shared property-listing grid, used by the homepage (Featured Properties) and the
   /apartments listing page.

   Both pages store their listings as two content types (…Listings Left / …Listings Right).
   The views interleave those two lists into this single wrapping flex container, so each
   left/right pair lands on the same flex line. Flex items stretch by default, so both
   frames in a row grow to the height of the taller one — no fixed heights anywhere. */

.homeCalloutGrid {
    display: flex;
    flex-wrap: wrap;
    margin: 0px -15px;
}

.homeCalloutCell {
    display: flex;
    width: 50%;
    padding: 0px 15px;
}

    /* Fill the stretched cell so the white frame itself is the full row height. */
    .homeCalloutGrid .homeCallouts {
        display: flex;
        flex: 1 1 auto;
        align-items: flex-start;
        width: 100%;
        margin: 0px 0px 20px 0px;
    }

.homeCalloutPhoto {
    flex: 0 0 41.66667%;
    max-width: 41.66667%;
    padding: 0px 15px;
}

    /* A shared ratio keeps every thumbnail the same shape regardless of the source
       image's dimensions, which is what made the old frames uneven. */
    .homeCalloutPhoto img {
        width: 100%;
        aspect-ratio: 4 / 3;
        object-fit: cover;
    }

.homeCalloutText {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0px 15px;
}

/* Below 992px the photo stacks above the text, matching the previous col-md behaviour. */
@media (max-width: 991px) {
    .homeCalloutGrid .homeCallouts {
        flex-direction: column;
    }

    .homeCalloutPhoto {
        flex: 0 0 auto;
        max-width: 100%;
    }
}

/* Below 768px the grid collapses to a single column, matching the previous col-sm behaviour. */
@media (max-width: 767px) {
    .homeCalloutCell {
        width: 100%;
    }
}