src/components/image/ImagePolaroid.astro
---
// ImagePolaroid, recovered from blurr-components.pages.dev
---
<section class="ipo"> <h2 class="ipo__title">Achter de schermen</h2> <div class="ipo__row"> <figure class="ipo__card" style="--ipo-rot: -3deg"> <div class="ipo__media"> <div class="ipo__placeholder" aria-label="Teamfoto 1"></div> </div> <figcaption class="ipo__caption">Kick-off 2024</figcaption> </figure><figure class="ipo__card" style="--ipo-rot: 2deg"> <div class="ipo__media"> <div class="ipo__placeholder" aria-label="Teamfoto 2"></div> </div> <figcaption class="ipo__caption">Creatieve sessie</figcaption> </figure><figure class="ipo__card" style="--ipo-rot: -1deg"> <div class="ipo__media"> <div class="ipo__placeholder" aria-label="Teamfoto 3"></div> </div> <figcaption class="ipo__caption">Awards avond</figcaption> </figure> </div> </section>
<style>
.ipo{padding:3rem 0}
.ipo__title{font-size:2rem;font-weight:700;color:var(--color-primary, #0a0a0a);text-align:center;margin:0 0 3rem}
.ipo__row{display:flex;flex-wrap:wrap;justify-content:center;gap:2rem;padding:1rem}
.ipo__card{width:200px;background:#fff;padding:1rem 1rem 2.5rem;box-shadow:0 4px 20px #00000026,0 1px 4px #0000001a;transform:rotate(var(--ipo-rot, 0deg));transition:transform .25s,box-shadow .25s;cursor:pointer;margin:0}
.ipo__card:hover{transform:rotate(0) scale(1.05);box-shadow:0 10px 40px #0003;z-index:2;position:relative}
.ipo__media{aspect-ratio:1;overflow:hidden;background:#f5f5f5}
.ipo__img{width:100%;height:100%;object-fit:cover}
.ipo__placeholder{width:100%;height:100%;background:linear-gradient(135deg,#e0d8d0,#d0c8c0)}
.ipo__caption{font-size:.85rem;color:#555;text-align:center;padding-top:.75rem;font-family:cursive,sans-serif}
.ipo__card{width:160px}
</style>