---interface Props { index: string; title: string;}const { index, title } = Astro.props;---<article class="feature-card lift material"> <header class="feature-head"> <span class="feature-index">{index}</span> <h3 class="feature-title">{title}</h3> </header> <div class="feature-body"> <slot /> </div></article><style> .feature-card { position: relative; background: var(--material-medium); border: 1px solid var(--material-border); border-radius: var(--radius-l); padding: clamp(20px, 2.4vw, 26px); box-shadow: var(--shadow-2); backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%); will-change: transform; } .feature-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient( to right, transparent, var(--material-edge), transparent ); border-radius: var(--radius-l) var(--radius-l) 0 0; pointer-events: none; opacity: 0.7; } .feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); border-color: var(--accent-dim); } .feature-card:active { transform: translateY(-1px) scale(0.997); } .feature-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; } .feature-index { font-family: var(--mono); font-size: 0.72rem; color: var(--accent); letter-spacing: 0.06em; flex-shrink: 0; padding: 3px 8px; border-radius: 6px; background: var(--accent-soft); border: 1px solid var(--accent-dim); } .feature-title { margin: 0; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.012em; color: var(--text); } .feature-body { color: var(--text-muted); font-size: 0.92rem; line-height: 1.6; } .feature-body :global(p) { margin: 0 0 8px; } .feature-body :global(p:last-child) { margin-bottom: 0; } .feature-body :global(ul) { margin: 0; padding-left: 1.1em; } .feature-body :global(li) { margin: 4px 0; } .feature-body :global(code) { font-size: 0.8em; color: var(--accent); background: rgba(209, 209, 214, 0.08); border-color: var(--accent-dim); }</style>