.section {
    padding: var(--offset-md-l)0;
    text-align: center;
}

.main {
    padding: 104px 0 var(--offset-md-2xl);
    background-position-x: 63%;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.main:before {
    content: "";
    background: linear-gradient(rgba(0, 0, 0, .16) 0%, rgba(0, 0, 0, .8) 100%);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.container {
    max-width: 500px;
    padding: 0 var(--offset-sm-l);
    margin: 0 auto;
}

.main .container {
    flex-direction: column;
    align-items: center;
    display: flex;
    position: relative;
}

.main_title {
    margin: 0 0 var(--offset-md-2xs);
    font: var(--title-h2);
    color: rgb(var(--color-white));
}

.main_desc {
    margin-bottom: var(--offset-md-l);
    font: var(--subtitle-lg-bold);
    color: rgb(var(--color-main-15));
}

.main_list {
    margin-bottom: var(--offset-md-l);
    flex-flow: column;
    justify-content: center;
    display: flex;
}

.main_item {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    color: rgb(var(--color-white));
    justify-content: space-between;
    align-items: center;
    display: flex;
}

.main_item:not(:last-of-type) {
    margin-bottom: var(--offset-sm-l);
}

.main_icon {
    width: var(--height-md-l);
    height: var(--height-md-l);
    justify-content: center;
    align-items: center;
    display: flex;
}

.main_text {
    margin-left: var(--offset-sm-l);
    font: var(--subtitle-lg-bold);
    display: inline-block;
}

@media (min-width: 768px) {
    .main {
        padding: 164px 0 var(--offset-md-l);
        background-position-x: 50%;
    }

    .container {
        max-width: 1024px;
        padding: 0 var(--offset-md-l);
    }

    .main_desc {
        margin-bottom: 96px;
    }

    .main_list {
        flex-direction: row;
        margin-bottom: 96px;
    }

    .main_item:not(:last-of-type) {
        margin: 0 var(--offset-sm-xxl) 0 0;
    }

    .main_icon {
        width: var(--height-lg-s);
        height: var(--height-lg-s);
    }
}

@media (min-width: 1024px) {
    .section {
        padding: var(--offset-lg-l) 0;
    }

    .main {
        padding: 242px 0 var(--offset-lg-l);
    }

    .container {
        max-width: 1360px;
    }

    .main_item:not(:last-of-type) {
        margin: 0 102px 0 0;
    }
}

@media (min-width: 1360px) {
    .container {
        max-width: 1500px;
        padding: 0 var(--offset-md-2xl);
    }
}