/* Portable Facebook pinboard. Pair with facebook-pinboard.js.
   Section: data-fb-page="{Page profile id}"
   Row: data-fb-pinboard
   Plate: data-fb-post="{id}" data-fb-width="380|440|500" */
.fb-post{
  margin:0;
  width:var(--fb-w);
  max-width:100%;
  border:12px solid var(--white);
  border-bottom-width:0;
  background:var(--white);
  box-shadow:0 18px 40px rgba(29,57,47,.16);
}
.fb-post iframe{
  display:block;
  width:100%;
  height:var(--fb-h);
  border:0;
  background:var(--white);
}
.fb-post--380{--fb-w:374px;--fb-h:486px}
.fb-post--440{--fb-w:424px;--fb-h:531px}
.fb-post--500{--fb-w:474px;--fb-h:576px}
.fb-post figcaption{
  padding:12px 10px 18px;
  font-family:var(--display);
  font-size:1.08rem;
  text-align:center;
  color:var(--pine);
}

.pinboard-row-wrap{
  overflow:visible;
}
.pinboard-row{
  display:flex;
  flex-wrap:nowrap;
  align-items:flex-start;
  justify-content:space-between;
  isolation:isolate;
  width:100%;
  padding:12px 0 40px;
  overflow:visible;
}
.pinboard-row .fb-post{
  position:relative;
  flex:0 0 auto;
  max-width:none;
}
.pinboard-row .fb-post__hit{
  position:absolute;
  inset:0;
  z-index:4;
}
.pinboard-row .fb-post:nth-child(1){transform:rotate(-1.8deg);z-index:2}
.pinboard-row .fb-post:nth-child(2){margin-top:28px;transform:rotate(2.2deg);z-index:3}
.pinboard-row .fb-post:nth-child(3){margin-top:8px;transform:rotate(-1.4deg);z-index:1}
.pinboard-row .fb-post.is-front,
.pinboard-row .fb-post:hover,
.pinboard-row .fb-post:focus-within{
  z-index:10;
}
.pinboard-row .fb-post.is-front .fb-post__hit{
  pointer-events:none;
}

@media (prefers-reduced-motion:no-preference){
  .pinboard-row .fb-post{transition:box-shadow .35s var(--ease,cubic-bezier(.16,1,.3,1))}
  .pinboard-row .fb-post:hover,
  .pinboard-row .fb-post.is-front{box-shadow:0 28px 58px rgba(29,57,47,.2)}
}

@media (max-width:1100px){
  .pinboard-row{justify-content:center;gap:18px}
}
@media (max-width:620px){
  .fb-post--380,
  .fb-post--440,
  .fb-post--500{--fb-h:460px}
  .pinboard-row{justify-content:flex-start;gap:14px}
}