body {
    --recycling: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='132' height='123' viewBox='0 0 132 123' fill='none'><path d='M51.476 42.1714L65.4436 20.6464L56.1842 6.29643C54.9287 4.34405 53.1249 3.36786 50.7729 3.36786C48.4209 3.36786 46.6151 4.34405 45.3554 6.29643L29.9754 30.1643L51.476 42.1714ZM112.211 82L98.2438 60.3286L120.058 48.6143L130.102 64.2822C131.253 65.9417 131.881 67.7964 131.986 69.8464C132.09 71.8964 131.62 73.8 130.573 75.5571C129.527 77.5095 127.985 79.0714 125.947 80.2429C123.909 81.4143 121.684 82 119.274 82H112.211ZM94.1634 123L69.0532 99.5714L94.1634 76.1429V87.8571H123.982L114.879 104.843C113.728 106.795 112.159 108.357 110.171 109.529C108.183 110.7 105.986 111.286 103.58 111.286H94.1634V123ZM33.428 111.286C31.3355 111.286 29.425 110.774 27.6966 109.751C25.9682 108.728 24.6876 107.385 23.8547 105.721C23.0177 104.16 22.6264 102.525 22.6808 100.819C22.7352 99.1126 23.2312 97.5253 24.1686 96.0571L29.5045 87.8571H56.4981V111.286H33.428ZM17.8911 94.5928L7.69001 75.5571C6.74838 73.8 6.30267 71.9218 6.35289 69.9226C6.40311 67.9233 7.00576 66.0432 8.16083 64.2822L10.6719 60.3286L0 54.325L34.3697 46.2714L43.0013 78.4857L32.1725 72.3357L17.8911 94.5928ZM102.638 44.5143L68.2685 36.4607L79.0973 30.4571L59.4799 0H81.6083C83.8055 0 85.8729 0.513476 87.8105 1.54043C89.7482 2.56738 91.2904 3.95748 92.4371 5.71071L100.598 18.45L111.27 12.3L102.638 44.5143Z' fill='%2393C01F'/></svg>");
    --point-img: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15' fill='none'><circle cx='7.5' cy='7.5' r='7.5' fill='%2393C01F'/></svg>");
    --prime-color: #93C01F;
    --dark-list-bg: var(--recycling);
}

#advantages {
    padding: 32px 20px;
    font-size: 16px;
    background: #ffffff00 var(--recycling) no-repeat top right;
    background-position-y: 78px;
    background-position-x: 98%;
    background-size: 132px 123px;
}


#solution {
    padding: 0 20px 32px;
}

#solution h4 {
    font-weight: 300;
    font-size: 20px;
    margin-bottom: 16px;
}

#solution .ums {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#solution .ums h4 {
    font-size: 24px;
}


#solution .ums h5 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 0;
}


#info {
    padding: 40px 20px 28px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

#info .expandable h2 {
    margin: 0;
}

#info .expandable.open .expander{
    margin-bottom: 16px;
}

#info li {
    font-size: 20px;
    margin-bottom: 24px;
}

#info li p {
    font-size: 16px;
    font-weight: 300;
    margin: 12px 0 24px;
}

#info .img {
    height: 180px;
    width: 100vw;
    margin-left: -20px;
    background-image: url("/img/um1-small.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

#info .img.um2 {
    background-image: url("/img/um2-small.png");
}

#info .differences > header {
    display: none;
}

#info .differences > article > header {
    /*width: 100vw;*/
    /*margin-left: -20px;*/
    /*background: #434343;*/
    padding: 12px;
    font-weight: bold;
    font-size: 20px;
    text-align: center;
    box-sizing: border-box;
}

#info .differences > article > div {
    display: flex;
    flex-direction: row;
    gap: 16px;
    margin: 12px 0;
}

#info .differences > article h3 {
    min-width: 50px;
    margin: 0;
}

img {
    max-width: 100vw;
}


@media screen and (min-width: 1024px) {


    #advantages {
        background: none;
        padding: 80px 72px;
    }

    #solution {
        padding: 0 72px 80px;
    }

    #solution > h2 {
        max-width: 880px;
    }

    #solution h4 {
        margin: 40px 0;
        max-width: 880px;
        font-weight: 300;
        font-size: 24px;
    }

    #solution .ums {
        flex-direction: row;
        align-items: flex-end;
    }

    #solution .ums img {
        width: 250px;
    }

    #solution .ums h4 {
        margin: 0 0 40px;
    }

    #solution .ums h5 {
        font-weight: normal;
        font-size: 20px;
    }

    #solution .ums img.bigger {
        width: 346px;
    }

    #info {
        padding: 40px 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #info > .expandable {
        margin: 40px 0;
        width: 960px;
        justify-content: space-between;
    }

    #info h2 {
        max-width: 760px;
    }

    #info .img {
        height: 172px;
        width: 100%;
        margin: 0;
        background-image: url("/img/um1.png");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
    }

    #info .img.um2 {
        background-image: url("/img/um2.png");
    }

    #info .differences > header, #info .differences > article {
        display: table-row;
    }

    #info .differences > header > div,
    #info .differences > article > div,
    #info .differences > article > header {
        display: table-cell;
        border: 1px solid #434343;
        padding: 12px;
    }

    #info .differences header {
        font-weight: bold;
        text-align: center;
    }
    #info .differences > header > div {
        padding: 10px;
    }

    #info .differences > header {
        background: #434343;
    }

    #info .differences h3 {
        display: none;
    }

}