Grid

<div style="overflow-x:auto"><div style="display:grid;grid-template-columns:88px repeat(21,24px);row-gap:12px;justify-content:center;color:#f06;font:12px/16px ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px">
<span>8px grid</span><span style="text-align:center">0</span><span style="text-align:center"></span><span style="text-align:center">8</span><span style="text-align:center"></span><span style="text-align:center">16</span><span style="text-align:center"></span><span style="text-align:center">24</span><span style="text-align:center"></span><span style="text-align:center">32</span><span style="text-align:center"></span><span style="text-align:center">40</span><span style="text-align:center"></span><span style="text-align:center">48</span><span style="text-align:center"></span><span style="text-align:center">56</span><span style="text-align:center"></span><span style="text-align:center">64</span><span style="text-align:center"></span><span style="text-align:center">72</span><span style="text-align:center"></span><span style="text-align:center">80</span>
<span></span><span style="justify-self:center;align-self:end;width:1.5px;height:72px;background:#f06"></span><span style="justify-self:center;align-self:end;width:1.5px;height:48px;background:#f06"></span><span style="justify-self:center;align-self:end;width:1.5px;height:72px;background:#f06"></span><span style="justify-self:center;align-self:end;width:1.5px;height:48px;background:#f06"></span><span style="justify-self:center;align-self:end;width:1.5px;height:72px;background:#f06"></span><span style="justify-self:center;align-self:end;width:1.5px;height:48px;background:#f06"></span><span style="justify-self:center;align-self:end;width:1.5px;height:72px;background:#f06"></span><span style="justify-self:center;align-self:end;width:1.5px;height:48px;background:#f06"></span><span style="justify-self:center;align-self:end;width:1.5px;height:72px;background:#f06"></span><span style="justify-self:center;align-self:end;width:1.5px;height:48px;background:#f06"></span><span style="justify-self:center;align-self:end;width:1.5px;height:72px;background:#f06"></span><span style="justify-self:center;align-self:end;width:1.5px;height:48px;background:#f06"></span><span style="justify-self:center;align-self:end;width:1.5px;height:72px;background:#f06"></span><span style="justify-self:center;align-self:end;width:1.5px;height:48px;background:#f06"></span><span style="justify-self:center;align-self:end;width:1.5px;height:72px;background:#f06"></span><span style="justify-self:center;align-self:end;width:1.5px;height:48px;background:#f06"></span><span style="justify-self:center;align-self:end;width:1.5px;height:72px;background:#f06"></span><span style="justify-self:center;align-self:end;width:1.5px;height:48px;background:#f06"></span><span style="justify-self:center;align-self:end;width:1.5px;height:72px;background:#f06"></span><span style="justify-self:center;align-self:end;width:1.5px;height:48px;background:#f06"></span><span style="justify-self:center;align-self:end;width:1.5px;height:72px;background:#f06"></span>
<span>4px grid</span><span style="text-align:center"></span><span style="text-align:center">4</span><span style="text-align:center"></span><span style="text-align:center">12</span><span style="text-align:center"></span><span style="text-align:center">20</span><span style="text-align:center"></span><span style="text-align:center">28</span><span style="text-align:center"></span><span style="text-align:center">36</span><span style="text-align:center"></span><span style="text-align:center">44</span><span style="text-align:center"></span><span style="text-align:center">52</span><span style="text-align:center"></span><span style="text-align:center">60</span><span style="text-align:center"></span><span style="text-align:center">68</span><span style="text-align:center"></span><span style="text-align:center">76</span><span style="text-align:center"></span>
</div>

