.how { margin: 30px 0; background-image: url('https://scrapride.com/images/ico/bg-dot.svg'); background-size: 16px 16px; padding: 25px 0 40px 0; background-repeat: repeat; }
.how h2 {margin-block-start: 30px;margin-block-end: 50px;}
.how .card-wrap { position: relative; display: flex; gap: 30px; justify-content: space-between; }
.how .card-wrap .card { position: relative; padding-left: 80px; display: flex; flex-direction: column; }
.how .card-wrap .card .ico { position: absolute; display: flex; justify-content: center; align-items: center; left: 5px; top: 0; width: 60px; height: 60px; border-radius: 30px; font-family: siteicons; font-size: 32px; font-style: normal; color: var(--text-opposite); }
.how .card-wrap .card.step-1 .ico { background-color: #338BE8;}
.how .card-wrap .card.step-2 .ico { background-color: #2DCD77;}
.how .card-wrap .card.step-3 .ico { background-color: #33A3E7;}
.how .card-wrap .card.step-1 .ico:before { content: '\0070'; }
.how .card-wrap .card.step-2 .ico:before { content: '\005a'; }
.how .card-wrap .card.step-3 .ico:before { content: '\0030'; }
.how .card-wrap .card .step-name { font-size: 14px; font-family: Inter; font-weight: 600; line-height: 16px; }
.how .card-wrap .card .name { font-size: 22px; font-family: Helvetica Neue, Inter; font-weight: 900; line-height: 38px; color: var(--bg-opposite); }
.how .card-wrap .card .name i { font-style: normal; }
.how .card-wrap .card.step-1 .name i { color: #338BE8; }
.how .card-wrap .card.step-2 .name i { color: #2DCD77; }
.how .card-wrap .card.step-3 .name i { color: #33A3E7; }
.how .card-wrap .card .description { position: relative; max-width: 200px; font-size: 14px; font-family: Helvetica Neue, Inter; line-height: 18px; text-align: justify; }

[theme-dark] .how {background-image: url('https://scrapride.com/images/ico/bg-dot-dark.svg');}

@media screen and (max-width: 700px) {
.how .card-wrap { flex-direction: column; }
}