LogoGrid Social Proof

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

<section class="lgr__section lgr__cols-4 lgr__size-md lgr--grayscale"> <header class="lgr__header"> <p class="lgr__eyebrow">Onze klanten</p>  </header> <ul class="lgr__grid" role="list"> <li class="lgr__cell"> <span class="lgr__link"> <img data-allow-img class="lgr__logo" src="/img/ext/logo-google.svg" alt="Google" loading="lazy" decoding="async" > </span> </li><li class="lgr__cell"> <span class="lgr__link"> <img data-allow-img class="lgr__logo" src="/img/ext/logo-meta.svg" alt="Meta" loading="lazy" decoding="async" > </span> </li><li class="lgr__cell"> <span class="lgr__link"> <img data-allow-img class="lgr__logo" src="/img/ext/logo-shopify.svg" alt="Shopify" loading="lazy" decoding="async" > </span> </li><li class="lgr__cell"> <span class="lgr__link"> <img data-allow-img class="lgr__logo" src="/img/ext/logo-stripe.svg" alt="Stripe" loading="lazy" decoding="async" > </span> </li><li class="lgr__cell"> <span class="lgr__link"> <img data-allow-img class="lgr__logo" src="/img/ext/logo-slack.svg" alt="Slack" loading="lazy" decoding="async" > </span> </li><li class="lgr__cell"> <span class="lgr__link"> <img data-allow-img class="lgr__logo" src="/img/ext/logo-hubspot.svg" alt="HubSpot" loading="lazy" decoding="async" > </span> </li><li class="lgr__cell"> <span class="lgr__link"> <img data-allow-img class="lgr__logo" src="/img/ext/Notion_app_logo-ef896d.png" alt="Notion" loading="lazy" decoding="async" > </span> </li><li class="lgr__cell"> <span class="lgr__link"> <img data-allow-img class="lgr__logo" src="/img/ext/Figma-logo-f663f0.svg" alt="Figma" loading="lazy" decoding="async" > </span> </li> </ul> </section>

<style>
.lgr__section{padding:4rem 1.5rem;max-width:1200px;margin:0 auto}
.lgr__header{text-align:center;margin-bottom:2.5rem;display:flex;flex-direction:column;align-items:center;gap:.5rem}
.lgr__eyebrow{margin:0;font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-muted)}
.lgr__headline{margin:0;font-size:clamp(1.25rem,2vw,1.75rem);font-weight:700;color:var(--color-primary)}
.lgr__grid{list-style:none;margin:0;padding:0;display:grid;gap:0}
.lgr__cols-3 .lgr__grid{grid-template-columns:repeat(3,1fr)}
.lgr__cols-4 .lgr__grid{grid-template-columns:repeat(4,1fr)}
.lgr__cols-5 .lgr__grid{grid-template-columns:repeat(5,1fr)}
.lgr__cols-6 .lgr__grid{grid-template-columns:repeat(6,1fr)}
.lgr__cell{display:flex;align-items:center;justify-content:center;padding:1.5rem 2rem;border:1px solid rgba(0,0,0,.06);margin:-.5px}
.lgr__link{display:flex;align-items:center;justify-content:center;text-decoration:none}
.lgr__logo{object-fit:contain;display:block;transition:filter .25s ease}
.lgr__size-sm .lgr__logo{max-height:28px;max-width:120px}
.lgr__size-md .lgr__logo{max-height:40px;max-width:160px}
.lgr__size-lg .lgr__logo{max-height:56px;max-width:200px}
.lgr--grayscale .lgr__logo{filter:grayscale(100%) opacity(.5)}
.lgr--grayscale .lgr__cell:hover .lgr__logo{filter:none}
.lgr__cols-6 .lgr__grid,.lgr__cols-5 .lgr__grid{grid-template-columns:repeat(4,1fr)}
.lgr__cols-6 .lgr__grid,.lgr__cols-5 .lgr__grid,.lgr__cols-4 .lgr__grid{grid-template-columns:repeat(3,1fr)}
.lgr__grid{grid-template-columns:repeat(2,1fr)!important}
</style>