CSS01 · הרמת כרטיס בהובר

CSS

/* מחלקות עזר של המאגר שהרכיב הזה משתמש בהן */
.stage{padding:var(--sec, clamp(120px, 12vw, 260px)) var(--gutter, clamp(24px, 5vw, 96px));position:relative}
.stage.tight{padding-block:clamp(48px,5vw,90px)}
.stage.full{padding-inline:0}

/* CSS01 · הרמת כרטיס בהובר */
.lift-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap, clamp(16px, 1.6vw, 36px));padding-inline:var(--gutter, clamp(24px, 5vw, 96px))}
.lift{background:var(--card, #fff);border:1px solid var(--line, #e4e4ee);border-radius:var(--r, 14px);padding:26px;cursor:pointer;
transition:border-color .3s,box-shadow .3s,transform .4s cubic-bezier(.2,.6,.2,1)}
.lift:hover{transform:translateY(-5px);box-shadow:0 14px 40px rgba(22,24,43,.11);border-color:#b3a8ff}
@media(max-width:767px){.lift-row{grid-template-columns:1fr}}

HTML

<div class="stage tight"><div class="lift-row">
<div class="lift"><h3 style="margin:0 0 6px">כרטיס א</h3><p style="margin:0;color:var(--muted)">עבור עליי עם העכבר.</p></div>
<div class="lift"><h3 style="margin:0 0 6px">כרטיס ב</h3><p style="margin:0;color:var(--muted)">גם עליי.</p></div>
<div class="lift"><h3 style="margin:0 0 6px">כרטיס ג</h3><p style="margin:0;color:var(--muted)">ועליי.</p></div>
</div></div>