/* PHOTO BAND */
/* A five-panel strip, same idea as the LinkedIn cover: the photos carry the
   range of care (pregnancy, newborn, movement, motherhood) and the wordmark
   sits across them. Panels are equal-width so the rhythm is even; each one
   has its own object-position because the subject sits differently in each. */
.pband{position:relative;display:flex;width:100%;overflow:hidden;
  height:clamp(15rem,26vw,24rem);background:var(--tint)}
.pband__p{flex:1 1 0;min-width:0;height:100%;display:block}
.pband__p img{width:100%;height:100%;object-fit:cover;display:block}
.pband__p:nth-child(1) img{object-position:54% 26%}
.pband__p:nth-child(2) img{object-position:46% 30%}
.pband__p:nth-child(3) img{object-position:58% 18%}
/* The scrim is what lets one white wordmark read over five different
   exposures. Without it the mark disappears on the two bright panels. */
.pband:after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(31,24,9,.10),rgba(31,24,9,.30))}
.pband__wm{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(34rem,46vw);color:#FFFFFF;z-index:2;pointer-events:none}
.pband__wm svg{width:100%;height:auto;display:block;fill:currentColor}
@media(max-width:760px){
  .pband{height:13rem}
  .pband__wm{width:74vw}
}