ImageShowcase image

---
// ImageShowcase, recovered from blurr-components.pages.dev
---

<section class="ish"> <h2 class="ish__heading">Wat wij maken</h2> <div class="ish__list"> <div class="ish__item"> <div class="ish__media"> <div class="ish__placeholder" aria-label="Service 1"></div> <span class="ish__tag">Design</span> </div> <h3 class="ish__title">Brand Identity</h3> <p class="ish__desc">Van logo tot volledig merkhandboek.</p> </div><div class="ish__item"> <div class="ish__media"> <div class="ish__placeholder" aria-label="Service 2"></div> <span class="ish__tag">Marketing</span> </div> <h3 class="ish__title">Performance Ads</h3> <p class="ish__desc">Data-gedreven campagnes op Google en Meta.</p> </div><div class="ish__item"> <div class="ish__media"> <div class="ish__placeholder" aria-label="Service 3"></div> <span class="ish__tag">Tech</span> </div> <h3 class="ish__title">Web Development</h3> <p class="ish__desc">Snelle, converterende websites op Astro.</p> </div> </div> </section>

<style>
.ish{padding:3rem 0}
.ish__heading{font-size:clamp(1.75rem,3vw,2.5rem);font-weight:700;color:var(--color-primary, #0a0a0a);text-align:center;margin:0 0 3rem}
.ish__list{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.ish__item{display:flex;flex-direction:column}
.ish__media{position:relative;aspect-ratio:16/10;border-radius:10px;overflow:hidden;margin-bottom:1.25rem}
.ish__img{width:100%;height:100%;object-fit:cover}
.ish__placeholder{width:100%;height:100%;background:linear-gradient(135deg,#e0e4f8,#c8cef0)}
.ish__item:nth-child(2) .ish__placeholder{background:linear-gradient(135deg,#f0e8e0,#e8d8c8)}
.ish__item:nth-child(3) .ish__placeholder{background:linear-gradient(135deg,#e0f0e0,#c8e8c8)}
.ish__tag{position:absolute;top:.75rem;left:.75rem;background:var(--color-primary, #0a0a0a);color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.25rem .6rem;border-radius:4px}
.ish__title{font-size:1.15rem;font-weight:700;color:var(--color-primary, #0a0a0a);margin:0 0 .5rem}
.ish__desc{font-size:.9rem;color:#666;line-height:1.65;margin:0}
.ish__list{grid-template-columns:1fr}
</style>