.how-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 20px;
}

.how-card {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 16px;
    padding: 24px;
    transition: border-color .3s;
}
.how-card:hover { border-color: rgba(99,102,241,.3); }

/* крок 3 — по центру на весь ряд */
.how-card.center {
    grid-column: 1 / -1;
    max-width: 560px;
    margin: 0 auto;
    width: 100%;
}

.how-card img {
    width: 100%;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.08);
    margin-top: 14px;
    cursor: zoom-in;
}

.how-step-num {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #a855f7);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 13px; color: #fff;
    flex-shrink: 0;
    margin-bottom: 12px;
}

.how-card h5 { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.how-card p  { font-size: 13px; color: #71717a; margin: 0; line-height: 1.6; }

@media (max-width: 640px) {
    .how-grid { grid-template-columns: 1fr; }
    .how-card.center { max-width: 100%; }
}