/* a3-blogpic.css - the blog row on the home page, his words of 15 October: the photos shown whole, and the words on top of
   the photo at the bottom. Measured first, at 390 and at 1440: every picture's box already takes the file's own 960 x 536
   shape and draws the whole file (0 pixels lost on any side); where a subject runs past the top of a picture, it runs past
   the top of the file itself, so no rule can show more of it. The picture stays whole here; the post's title moves from
   the band under the picture onto the picture, in a dark band across its bottom edge, where these pictures were made with
   a dark, empty foot. The band's ground is true black at 78 percent and the words are white. Sizes chosen by measuring
   every title in its own font at the row's own widths: at a phone's width (one picture in view) the longest title takes
   three lines and the band stays under 40 percent of the picture's height; wider, the titles take one or two lines and the
   band stays near a quarter of it. The arrows, the drift and the copies the drift makes carry the same classes and are
   not named here. No motion is added. Plain ASCII. */

/* the picture: the file's shape, fitted whole - the box holds the picture and nothing under it */
.a3-look2-page .bdeck .btile .btile__art {
  position: relative;
  display: block;
  height: auto;
  aspect-ratio: auto;
  background: #000;
}
.a3-look2-page .bdeck .btile .btile__art img {
  display: block;
  width: 100%;
  height: auto !important;
  aspect-ratio: 960 / 536;
  object-fit: contain;
  object-position: center;
}

/* the title: on the picture, across its bottom edge */
.a3-look2-page .bdeck .btile .btile__t {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin: 0;
  padding: 6px 12px 7px;
  color: #fff;
  background: rgba(0, 0, 0, 0.78);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.12;
}

/* a phone's width: one picture in view, the room narrower */
@media (max-width: 620px) {
  .a3-look2-page .bdeck .btile .btile__t {
    padding: 6px 10px 7px;
    font-size: 0.875rem;
    line-height: 1.16;
  }
}
