.peppe-layout-diagram{width:100%;margin-top:var(--space-32);margin-bottom:var(--space-32);padding-bottom:var(--space-24);display:block;overflow:hidden}.peppe-layout-diagram__svg{width:100%;max-width:720px;height:auto;display:block}.peppe-layout-example{background:var(--color-surface-raised-bottom);border:1px solid var(--color-surface-divider);border-radius:var(--radius-lg);padding:var(--space-32);margin-top:var(--space-24)}.peppe-layout-example__grid{gap:var(--space-24);grid-template-columns:repeat(3,1fr);display:grid}.peppe-layout-example__card{background:linear-gradient(to bottom, var(--color-surface-raised-top), var(--color-surface-raised-bottom));border:1px solid;border-image:linear-gradient(to bottom, var(--border-raised-top), var(--border-raised-bottom)) 1;border-radius:var(--radius-lg);box-shadow:var(--shadow-raised);padding:var(--space-24);gap:var(--space-8);flex-direction:column;display:flex}@supports not (border-image:linear-gradient(to bottom, #fff, #fff) 1){.peppe-layout-example__card{border-color:var(--color-surface-divider)}}.peppe-layout-example__card-label{font-family:var(--type-family-sans);font-size:var(--type-size-xs);font-weight:var(--type-weight-medium);line-height:var(--type-leading-snug);letter-spacing:var(--type-tracking-loose);text-transform:uppercase;color:var(--color-ink-tertiary);margin:0}.peppe-layout-example__card-body{font-family:var(--type-family-sans);font-size:var(--type-size-md);font-weight:var(--type-weight-regular);line-height:var(--type-leading-normal);color:var(--color-ink-primary);margin:0}.peppe-layout-example__note{font-family:var(--type-family-sans);font-size:var(--type-size-xs);font-weight:var(--type-weight-regular);line-height:var(--type-leading-normal);color:var(--color-ink-tertiary);margin:var(--space-24) 0 0 0}@media (max-width:1024px){.peppe-layout-example__grid{grid-template-columns:repeat(2,1fr)}.peppe-layout-diagram{padding-bottom:var(--space-16)}}@media (max-width:768px){.peppe-layout-example__grid{grid-template-columns:1fr}.peppe-layout-example{padding:var(--space-24)}.peppe-layout-diagram{margin-top:var(--space-24);margin-bottom:var(--space-24);padding-bottom:var(--space-8)}}