@charset "UTF-8";
/* ***КЛЮЧЕВОЙ ФАЙЛ СТИЛЕЙ СЕКЦИИ "ТРИ ШАГА К МАСТЕРСТВУ"*** */
/*+*/

/*---ОБЩЕЕ---*/
.io-steps-section {
    background: var(--io-background-purple);
    padding: calc(var(--io-size-500)* 1.5) 0;
}

.io-steps-section__heading {
    margin-bottom: 4rem;
}

.io-steps-section__grid {
    max-width: 1024px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
}

.io-steps-section__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.io-steps-section__item:not(:last-child)::after {
    content: '';
    position: absolute;
    width: calc(100% - 50px);
    height: 1px;
    background-color: var(--io-grey-secondary);
    left: calc(50% + 20px + 25px);
    top: 25px;
}

.io-steps-section__item-number {
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: var(--io-pink-main);
    border-radius: 50%;
    color: var(--io-white-main);
    font-size: 20px;
    margin-bottom: 10px;
}

.io-steps-section__item-data {
    text-align: center;
}

.io-steps-section__item-data p {
    font-weight: 600;
    font-size: 21px;
}

.io-steps-section__item-link {
    font-size: 21px;
}

.io-steps-section__wrapper {
    max-width: 240px;
    margin: 4rem auto 0;
}

@media (max-width: 1199.5px) {
    .io-steps-section {
        padding: var(--io-size-400) 0;
    }
}

@media (max-width: 767.5px) {
    .io-steps-section__grid {
        grid-template-columns: 1fr;
        gap: 4rem;
        margin: 4rem 0;
    }

    .io-steps-section__item {
        flex-direction: row;
        gap: 1rem;
        padding: 0 2rem;
    }

    .io-steps-section__item-number {
        margin: 0;
    }

    .io-steps-section__item-data {
        text-align: start;
    }

    .io-steps-section__item:not(:last-child)::after {
        content: '';
        position: absolute;
        width: 1px;
        height: 100%;
        background-color: var(--io-grey-secondary);
        left: calc(2rem + 25px);
        top: calc(100% + 8px);
    }

    .io-steps-section__item-link button{
        text-align: start;
    }

}

.page-template-page-course .io-steps-section,
.page-template-page-demo .io-steps-section,
.page-template-page-subs .io-steps-section,
.page-template-page-gift .io-steps-section,
.page-template-page-student .io-steps-section,
.page-template-page-review .io-steps-section,
.page-template-page-trial .io-steps-section {
    margin-bottom: 0;
}