.steps-block .wrapper {
    display: flex;
    flex-direction: column;
}
.steps-block .title {
    display: flex;
    justify-content: center;
    text-align: center;
}
.steps-block .title.left-title {
    display: flex;
    justify-content: start;
    text-align: start;
}
.steps-block .steps-wrap {
    display: flex;
    gap: 30px;
}
.steps-block .step {
    display: flex;
    flex-direction: column;
    padding: 30px;
    gap: 30px;
    border-radius: 10px;
}
.steps-block.white-bg .step {
    background: var(--background-thirdly);
}
.steps-block.light-bg .step {
    background: var(--head-secondary);
}

.steps-block.light-bg .step img{
    /* filter: brightness(0) saturate(100%) invert(72%) sepia(15%) saturate(766%) hue-rotate(3deg) brightness(92%) contrast(85%); */
}

.steps-block.dark-bg .step {
    background: var(--background-fourth);
}
.steps-block .step img {
    width: 42px;
    height: 42px;
    /* filter: brightness(0) saturate(100%) invert(72%) sepia(15%) saturate(766%) hue-rotate(3deg) brightness(92%) contrast(85%); */
}
.steps-block .step .text-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.steps-block .step .text-wrap a{
    color: var(--primary);
}

.steps-block .step .text-wrap .step__desc {
    color: var(--main-text-primary);
}
.steps-block.dark-bg .step .text-wrap .step__desc {
    color: var(--main-text-secondary);
}

@media (max-width: 1480px) {
    .steps-block .steps-wrap {
        gap: 20px;
    }
}
@media (max-width: 1200px) {
    .steps-block .steps-wrap {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    .steps-block .step {
        padding: 20px;
        gap: 20px;
    }
}
@media (max-width: 512px) {
    .steps-block .steps-wrap {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .steps-block .step img {
        width: 30px;
        height: 30px;
    }
}
@media (max-width: 420px) {
    .steps-block .step {
        gap: 10px;
    }
    .steps-block .step img {
        width: 20px;
        height: 20px;
    }
}