Team als polaroids Nieuw

<!-- Team als polaroids · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="tpo">
  <div class="tpo__in">
    <div class="tpo__head">
      <span class="tpo__eye">Branderij Spaarne · Haarlem</span>
      <h2 class="tpo__h">Vijf mensen, één brander, elke dinsdag om zes uur begint het.</h2>
    </div>
    <div class="tpo__wall">
      <figure class="tpo__p" style="--r:-4deg;--y:6px" tabindex="0"><div class="tpo__img" style="--bg:#a8623a;--sk:#e8c4a0;--sh:#3d2a1e"><svg viewBox="0 0 100 100" aria-hidden="true"><circle cx="50" cy="40" r="17" fill="var(--sk)"/><path d="M33 34c2-14 32-16 34 0-6-6-26-6-34 0Z" fill="var(--sh)"/><path d="M16 100c2-24 16-34 34-34s32 10 34 34Z" fill="#2b211b"/></svg></div><figcaption><b>Joost</b><span>brandmeester</span><em>Proeft elke batch drie keer, ook op zondag.</em></figcaption></figure>
      <figure class="tpo__p" style="--r:3deg;--y:-4px" tabindex="0"><div class="tpo__img" style="--bg:#5b7360;--sk:#c98f68;--sh:#1e1712"><svg viewBox="0 0 100 100" aria-hidden="true"><path d="M30 46c-4-24 44-24 40 0l2 22H28Z" fill="var(--sh)"/><circle cx="50" cy="42" r="16" fill="var(--sk)"/><path d="M16 100c2-24 16-34 34-34s32 10 34 34Z" fill="#e9e1d0"/></svg></div><figcaption><b>Noor</b><span>inkoop · Ethiopië en Peru</span><em>Kent de boeren van vier coöperaties bij naam.</em></figcaption></figure>
      <figure class="tpo__p" style="--r:-2deg;--y:10px" tabindex="0"><div class="tpo__img" style="--bg:#d3a24c;--sk:#f0d2b6;--sh:#8c5a2b"><svg viewBox="0 0 100 100" aria-hidden="true"><circle cx="50" cy="40" r="17" fill="var(--sk)"/><path d="M32 36c0-16 36-18 36 0v-6c-8-10-28-10-36 0Z" fill="var(--sh)"/><rect x="36" y="38" width="28" height="7" rx="3" fill="none" stroke="#2b211b" stroke-width="2"/><path d="M16 100c2-24 16-34 34-34s32 10 34 34Z" fill="#7a3b2e"/></svg></div><figcaption><b>Bram</b><span>barista en trainer</span><em>Haalt 31 seconden uit elke espresso, niet 30.</em></figcaption></figure>
      <figure class="tpo__p" style="--r:5deg;--y:-2px" tabindex="0"><div class="tpo__img" style="--bg:#7c8fa6;--sk:#8a5a3e;--sh:#14100d"><svg viewBox="0 0 100 100" aria-hidden="true"><circle cx="50" cy="26" r="9" fill="var(--sh)"/><circle cx="50" cy="42" r="16" fill="var(--sk)"/><path d="M16 100c2-24 16-34 34-34s32 10 34 34Z" fill="#2f4b3a"/></svg></div><figcaption><b>Fatma</b><span>webshop en verzending</span><em>Pakt 140 zakken per ochtend, met kaartje.</em></figcaption></figure>
      <figure class="tpo__p" style="--r:-5deg;--y:4px" tabindex="0"><div class="tpo__img" style="--bg:#b8a48a;--sk:#e2b896;--sh:#cfcac2"><svg viewBox="0 0 100 100" aria-hidden="true"><circle cx="50" cy="41" r="17" fill="var(--sk)"/><path d="M33 38c0-18 34-18 34 0-4-4-8-6-17-6s-13 2-17 6Z" fill="var(--sh)"/><path d="M40 52c4 6 16 6 20 0" stroke="var(--sh)" stroke-width="5" fill="none"/><path d="M16 100c2-24 16-34 34-34s32 10 34 34Z" fill="#1f3550"/></svg></div><figcaption><b>Henk</b><span>oprichter, met pensioen</span><em>Komt nog elke vrijdag de brander schoonmaken.</em></figcaption></figure>
    </div>
  </div>
</div>
</div>

/* Team als polaroids · NedDev · eigen werk. */
.tpo{background:#8a6a4a;background-image:radial-gradient(rgba(0,0,0,.12) 1px,transparent 1.5px),radial-gradient(rgba(255,255,255,.08) 1px,transparent 1.5px);background-size:9px 9px,13px 13px;background-position:0 0,4px 6px;color:#fbf6ec;font-family:'Switzer',sans-serif;box-sizing:border-box;overflow:hidden}
.tpo *{box-sizing:border-box}
.tpo__in{max-width:1180px;margin:0 auto;padding:44px 32px 52px}
.tpo__head{max-width:640px;margin-bottom:34px}
.tpo__eye{font:500 11px 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#ffd9a8}
.tpo__h{font-size:clamp(24px,3vw,36px);font-weight:700;letter-spacing:-.02em;line-height:1.12;margin:10px 0 0}
.tpo__wall{display:grid;grid-template-columns:repeat(5,1fr);gap:22px;align-items:start}
.tpo__p{margin:0;background:#fdfbf6;padding:10px 10px 14px;color:#2b211b;box-shadow:0 10px 22px rgba(30,18,8,.35),0 1px 2px rgba(30,18,8,.3);transform:translateY(var(--y)) rotate(var(--r));transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s;position:relative;cursor:default;outline:none}
.tpo__p::before{content:'';position:absolute;left:50%;top:-9px;width:54px;height:18px;margin-left:-27px;background:rgba(240,228,200,.75);transform:rotate(calc(var(--r) * -1.5))}
.tpo__p:hover,.tpo__p:focus-visible{transform:translateY(-8px) rotate(0) scale(1.04);box-shadow:0 22px 40px rgba(30,18,8,.4);z-index:2}
.tpo__p:focus-visible{outline:2px solid #ffd9a8;outline-offset:4px}
.tpo__img{aspect-ratio:1;background:var(--bg);background-image:linear-gradient(160deg,rgba(255,255,255,.18),transparent 55%);overflow:hidden;display:flex;align-items:flex-end}
.tpo__img svg{width:100%;height:auto;display:block}
.tpo__p figcaption{padding:12px 4px 0;display:flex;flex-direction:column;gap:2px}
.tpo__p b{font-size:16px}
.tpo__p span{font:500 10.5px 'JetBrains Mono',monospace;color:#8a6a4a;letter-spacing:.04em}
.tpo__p em{font-family:'Bradley Hand','Segoe Print','Ink Free',Georgia,serif;font-style:italic;font-size:14px;line-height:1.35;color:#3a2c22;margin-top:8px}
@media(max-width:900px){.tpo__wall{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.tpo__in{padding:30px 16px 36px}.tpo__wall{grid-template-columns:repeat(2,1fr);gap:18px 14px}.tpo__p{padding:7px 7px 10px}.tpo__p b{font-size:14px}.tpo__p em{font-size:12.5px}.tpo__p:last-child{grid-column:1/-1;width:52%;justify-self:center}}
@media(prefers-reduced-motion:reduce){.tpo__p{transition:none}}