/* Fill every photo frame edge to edge. Crop instead of letterboxing so
   frames never show black bars of different sizes. Bias toward the top
   so portrait faces stay in frame. */
.article-photo,
.lead-image,
.card-image {
  background: #191919;
}

.article-photo > img,
.lead-image img,
.card-image img {
  object-fit: cover;
  object-position: 50% 22%;
  background: #191919;
}

/* Set by /image-fit.js when a photo is much taller than its frame. */
.fit-contain {
  position: relative;
  overflow: hidden;
}
.fit-contain::before {
  content: '';
  position: absolute;
  inset: -30px;
  background: var(--fit-bg) center / cover no-repeat;
  filter: blur(22px) brightness(0.55);
}
.photo-frame {
  display: block;
  width: 100%;
  line-height: 0;
  background: #191919;
}
.photo-frame > img {
  width: 100%;
  height: 100%;
}
.fit-contain > img,
.fit-contain img {
  position: relative;
  object-fit: contain !important;
  background: transparent !important;
}