<div style="position:relative;min-height:300px;display:grid;place-items:center;background-image:linear-gradient(to right,rgba(255,0,102,.1) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,0,102,.1) 1px,transparent 1px);background-size:4px 4px">
  <div style="display:grid;grid-template-columns:auto auto auto;grid-template-rows:auto auto auto;align-items:center;justify-items:center;gap:2px 8px">
    <span></span><span style="color:#f06;font:12px/16px ui-monospace,SFMono-Regular,Menlo,monospace;text-align:center;justify-self:start;padding-left:16px">4px<br><span style="font-size:20px;line-height:16px;vertical-align:-2px">&darr;</span></span><span></span>
    <span style="color:#f06;font:12px/16px ui-monospace,SFMono-Regular,Menlo,monospace;text-align:right">8px <span style="font-size:20px;line-height:16px;vertical-align:-2px">&#8597;</span><br><br>8px <span style="font-size:20px;line-height:16px;vertical-align:-2px">&#8597;</span></span>
    <span style="display:inline-flex;align-items:center;gap:4px;padding:8px 12px;border-radius:999px;background:var(--oc-semantic-color-background-stacked)"><oc-icon-v1 type="smiley-happy" style="width:16px;height:16px"></oc-icon-v1><span class="oc-copy-100">Label</span></span>
    <span></span>
    <span></span><span style="color:#f06;font:12px/16px ui-monospace,SFMono-Regular,Menlo,monospace;display:flex;justify-content:space-between;width:100%;text-align:center"><span><span style="font-size:20px;line-height:16px;vertical-align:-2px">&harr;</span><br>12px</span><span><span style="font-size:20px;line-height:16px;vertical-align:-2px">&harr;</span><br>12px</span></span><span></span>
