src/components/text/TextInset.astro
---
// TextInset, recovered from blurr-components.pages.dev
---
<div class="tins-wrap"> <div class="tins-body"> <p>De meeste bedrijven weten wel dat ze aan marketing moeten doen, maar niet hoe ze het slim aanpakken.</p> </div> <aside class="tins-aside"> <p>Goede marketing is geen geluk, het is een systeem.</p> </aside> </div>
<style>
.tins-wrap{--color-accent: #6366f1;--color-primary: #0a0a0a;max-width:680px;padding:32px;font-family:system-ui,sans-serif;display:grid;grid-template-columns:1fr 240px;gap:32px;align-items:start}
.tins-wrap{grid-template-columns:1fr}
.tins-body p{margin:0 0 16px;font-size:.95rem;line-height:1.75;color:#374151}
.tins-body p:last-child{margin-bottom:0}
.tins-aside{border-left:3px solid var(--color-accent);padding:16px 20px;background:#f5f3ff;border-radius:0 8px 8px 0;position:sticky;top:24px}
.tins-aside p{margin:0;font-size:.9rem;line-height:1.6;font-style:italic;color:#4b5563;font-weight:500}
</style>