.how-works
{
    padding: 64px 0;
    background: #f5f5f5;
}

.how-works__inner.section-title
{
    margin-bottom: 0;
}

.how-works__inner h2
{
    margin-bottom: 32px;
}

.how-works__list
{
    padding: 0;
    margin: 0;
    list-style: none;

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;

    counter-reset: list-counter;
}

.how-works__list-item
{
    position: relative;
    counter-increment: list-counter;
}

.how-works__list-item:before
{
    content: counter(list-counter);
    position: absolute;
    left: 0;
    top: 0;
    color: #ffffff;
    background: #e53637;
    font-weight: bold;
    font-size: 28px;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.how-works__card-header
{
    min-height: 108px;
    margin-bottom: 16px;
}

.how-works__card-header svg,
.how-works__card-header img
{
    width: 48px;
    height: 48px;
    object-fit: contain;
    margin-bottom: 8px;
}

.how-works__card-header svg path
{
    fill: #7a7a7a;
}

.how-works__card-title
{
    font-size: 20px;
    font-weight: 600;
    color: #111;
}

.how-works__card-text
{
    font-size: 16px;
    color: #3e3e3e;
}

@media screen and (max-width: 992px)
{
    .how-works__list
    {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 540px)
{
    .how-works__list
    {
        grid-template-columns: repeat(1, 1fr);
    }
}