/* ============================================================
   Community homepages - the two large pictures standing side by side
   ------------------------------------------------------------
   On the front page the left picture and the right one were different
   heights.

   The column's width is fixed but no height was ever given, so what
   decided the height was each picture's own shape. The eight that are
   registered run from 1.05 to 1.64 wide-to-tall, so the almost-square
   one stood 352px high and the widest one 226px - half again as tall,
   side by side on the same row.

   Custom.css already carries .image-post2 img { height: 290px }, but the
   front page does not load that file. Other screens may be leaning on
   that one line, so it is not pulled in here; this says the same thing
   in a way that reaches only this block.

   The height is held with padding rather than aspect-ratio. The two do
   the same work, and padding does it in old browsers as well.
   ============================================================ */

/* 3:2. Seven of the eight pictures fall between 1.38 and 1.64, so at
   this shape most of them fill the box with nothing left over. */
.community-homes .image-post2 .post-gallery {
    position: relative;
    padding-top: 66.666%;
    overflow: hidden;
    background-color: #f5f5f5;
}

/* contain, so nothing is ever cut. These pictures are advertisements
   with words inside them - trimming the top and bottom would take the
   shop's name and telephone number with it. A picture whose shape does
   not match is given room beside it instead of being cropped.

   width and height are spelled out because style.css says
   .news-post img { width: 100% } and nothing else; left at that the
   picture would spill out of the box we have just fixed. */
.community-homes .image-post2 .post-gallery > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* The title that fades in on hover is placed against .image-post2,
   whose height is now the height set above, so it already matches.
   All it needs is to stand in front of the picture. */
.community-homes .image-post2 .post-gallery .hover-box {
    z-index: 1;
}