/* Fatty Acid DB pop-up: screenshot tiles (shots/*.webp, pre-padded to fixed ratios so rows line up). */
.fa-t{margin:0;position:relative}
.fa-t .fa-a{display:block;position:relative;height:100%;border-radius:12px;overflow:hidden;background:var(--fa-bg,#fff);
  box-shadow:0 0 0 1px var(--pp-line),0 16px 36px -26px rgba(0,0,0,.55);transition:transform .35s cubic-bezier(.2,.9,.2,1.1),box-shadow .35s}
.fa-t img{display:block;width:100%;height:100%;object-fit:contain;border-radius:0}
.fa-cap{position:absolute;left:10px;bottom:10px;font:600 11.5px/1 var(--f-body);padding:6px 9px;border-radius:99px;
  background:rgba(20,22,28,.78);color:#fff;backdrop-filter:blur(4px);pointer-events:none}
.fa-wide{margin:0 0 12px}
.fa-row4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 12px}
.fa-row4 .fa-t .fa-a{aspect-ratio:1/1}
.fa-bento{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto;gap:12px;margin:0 0 16px}   /* minmax(0,…): the 1600px pictures may not stretch the columns */
.fa-bento .big{grid-row:span 2}
.fa-bento .fa-t .fa-a{aspect-ratio:8/3}
.fa-bento .big .fa-a{aspect-ratio:auto;height:100%;min-height:0}
.fa-bento .big .fa-a img{position:absolute;inset:0}   /* the tall picture fits the height of the two pictures beside it instead of setting it */
.fa-t,.fa-t .fa-a,.fa-t img{min-width:0;max-width:100%}
.fa-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:0 0 8px}
.fa-trio h4{margin-bottom:4px}
.fa-trio p{font-size:14px;color:var(--pp-mut);margin:0}
.pp-body .fa-intro{color:var(--pp-mut)}
@media (max-width:700px){
  .fa-row4{grid-template-columns:1fr 1fr}
  .fa-bento{grid-template-columns:1fr}
  .fa-bento .big{grid-row:auto}
  .fa-bento .big .fa-a{aspect-ratio:4/3}
  .fa-trio{grid-template-columns:1fr;gap:12px}
}