.color {
    background: #fff;
}

.color .wrap {
    width: 1392px;
    margin: 120px auto 130px;
}

.color .wrap .title {
    font-size: 54px;
    font-family: Roboto b;
    font-weight: 500;
    color: #0D0D0D;
    text-align: center;
    margin: 0 0 107px 0;
    height: 65px;
    overflow: hidden;
}

.color .wrap .content .item {
    display: flex;
    height: 508px;
}

.color .wrap .content .item:not(:last-child) {
    margin: 0 0 50px 0;
}

.color .wrap .content .item:nth-child(2n) {
    flex-direction: row-reverse;
}

.color .wrap .content .item .background_color {
    width: 648px;
    height: 100%;
    background: #FAFAFA;
    padding: 86px 25px 25px 62px;
}

.color .wrap .content .item .background_color .headline {
    font-size: 36px;
    font-family: Roboto b;
    font-weight: 500;
    color: #0D0D0D;
    display: block;
    margin: 0 0 40px 0;
}

.color .wrap .content .item .background_color .images {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 10px;
    margin: 0 0 30px 0;
    width: fit-content;
}

.color .wrap .content .item .background_color .images img {
    width: 64px;
    height: 64px;
}

.color .wrap .content .item .background_color p {
    width: 550px;
    font-size: 16px;
    font-family: Roboto;
    font-weight: 400;
    color: #333333;
    line-height: 30px;
}

.color .wrap .content .item .picture {
    width: 744px;
    height: 100%;
    clip-path: inset(0% 100% 0% 0%);
    transition: 2s;
}

.color .wrap .content .item:nth-child(2n) .picture {
    clip-path: inset(0% 0% 0% 100%);
}

.color .wrap .content .item .picture.aos-animate {
    clip-path: inset(0% 0% 0% 0%);
}

.color .wrap .content .item .picture img {
    width: 100%;
    height: 100%;
}

@media screen and (max-width: 1900px) {
    .color .wrap{
        max-width: 90%;
    }
    .color .wrap .content .item .background_color{
        width: 46%;
    }
    .color .wrap .content .item .picture{
        width: 54%;
    }
    .color .wrap .content .item .background_color p{
        max-width: 100%;
        word-break: break-all;
    }

}

@media screen and (max-width: 1400px) {
    .color .wrap .content .item,.color .wrap .content .item .picture,.color .wrap .content .item .background_color{
        height: auto;
    }
}

@media screen and (max-width: 1280px) {
    .color .wrap .content .item .background_color .images{
        grid-template-columns: repeat(5, 1fr);
    }
}

@media screen and (max-width: 1100px) {
    .color .wrap .content .item .background_color .images{
        grid-template-columns: repeat(4, 1fr);
    }
}

@media screen and (max-width: 1023px) {
    .scrollbar_y span, .scrollbar_y p {
        transform: translate(0, 0%) !important;
    }
    .color .wrap{
        max-width: 90%;
        margin: 33px auto 50px;
    }
    .color .wrap .title{
        font-size: 28px;
        margin: 0 0 34px 0;
    }
    .color .wrap .content .item{
        flex-direction: column!important;
        height: auto;
    }
    .color .wrap .content .item .background_color,.color .wrap .content .item .picture{
        clip-path: inset(0% 0% 0% 0%) !important;
        width: 100%;
    }
    .color .wrap .content .item .background_color{
        padding: 5%;
    }
    .color .wrap .content .item .background_color .headline{
        font-size: 24px;
        margin: 0 0 29px 0;
    }
    .color .wrap .content .item .background_color .images{
        grid-template-columns: repeat(4, 1fr);
    }
    .color .wrap .content .item .background_color .images img {
        width: 100%;
        height: auto;
    }
    .color .wrap .content .item .background_color p{
        width: 100%;
        font-size: 14px;
    }
}