<div style="display:grid;background-image:linear-gradient(to right,rgba(255,0,102,.14) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,0,102,.14) 1px,transparent 1px);background-size:8px 8px">
  <div style="padding:8px 24px 24px 24px">
    <p style="color:#f06;font:12px/16px ui-monospace,SFMono-Regular,Menlo,monospace"><span style="font-size:20px;line-height:16px;vertical-align:-2px">&#8597;</span> 24px</p>
    <p class="oc-headline-200" style="margin-top:8px">Headline</p>
    <p style="color:#f06;font:12px/16px ui-monospace,SFMono-Regular,Menlo,monospace"><span style="font-size:20px;line-height:16px;vertical-align:-2px">&#8597;</span> 8px</p>
    <p class="oc-copy-100">Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen.</p>
  <div style="background-color:var(--oc-semantic-color-background-frame);padding:0 16px 24px">
    <p style="color:#f06;font:12px/16px ui-monospace,SFMono-Regular,Menlo,monospace;padding:4px 8px 12px"><span style="font-size:20px;line-height:16px;vertical-align:-2px">&#8597;</span> 40px</p>
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px"><div style="display:flex;align-items:center;gap:16px;background:var(--oc-semantic-color-background-canvas);border-radius:16px;padding:4px"><span style="flex:none;width:40px;height:40px;border-radius:12px;background:repeating-conic-gradient(#0a84ff 0 25%,#0070e0 0 50%) 0 0/16px 16px"></span><span class="oc-headline-100">Headline</span></div><div style="display:flex;align-items:center;gap:16px;background:var(--oc-semantic-color-background-canvas);border-radius:16px;padding:4px"><span style="flex:none;width:40px;height:40px;border-radius:12px;background:repeating-conic-gradient(#0a84ff 0 25%,#0070e0 0 50%) 0 0/16px 16px"></span><span class="oc-headline-100">Headline</span></div><div style="display:flex;align-items:center;gap:16px;background:var(--oc-semantic-color-background-canvas);border-radius:16px;padding:4px"><span style="flex:none;width:40px;height:40px;border-radius:12px;background:repeating-conic-gradient(#0a84ff 0 25%,#0070e0 0 50%) 0 0/16px 16px"></span><span class="oc-headline-100">Headline</span></div><div style="display:flex;align-items:center;gap:16px;background:var(--oc-semantic-color-background-canvas);border-radius:16px;padding:4px"><span style="flex:none;width:40px;height:40px;border-radius:12px;background:repeating-conic-gradient(#0a84ff 0 25%,#0070e0 0 50%) 0 0/16px 16px"></span><span class="oc-headline-100">Headline</span></div></div>
    <p style="color:#f06;font:12px/16px ui-monospace,SFMono-Regular,Menlo,monospace;text-align:center;margin-top:8px">8px gaps</p>

<div style="display:grid;gap:40px;max-width:560px;margin:0 auto">
<p class="demo-label">Content grid: spacing-100 margins and gaps</p>
<div style="padding:0 16px;background:linear-gradient(to right,#f06 16px,transparent 16px,transparent calc(100% - 16px),#f06 calc(100% - 16px));display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:16px"><span style="background:rgba(255,0,102,.12);height:100px"></span><span style="background:rgba(255,0,102,.12);height:100px"></span><span style="background:rgba(255,0,102,.12);height:100px"></span><span style="background:rgba(255,0,102,.12);height:100px"></span><span style="background:rgba(255,0,102,.12);height:100px"></span><span style="background:rgba(255,0,102,.12);height:100px"></span><span style="background:rgba(255,0,102,.12);height:100px"></span><span style="background:rgba(255,0,102,.12);height:100px"></span><span style="background:rgba(255,0,102,.12);height:100px"></span><span style="background:rgba(255,0,102,.12);height:100px"></span><span style="background:rgba(255,0,102,.12);height:100px"></span><span style="background:rgba(255,0,102,.12);height:100px"></span></div></div>
<p class="demo-label">Page grid: no margins, spacing-25 gaps</p>
<div style="display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:4px"><span style="background:var(--oc-semantic-color-background-soft-mint);height:100px"></span><span style="background:var(--oc-semantic-color-background-soft-mint);height:100px"></span><span style="background:var(--oc-semantic-color-background-soft-mint);height:100px"></span><span style="background:var(--oc-semantic-color-background-soft-mint);height:100px"></span><span style="background:var(--oc-semantic-color-background-soft-mint);height:100px"></span><span style="background:var(--oc-semantic-color-background-soft-mint);height:100px"></span><span style="background:var(--oc-semantic-color-background-soft-mint);height:100px"></span><span style="background:var(--oc-semantic-color-background-soft-mint);height:100px"></span><span style="background:var(--oc-semantic-color-background-soft-mint);height:100px"></span><span style="background:var(--oc-semantic-color-background-soft-mint);height:100px"></span><span style="background:var(--oc-semantic-color-background-soft-mint);height:100px"></span><span style="background:var(--oc-semantic-color-background-soft-mint);height:100px"></span></div></div>

<div class="on-frame" style="padding:32px 16px"><div style=""><div style="width:360px;max-width:100%;margin:0 auto;position:relative;background:var(--oc-semantic-color-background-frame);border:1px solid var(--oc-semantic-color-stroke-divider);border-radius:12px;overflow:hidden;color:var(--oc-semantic-color-text-default)"><div aria-hidden="true" style="position:absolute;inset:0;padding:0 16px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:16px;pointer-events:none;z-index:2"><span style="background:rgba(255,0,102,.1)"></span><span style="background:rgba(255,0,102,.1)"></span><span style="background:rgba(255,0,102,.1)"></span><span style="background:rgba(255,0,102,.1)"></span><span style="background:rgba(255,0,102,.1)"></span><span style="background:rgba(255,0,102,.1)"></span><span style="background:rgba(255,0,102,.1)"></span><span style="background:rgba(255,0,102,.1)"></span><span style="background:rgba(255,0,102,.1)"></span><span style="background:rgba(255,0,102,.1)"></span><span style="background:rgba(255,0,102,.1)"></span><span style="background:rgba(255,0,102,.1)"></span></div><div style="background:var(--oc-semantic-color-background-canvas);border-radius:12px 12px 0 0;padding-bottom:16px"><div style="display:flex;justify-content:space-between;align-items:center;padding:14px 24px 10px;font:700 15px/20px OTTOSans,sans-serif;color:var(--oc-semantic-color-text-default)"><span>9:30</span><span style="display:flex;gap:6px;align-items:center"><oc-icon-v1 type="wifi" style="width:16px;height:16px"></oc-icon-v1><span style="width:10px;height:16px;border-radius:2px;background:var(--oc-semantic-color-text-default)"></span></span></div><div style="display:flex;align-items:center;gap:4px;padding:0 16px 0 4px"><oc-icon-button-v3 variant="transparent" icon="arrow-left" oc-aria-label="Zurück"></oc-icon-button-v3><div style="flex:1"><oc-search-field-v1><input type="search" placeholder="Wonach suchst du?" spellcheck="false" aria-label="Suche"></oc-search-field-v1></div></div><div style="padding:16px 16px 0"><p class="oc-copy-75" style="color:var(--oc-semantic-color-text-secondary)">Startseite</p><p class="oc-headline-200" style="margin-top:8px">Inspiration</p></div></div><div style="padding-top:24px"><div style="display:flex;overflow:hidden;padding-left:16px"><div style="flex:none;width:180px"><oc-card-v3><a href="#" aria-label="Kopfhörer"></a><div slot="content" style="display:flex;align-items:center;gap:16px;padding:16px 20px"><oc-icon-v1 type="volume-on" style="width:40px;height:40px"></oc-icon-v1><span class="oc-copy-100">Kopfhörer</span></div></oc-card-v3></div><div style="flex:none;width:16px"></div><div style="flex:none;width:180px"><oc-card-v3><a href="#" aria-label="Sneaker"></a><div slot="content" style="display:flex;align-items:center;gap:16px;padding:16px 20px"><oc-icon-v1 type="sneaker" style="width:40px;height:40px"></oc-icon-v1><span class="oc-copy-100">Sneaker</span></div></oc-card-v3></div><div style="flex:none;width:16px"></div><div style="flex:none;width:180px"><oc-card-v3><a href="#" aria-label="Shirts"></a><div slot="content" style="display:flex;align-items:center;gap:16px;padding:16px 20px"><oc-icon-v1 type="t-shirt" style="width:40px;height:40px"></oc-icon-v1><span class="oc-copy-100">Shirts</span></div></oc-card-v3></div></div><div style="padding:12px 16px 0"><oc-link-v2 icon-left="arrow-right"><a href="#">Alle Kategorien</a></oc-link-v2></div><div style="height:40px"></div><div style="display:flex;overflow:hidden;padding-left:16px;padding-bottom:4px"><div style="flex:none;width:300px"><oc-paper-card-v1><div style="display:flex;gap:12px;align-items:flex-start"><div style="flex:none;width:72px;padding:6px 0;border-radius:4px;background:var(--oc-semantic-color-background-sale);color:var(--oc-semantic-color-text-inverted);text-align:center;font:700 12px/16px OTTOSans,sans-serif">Jetzt<br><span style="font-size:20px;line-height:24px">20%</span><br>Suffix</div><div><p class="oc-copy-75" style="font-weight:700;color:var(--oc-semantic-color-text-sale)">Nur in der App</p><p class="oc-headline-100">Extra-Rabatt auf Wohnen und Möbel</p></div></div><div slot="footer" style="display:flex;align-items:center;justify-content:space-between;gap:8px"><p class="oc-copy-75">Gültig bis:<br><b>Mittwoch, 14.02.</b></p><oc-button-v1 size="50" icon-type-right="arrow-right" fit-content>Zur Aktivierung</oc-button-v1></div></oc-paper-card-v1></div><div style="flex:none;width:16px"></div><div style="flex:none;width:300px"><oc-paper-card-v1><div style="display:flex;gap:12px;align-items:flex-start"><div style="flex:none;width:72px;padding:6px 0;border-radius:4px;background:var(--oc-semantic-color-background-sale);color:var(--oc-semantic-color-text-inverted);text-align:center;font:700 12px/16px OTTOSans,sans-serif">Jetzt<br><span style="font-size:20px;line-height:24px">20%</span><br>Suffix</div><div><p class="oc-copy-75" style="font-weight:700;color:var(--oc-semantic-color-text-sale)">Nur in der App</p><p class="oc-headline-100">Extra-Rabatt auf Wohnen und Möbel</p></div></div><div slot="footer" style="display:flex;align-items:center;justify-content:space-between;gap:8px"><p class="oc-copy-75">Gültig bis:<br><b>Mittwoch, 14.02.</b></p><oc-button-v1 size="50" icon-type-right="arrow-right" fit-content>Zur Aktivierung</oc-button-v1></div></oc-paper-card-v1></div></div><div style="height:40px"></div><p class="oc-headline-200" style="padding:0 16px 16px">Empfehlungen für dich</p><div style="display:flex;overflow:hidden;padding-left:16px"><div style="flex:none;width:128px;height:150px;background:var(--oc-semantic-color-background-canvas);border-radius:16px 16px 0 0;padding:8px 8px 0;overflow:hidden"><img src="/references/images/otto/otto-fashion-drop-mojo-01.jpg" alt="" style="display:block;width:100%;height:100%;object-fit:cover;border-radius:8px 8px 0 0"></div><div style="flex:none;width:8px"></div><div style="flex:none;width:128px;height:150px;background:var(--oc-semantic-color-background-canvas);border-radius:16px 16px 0 0;padding:8px 8px 0;overflow:hidden"><img src="/references/images/otto/otto-fashion-drop-mojo-04.jpg" alt="" style="display:block;width:100%;height:100%;object-fit:cover;border-radius:8px 8px 0 0"></div><div style="flex:none;width:8px"></div><div style="flex:none;width:128px;height:150px;background:var(--oc-semantic-color-background-canvas);border-radius:16px 16px 0 0;padding:8px 8px 0;overflow:hidden"><img src="/references/images/otto/otto-fashion-drop-mojo-06.jpg" alt="" style="display:block;width:100%;height:100%;object-fit:cover;border-radius:8px 8px 0 0"></div></div></div></div></div></div>

<div class="on-frame" style="padding:32px 24px 24px;display:grid;gap:24px">
<div style="display:flex;justify-content:center"><img src="/otto-logo.svg" alt="OTTO" style="display:block;height:32px;width:auto"></div>
<div style="max-width:600px;width:100%;margin:0 auto"><div style="position:relative;background:var(--oc-semantic-color-background-canvas);padding:32px 16px 96px"><div aria-hidden="true" style="position:absolute;inset:0;padding:0 16px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:16px;pointer-events:none;z-index:2"><span style="background:rgba(255,0,102,.1)"></span><span style="background:rgba(255,0,102,.1)"></span><span style="background:rgba(255,0,102,.1)"></span><span style="background:rgba(255,0,102,.1)"></span><span style="background:rgba(255,0,102,.1)"></span><span style="background:rgba(255,0,102,.1)"></span><span style="background:rgba(255,0,102,.1)"></span><span style="background:rgba(255,0,102,.1)"></span><span style="background:rgba(255,0,102,.1)"></span><span style="background:rgba(255,0,102,.1)"></span><span style="background:rgba(255,0,102,.1)"></span><span style="background:rgba(255,0,102,.1)"></span></div>
  <div style="position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:16px">
    <div style="grid-column:3 / span 8;display:grid;gap:16px">
      <p class="oc-headline-200" style="text-align:center">Anmeldung</p>
      <p class="oc-copy-100">Willkommen zurück, <b>Chris</b>!<br>(<oc-link-v2 inline="true"><a href="#">Das bin ich nicht</a></oc-link-v2>)</p>
      <oc-auth-field-v1><input type="password" id="cfe-pw" spellcheck="false" autocomplete="current-password"><label for="cfe-pw">Passwort</label></oc-auth-field-v1>
      <div style="display:flex;align-items:center;gap:12px"><oc-checkbox-v2><label slot="label">Angemeldet bleiben</label><input type="checkbox" aria-label="oc-auto"></oc-checkbox-v2><oc-link-v2 variant="secondary"><a href="#">Was ist das?</a></oc-link-v2></div>
      <oc-link-v2><a href="#">Passwort vergessen / Probleme bei der Anmeldung</a></oc-link-v2>
      <oc-button-v1 variant="primary">Anmelden</oc-button-v1>
</div>
<div style="background:transparent;padding:0;text-align:center;color:var(--oc-semantic-color-text-secondary);font:13px/1.7 OTTOSans,sans-serif"><p><a href="#" style="color:inherit;text-decoration:none;white-space:nowrap">Cookie-Einstellungen</a> <span aria-hidden="true" style="margin:0 4px">•</span> <a href="#" style="color:inherit;text-decoration:none;white-space:nowrap">AGB</a> <span aria-hidden="true" style="margin:0 4px">•</span> <a href="#" style="color:inherit;text-decoration:none;white-space:nowrap">Datenschutz</a> <span aria-hidden="true" style="margin:0 4px">•</span> <a href="#" style="color:inherit;text-decoration:none;white-space:nowrap">Impressum</a></p><p style="font-size:10px;line-height:14px;margin-top:8px">Preisangaben inkl. gesetzl. MwSt. und zzgl. Service- und Versandkosten</p></div>

<div style="overflow:hidden;border:1px solid var(--oc-semantic-color-stroke-divider);border-radius:8px"><div style="zoom:.62;position:relative;background:var(--oc-semantic-color-background-frame);color:var(--oc-semantic-color-text-default)"><div aria-hidden="true" style="position:absolute;inset:0;padding:0 0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:4px;pointer-events:none;z-index:2"><span style="background:rgba(0,160,130,.08)"></span><span style="background:rgba(0,160,130,.08)"></span><span style="background:rgba(0,160,130,.08)"></span><span style="background:rgba(0,160,130,.08)"></span><span style="background:rgba(0,160,130,.08)"></span><span style="background:rgba(0,160,130,.08)"></span><span style="background:rgba(0,160,130,.08)"></span><span style="background:rgba(0,160,130,.08)"></span><span style="background:rgba(0,160,130,.08)"></span><span style="background:rgba(0,160,130,.08)"></span><span style="background:rgba(0,160,130,.08)"></span><span style="background:rgba(0,160,130,.08)"></span></div>
<div style="background:var(--oc-semantic-color-background-canvas);padding:24px 32px 16px;display:grid;gap:16px">
  <div style="display:flex;align-items:center;gap:32px"><img src="/otto-logo.svg" alt="OTTO" style="display:block;height:56px;width:auto"><div style="flex:1;max-width:520px"><oc-search-field-v1><input type="search" placeholder="Wonach suchst du?" spellcheck="false" aria-label="Suche"></oc-search-field-v1></div>
    <div style="margin-left:auto;display:flex;gap:20px"><span style="position:relative;display:grid;justify-items:center;gap:2px;font-size:12px;color:var(--oc-semantic-color-text-secondary)"><oc-icon-v1 type="service-info"></oc-icon-v1>Service</span><span style="position:relative;display:grid;justify-items:center;gap:2px;font-size:12px;color:var(--oc-semantic-color-text-secondary)"><oc-icon-v1 type="person"></oc-icon-v1>Mein Konto</span><span style="position:relative;display:grid;justify-items:center;gap:2px;font-size:12px;color:var(--oc-semantic-color-text-secondary)"><oc-icon-v1 type="wishlist"></oc-icon-v1>Merkzettel<oc-badge-v2 variant="primary" style="position:absolute;top:-6px;right:4px">1</oc-badge-v2></span><span style="position:relative;display:grid;justify-items:center;gap:2px;font-size:12px;color:var(--oc-semantic-color-text-secondary)"><oc-icon-v1 type="basket"></oc-icon-v1>Warenkorb<oc-badge-v2 variant="primary" style="position:absolute;top:-6px;right:4px">1</oc-badge-v2></span></div></div>
  <div style="display:grid;gap:4px;font-size:18px;color:var(--oc-semantic-color-text-secondary)"><div style="display:flex;justify-content:space-between;gap:12px"><span>Inspiration</span><span>Damen-Mode</span><span>Herren-Mode</span><span>Baby &amp; Kind</span><span>Sport</span><span>Drogerie</span></div><div style="display:flex;justify-content:space-between;gap:12px"><span>Multimedia</span><span>Haushalt</span><span>Küche</span><span>Heimtextilien</span><span>Möbel</span><span>Baumarkt</span><span>Marken</span><span>%Sale%</span></div></div>
<div style="background:var(--oc-semantic-color-background-canvas);margin-top:4px;padding:16px 32px 24px"><p class="oc-copy-100" style="color:var(--oc-semantic-color-text-secondary)">Startseite | Inspiration</p><p class="oc-headline-400" style="margin:24px 0 0 25%">Inspiration</p></div>
<div style="display:grid;grid-template-columns:3fr 9fr;gap:4px;margin-top:4px">
  <div style="background:var(--oc-semantic-color-background-canvas);padding:24px 32px"><p class="oc-headline-100" style="padding-bottom:16px;border-bottom:1px solid var(--oc-semantic-color-stroke-divider)">Weitere Inspiration</p><ul style="list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px" class="oc-copy-100"><li>Feste feiern</li><li>LIVE SHOPPING</li><li>Neuheiten</li><li>WE LOVE PRIDE</li><li>Trends für Frauen</li><li>Trends für Männer</li><li>Wohninspiration</li><li>Kinderwelten</li><li>Geschenkideen</li></ul></div>
  <div style="padding:24px 0 24px 24px;overflow:hidden">
    <div style="display:flex;gap:24px"><div style="flex:none;width:420px"><oc-paper-card-v1><div style="display:flex;gap:12px;align-items:flex-start"><div style="flex:none;width:80px;padding:8px 0;border-radius:4px;background:var(--oc-semantic-color-background-sale);color:var(--oc-semantic-color-text-inverted);text-align:center;font:700 13px/17px OTTOSans,sans-serif">Jetzt<br><span style="font-size:22px;line-height:26px">20%</span><br>Suffix</div><div><p class="oc-copy-75" style="font-weight:700;color:var(--oc-semantic-color-text-sale)">Nur in der App</p><p class="oc-headline-100">Extra-Rabatt auf Wohnen und Möbel</p></div></div><div slot="footer" style="display:flex;align-items:center;justify-content:space-between;gap:8px"><p class="oc-copy-75">Gültig bis:<br><b>Mittwoch, 14.02.</b></p><oc-button-v1 size="50" icon-type-right="arrow-right" fit-content>Zur Aktivierung</oc-button-v1></div></oc-paper-card-v1></div><div style="flex:none;width:420px"><oc-paper-card-v1><div style="display:flex;gap:12px;align-items:flex-start"><div style="flex:none;width:80px;padding:8px 0;border-radius:4px;background:var(--oc-semantic-color-background-sale);color:var(--oc-semantic-color-text-inverted);text-align:center;font:700 13px/17px OTTOSans,sans-serif">Jetzt<br><span style="font-size:22px;line-height:26px">20%</span><br>Suffix</div><div><p class="oc-copy-75" style="font-weight:700;color:var(--oc-semantic-color-text-sale)">Nur in der App</p><p class="oc-headline-100">Extra-Rabatt auf Wohnen und Möbel</p></div></div><div slot="footer" style="display:flex;align-items:center;justify-content:space-between;gap:8px"><p class="oc-copy-75">Gültig bis:<br><b>Mittwoch, 14.02.</b></p><oc-button-v1 size="50" icon-type-right="arrow-right" fit-content>Zur Aktivierung</oc-button-v1></div></oc-paper-card-v1></div></div>
    <p class="oc-headline-300" style="margin:40px 0 24px">Empfehlungen für dich</p>
    <div style="display:flex;gap:16px"><div style="flex:none;width:300px;height:340px;background:var(--oc-semantic-color-background-canvas);border-radius:24px;padding:16px;overflow:hidden"><img src="/references/images/otto/otto-fashion-drop-mojo-01.jpg" alt="" style="display:block;width:100%;height:100%;object-fit:cover;border-radius:12px"></div><div style="flex:none;width:300px;height:340px;background:var(--oc-semantic-color-background-canvas);border-radius:24px;padding:16px;overflow:hidden"><img src="/references/images/otto/otto-fashion-drop-mojo-04.jpg" alt="" style="display:block;width:100%;height:100%;object-fit:cover;border-radius:12px"></div><div style="flex:none;width:300px;height:340px;background:var(--oc-semantic-color-background-canvas);border-radius:24px;padding:16px;overflow:hidden"><img src="/references/images/otto/otto-fashion-drop-mojo-06.jpg" alt="" style="display:block;width:100%;height:100%;object-fit:cover;border-radius:12px"></div></div>
</div>