src/components/image/ImageMasonry.astro
---
// ImageMasonry, recovered from blurr-components.pages.dev
---
<section class="imn__section"> <div class="imn__header"> <p class="imn__eyebrow">Impressie</p> <h2 class="imn__headline">Beelden zeggen meer dan woorden</h2> </div> <div class="imn__grid" data-columns="3" style="--imn-columns: 3;"> <div class="imn__item"> <img data-allow-img src="/img/ext/photo-1460925895917-afdab827c52f-w600-18aff0.jpg" alt="" class="imn__img" loading="lazy" decoding="async"> </div><div class="imn__item"> <img data-allow-img src="/img/ext/photo-1542744173-8e7e53415bb0-w600-d54003.jpg" alt="" class="imn__img" loading="lazy" decoding="async"> </div><div class="imn__item"> <img data-allow-img src="/img/ext/photo-1551434678-e076c223a692-w600-4c2995.jpg" alt="" class="imn__img" loading="lazy" decoding="async"> </div><div class="imn__item"> <img data-allow-img src="/img/ext/photo-1504868584819-f8e8b4b6d7e3-w600-1cf55b.jpg" alt="" class="imn__img" loading="lazy" decoding="async"> </div><div class="imn__item"> <img data-allow-img src="/img/ext/photo-1522071820081-009f0129c71c-w600-72da8c.jpg" alt="" class="imn__img" loading="lazy" decoding="async"> </div><div class="imn__item"> <img data-allow-img src="/img/ext/photo-1611532736597-de2d4265fba3-w600-3b3713.jpg" alt="" class="imn__img" loading="lazy" decoding="async"> </div><div class="imn__item"> <img data-allow-img src="/img/ext/photo-1507003211169-0a1dd7228f2d-w600-8954f7.jpg" alt="" class="imn__img" loading="lazy" decoding="async"> </div> </div> </section>
<style>
.imn__section{padding:4rem 1.5rem;background:var(--color-bg)}
.imn__header{text-align:center;margin-bottom:2.5rem}
.imn__eyebrow{font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent);margin:0 0 .5rem}
.imn__headline{font-size:clamp(1.75rem,4vw,2.75rem);font-weight:700;color:var(--color-primary);margin:0;line-height:1.15}
.imn__grid{columns:var(--imn-columns, 3);column-gap:1rem;max-width:1200px;margin:0 auto;opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.imn__grid--visible{opacity:1;transform:translateY(0)}
.imn__item{break-inside:avoid;margin-bottom:1rem;border-radius:var(--radius);overflow:hidden;transition:transform .3s ease,box-shadow .3s ease}
.imn__item:hover{transform:scale(1.02);box-shadow:0 8px 30px #0000001f}
.imn__img{width:100%;height:auto;display:block;border-radius:var(--radius)}
.imn__grid{columns:1!important}
</style>