/* Start:/local/templates/vyazanka/components/bitrix/news.list/main_page/style.css?179372891613880*/
.main_page-container {
    padding: 0 77px;
    max-width: 1920px;
    margin: 0 auto;
    position: relative;
}

.badge {
    position: absolute;
    z-index: 10;
    width: 95px;
    height: 95px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.icon-1 { bottom: 3%; left: 1%; background-image: url(/local/templates/vyazanka/components/bitrix/news.list/main_page/img/bottom-left-vector.png); }
.icon-2 { top: 1%; right: 0; background-image: url(/local/templates/vyazanka/components/bitrix/news.list/main_page/img/top-right-vector.png); }
.icon-3 { bottom: 2%; left: 56%; background-image: url(/local/templates/vyazanka/components/bitrix/news.list/main_page/img/bottom-center-vector.png); }


.main-banners {
    --banner-gap: clamp(16px, 1.46vw, 28px);
    --banner-h: clamp(460px, 36.77vw, 706px);
    display: grid;
    grid-template-columns: minmax(0, 1018fr) minmax(0, 719fr);
    grid-template-areas: 'banner-1 banner-2' 'banner-1 banner-3';
    row-gap: var(--banner-gap);
    column-gap: clamp(20px, 1.67vw, 32px);
    padding-bottom: clamp(48px, 4.2vw, 80px);
    padding-top: clamp(28px, 2.6vw, 50px);
}

.main-banners .banner-1, .main-banners .banner-2, .main-banners .banner-3 {
    position: relative;
    background-repeat: no-repeat;
    background-position: left top;
    background-size: cover;
    cursor: pointer;
}

.main-banners .banner-1:after, .main-banners .banner-2:after, .main-banners .banner-3:after  {
    position: absolute;
    content: '';
    z-index: 10;
    bottom: clamp(16px, 1.7vw, 32px);
    right: clamp(16px, 1.7vw, 32px);
    width: clamp(48px, 3.65vw, 70px);
    height: clamp(48px, 3.65vw, 70px);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.main-banners .banner-1:after,
.main-banners .banner-2::after,
.main-banners .banner-3::after {
    background-image: url(/local/templates/vyazanka/components/bitrix/news.list/main_page/img/arrow.png);
}

.main-banners .banner-2:before {
    position: absolute;
    content: '';
    bottom: 10px;
    left: clamp(16px, 1.9vw, 37px);
    width: clamp(120px, 9.8vw, 188px);
    height: clamp(102px, 8.3vw, 159px);
    z-index: 100;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.main-banners .banner-2::before {
    background-image: url(/local/templates/vyazanka/components/bitrix/news.list/main_page/img/ball.png);
}

.main-banners .banner-1 {
    grid-area: banner-1;
    height: var(--banner-h);
    border-radius: 32px;
    overflow: hidden;
    box-shadow: 0px 5px 19.8px 0px #880C0C3D, 0px -2px 19.7px 0px #880C0C26;
}

.main-banners a.banner-2 {
    display: block;
    color: inherit;
    text-decoration: none;
}

.main-banners .banner-2 {
    grid-area: banner-2;
    height: calc((var(--banner-h) - var(--banner-gap)) / 2);
    border-radius: 32px;
    overflow: hidden;
    box-shadow: 0px 5px 19.8px 0px #880C0C3D, 0px -2px 19.7px 0px #880C0C26;
}

.main-banners .banner-3 {
    grid-area: banner-3;
    height: calc((var(--banner-h) - var(--banner-gap)) / 2);
    border-radius: 32px;
    overflow: hidden;
    box-shadow: 0px 5px 19.8px 0px #880C0C3D, 0px -2px 19.7px 0px #880C0C26;
}

.main-banners .top {
    display: grid;
    grid-template-columns: 100%;
    border-radius: 32px 0 32px 0;
    background: #fff;
    transition: width 0.4s ease, grid-template-columns 0.4s ease;
    min-width: 0;
    max-width: max-content;
    position: relative;
    z-index: 2;
}

.main-banners .banner-1 .top {
    padding: 34px 26px 40px 51px;
}

.main-banners .banner-2 .top {
    padding: 31px 42px 44px 24px;
    /*background: #9BD70A;*/
    background:
            linear-gradient(rgba(0,0,0,.12) 1.4px, transparent 1.4px) 0 82px / 100px 100px,
            linear-gradient(90deg, rgba(0,0,0,.12) 1.4px, transparent 1.4px) 0 0 / 100px 100px,
            #9BD70A;
}

.main-banners .banner-3 .top {
    padding: 24px 46px 16px 24px;
    background: linear-gradient(270.14deg, #DE745A -16.59%, #F1BAB4 43.42%, #C8684A 97.19%, #F1BAB4 150.97%, #C8684A 204.74%);
}

.main-banners .banner-1 .top .top-title {
    width: clamp(220px, 19.1vw, 367px);
    height: auto;
}

.main-banners .banner-2 .top .top-title {
    width: clamp(160px, 14.8vw, 285px);
    height: auto;
}

.main-banners .banner-3 .top .top-title {
    width: clamp(160px, 14.4vw, 276px);
    height: auto;
}

.main-banners .top .top-title img {
    display: block;
    width: 100%;
    height: auto;
}

.banner-title-text {
    display: none;
}

.main-banners .top .top-descr {
    display: none;
    width: 100%;
    min-width: 0;
    height: max-content;
}

.main-banners .top:hover {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    border-radius: 32px 32px 0 0;
    width: 100%;
    max-width: 100%;
    gap: clamp(12px, 1.2vw, 20px);
}

.main-banners .top:hover .top-descr {
    display: block;
}

.main-banners .banner-2 .top:hover {
    gap: clamp(16px, 2vw, 44px);
    padding: clamp(16px, 1.6vw, 31px) clamp(16px, 2.2vw, 42px) clamp(12px, 1vw, 20px) clamp(16px, 1.25vw, 24px);
}

.main-banners .banner-3 .top:hover {
    gap: clamp(16px, 2.2vw, 47px);
    padding: clamp(16px, 1.25vw, 24px) clamp(16px, 2.4vw, 46px) clamp(12px, 1vw, 16px) clamp(16px, 1.25vw, 24px);
}

.main-banners .banner-3 .top:hover {
    background: linear-gradient(270.29deg, #DE745A -17.41%, #F1BAB4 18.9%, #C8684A 51.44%, #F1BAB4 83.99%, #C8684A 116.53%);
}

.main-banners .badge {
    position: absolute;
}

.main-banners .banner-1 .top .top-descr span{
    font-weight: 600;
    font-size: clamp(22px, 2vw, 38px);
    line-height: 100%;
    letter-spacing: 0%;
    color: #181716;
}

.main-banners .banner-2 .top .top-descr span {
    font-weight: 600;
    font-size: clamp(18px, 1.35vw, 26px);
    line-height: 100%;
    letter-spacing: 0%;
    color: #181716;
}

.main-banners .banner-3 .top .top-descr span {
    font-weight: 600;
    font-size: clamp(18px, 1.35vw, 26px);
    line-height: 100%;
    letter-spacing: 0%;
    color: #3B0000;
}

.main-banners .advantages {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: clamp(10px, 1.4vw, 32px);
    padding-top: clamp(10px, 1vw, 20px);
    padding-bottom: 0;
}

.main-banners .advantages .adv-item {
    display: flex;
    align-items: flex-start;
    flex: 1 1 0;
    flex-direction: column;
    gap: clamp(6px, 0.6vw, 10px);
    min-width: 0;
    max-width: 160px;
}

.main-banners .advantages .adv-item img {
    display: block;
    width: clamp(36px, 2.8vw, 54px);
    height: auto;
}

.main-banners .banner-1 .advantages .adv-item div {
    font-weight: 600;
    font-size: clamp(12px, 0.9vw, 17px);
    line-height: 1.1;
    color: #181716;
}

.main-banners .banner-2 .advantages .adv-item div {
    font-weight: 600;
    font-size: clamp(12px, 0.85vw, 15px);
    line-height: 1.1;
    color: #181716;
}

.main-banners .banner-3 .advantages .adv-item div {
    font-weight: 600;
    font-size: clamp(12px, 0.85vw, 15px);
    line-height: 1.1;
    color: #3B0000;
}

@media (max-width: 1919px) {
    .main_page-container {
        padding: 0 48px;
    }
}

@media (max-width: 1440px) {
    .main_page-container {
        padding: 0 40px;
    }

    .badge {
        width: 88px;
        height: 88px;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .main_page-container {
        padding: 0 24px;
    }

    .main-banners {
        grid-template-columns: 1fr;
        grid-template-areas: "banner-1" "banner-2" "banner-3";
        row-gap: 20px;
        padding-top: 24px;
        padding-bottom: 48px;
    }

    .main-banners .banner-1 {
        height: 420px;
        border-radius: 28px;
        background-position: center center;
    }

    .main-banners .banner-2,
    .main-banners .banner-3 {
        height: 300px;
        border-radius: 28px;
    }

    .main-banners .banner-2 {
        background-position: 72% center;
    }

    .main-banners .banner-3 {
        background-position: center 70%;
    }

    .main-banners .banner-1 .top,
    .main-banners .banner-2 .top,
    .main-banners .banner-3 .top {
        max-width: max-content;
    }

    .main-banners .banner-1 .top:hover,
    .main-banners .banner-2 .top:hover,
    .main-banners .banner-3 .top:hover {
        max-width: 100%;
        gap: 16px;
    }

    .main-banners .banner-2 .top:hover,
    .main-banners .banner-3 .top:hover {
        padding: 20px 24px 16px;
    }

    .main-banners .banner-1 .top .top-descr span,
    .main-banners .banner-2 .top .top-descr span,
    .main-banners .banner-3 .top .top-descr span {
        font-size: 18px;
    }

    .main-banners .advantages {
        gap: 12px;
        padding-top: 12px;
    }

    .main-banners .advantages .adv-item {
        max-width: 140px;
    }

    .main-banners .advantages .adv-item img {
        width: 40px;
    }

    .main-banners .banner-1 .advantages .adv-item div,
    .main-banners .banner-2 .advantages .adv-item div,
    .main-banners .banner-3 .advantages .adv-item div {
        font-size: 13px;
    }

    .main-banners .banner-1 .top {
        padding: 28px 28px 32px 32px;
    }

    .main-banners .banner-2 .top {
        padding: 24px 28px 28px 24px;
    }

    .main-banners .banner-3 .top {
        padding: 20px 28px 16px 24px;
    }

    .main-banners .banner-1 .top .top-title {
        width: min(300px, 42vw);
    }

    .main-banners .banner-2 .top .top-title,
    .main-banners .banner-3 .top .top-title {
        width: min(220px, 32vw);
    }

    .main-banners .banner-1:after,
    .main-banners .banner-2:after,
    .main-banners .banner-3:after {
        width: 56px;
        height: 56px;
        right: 20px;
        bottom: 20px;
    }

    .main-banners .banner-2:before {
        width: 140px;
        height: 118px;
        left: 24px;
        bottom: 8px;
    }

    .badge {
        width: 72px;
        height: 72px;
    }
}

@media (max-width: 767px) {
    .main_page-container {
        padding: 0 24px;
    }

    .main-banners {
        display: flex;
        flex-direction: column;
        gap: 15px;
        padding-top: 21px;
        padding-bottom: 28px;
    }

    .main-banners .banner-1,
    .main-banners .banner-2,
    .main-banners .banner-3 {
        height: 239px;
        min-height: 0;
        border-radius: 16px;
        overflow: hidden;
        background-color: #FF8334;
        box-shadow: 0 2.6px 10.3px rgba(136, 12, 12, 0.24), 0 -1px 10.2px rgba(136, 12, 12, 0.15);
    }

    .main-banners .banner-1 {
        background-position: center center;
    }

    .main-banners .banner-2 {
        background-position: 78% center;
    }

    .main-banners .banner-3 {
        background-position: center 72%;
    }

    .main-banners .banner-1 .top,
    .main-banners .banner-2 .top,
    .main-banners .banner-3 .top,
    .main-banners .banner-1 .top:hover,
    .main-banners .banner-2 .top:hover,
    .main-banners .banner-3 .top:hover {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        width: 64.3%;
        max-width: 234px;
        height: auto;
        padding: 16px 24px 18px;
        border-radius: 0 0 20px 0;
        grid-template-columns: none;
        position: relative;
        z-index: 2;
    }

    .main-banners .banner-1 .top,
    .main-banners .banner-1 .top:hover {
        background: #fff;
    }

    .main-banners .banner-2 .top,
    .main-banners .banner-2 .top:hover {
       /* background: #9BD70A;*/
        background:
                linear-gradient(rgba(0, 0, 0, .12) 1.4px, transparent 1.4px) 0 82px / 50px 50px,
                linear-gradient(90deg, rgba(0, 0, 0, .12) 1.4px, transparent 1.4px) 0 0 / 50px 50px, #9BD70A;
    }

    .main-banners .banner-3 .top,
    .main-banners .banner-3 .top:hover {
        background: linear-gradient(270deg, #DE745A 0%, #F1BAB4 43%, #C8684A 97%);
    }

    .main-banners .top .top-descr,
    .main-banners .top:hover .top-descr {
        display: block;
        width: 100%;
        height: auto;
    }

    .main-banners .advantages {
        display: none;
    }

    .main-banners .banner-1 .top .top-title,
    .main-banners .banner-2 .top .top-title,
    .main-banners .banner-3 .top .top-title {
        height: auto;
    }

    .main-banners .banner-1 .top .top-title {
        width: 182px;
        max-width: 100%;
    }

    .main-banners .banner-1 .banner-title-text {
        display: block;
        color: #FE7D02;
        font-size: 24px;
        font-weight: 700;
        line-height: 0.9;
    }

    .main-banners .banner-2 .top .top-title {
        width: 148px;
        max-width: 100%;
    }

    .main-banners .banner-3 .top .top-title {
        width: 143px;
        max-width: 100%;
    }

    .main-banners .top .top-title img {
        display: block;
        width: 100%;
        height: auto;
    }

    .main-banners .banner-1 .top-title img {
        display: none;
    }

    .main-banners .banner-1 .top .top-descr span,
    .main-banners .banner-2 .top .top-descr span,
    .main-banners .banner-3 .top .top-descr span {
        display: block;
        font-size: 16px;
        font-weight: 500;
        line-height: 1;
        color: #181716;
    }

    .main-banners .banner-1 .top .top-descr span {
        font-weight: 700;
    }

    .main-banners .banner-1:after,
    .main-banners .banner-2:after,
    .main-banners .banner-3:after {
        width: 34px;
        height: 34px;
        right: 10px;
        bottom: 10px;
    }

    .main-banners .banner-2:before {
        width: 118px;
        height: 118px;
        left: 16px;
        bottom: 0;
        z-index: 1;
    }

    .badge.icon-2,
    .badge.icon-3 {
        display: none;
    }

    .badge.icon-1 {
        width: 32px;
        height: 40px;
        left: 9px;
        bottom: 4px;
    }
}
/* End */
/* /local/templates/vyazanka/components/bitrix/news.list/main_page/style.css?179372891613880 */