.how {
    padding: var(--padding-xl) 0 var(--padding-xl) 0;
}

.how-cards {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--card-list-gap);
}

.how-cards .how-card {
    position: relative;
    text-align: center;
    background-color: var(--color-primary-blue-100);
    border-radius: var(--border-radius-m);
    padding: var(--card-padding-big);
    min-height: 220px;
}

.how-cards .how-card > .img-wrapper {
    --how-img-size: 56px;
    margin: 0 auto;
    text-align: center;
    max-width: var(--how-img-size);
    max-height: var(--how-img-size);
}

.how-cards .how-card > .img-wrapper img {
    width: 100%;
}

.how-cards .how-card > h3 {
    font-size: var(--font-big-s);
    line-height: var(--font-big-h);
    font-weight: 700;
    color: var(--color-base-black-500);
    margin-top: 16px;
    margin-bottom: 8px;
}

.how-cards .how-card > p {
    font-size: var(--font-normal-s);
    line-height: var(--font-normal-h);
    font-weight: 400;
    margin: 0;
    color: var(--color-base-black-400);
    padding: 0 25px;
}

@media (max-width: 1760px) {
    .how-cards .how-card > p {
        padding: 0;
    }
}

@media (max-width: 1279px) {
    .how-cards {
        grid-template-columns: 1fr 1fr;
    }

    .how-cards .how-card {
        padding: var(--card-padding);
        min-height: 204px;
    }

    .how-cards .how-card [data-hover-arrow="box"] {
        opacity: 1;
    }

    .how-cards .how-card > .img-wrapper  {
        --how-img-size: 48px;
    }
}

@media (max-width: 99px) {
    .how-cards .how-card {
        min-height: 228px;
    }
}

@media (max-width: 560px) {
    .how-cards {
        grid-template-columns: 1fr;
    }
}