.highlight-item {
    position: relative;
    clear: both;
    overflow: hidden;
    background: #f8f8f8;
}
.highlight-item::before,
.highlight-item::after {
    content: " ";
    position: absolute;
    z-index: 9;
}
.highlight-item figure {
    width: 60%;
    height: 100%;
    top: 0;
    bottom: 0;
    margin: 0;
    padding: 0;
    line-height: 0;
    position: absolute;
    z-index: 1;
}
.highlight-item figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.highlight-item .info-wrap {
    position: relative;
    z-index: 99;
    margin: 0 auto;
    width: 90%;
    max-width: 1200px;
    display: flex;
}
.highlight-item .info {
    width: 50%;
    padding: 50px;
    background: #fff;
    position: relative;
    margin: 70px 0;
    box-shadow: 0 20px 30px rgba(0, 0, 0, .05);    
}
.highlight-item  .info h2 {
    color: #006649;
}
.highlight-item  .info hr {
    border-color: #009e4d;
    border-width: 2px;
    position: relative;
    margin: 20px 0;
    width: 50%;
    overflow: visible;
}
.highlight-item  .info hr::before,
.highlight-item  .info hr::after {
    content: " ";
    width: 9px;
    height: 9px;
    border: 2px solid #009e4d;
    border-radius: 10px;
    position: absolute;
    top: -5px;
    background: #fff;
}
.highlight-item  .info hr::before {
    left: -5px;
}
.highlight-item  .info hr::after {
    right: -5px;
}

/* LEFT */
    .highlight-item.left .info-wrap {
        flex-direction: row;
    }
    .highlight-item.left figure {
        position: absolute;
        right: 0;
    }
    .highlight-item.left::before {
        background: url(../../assets/images/pattern-small.png) no-repeat bottom left;
        width: 418px;
        height: 347px;
        bottom: 0;
        right: 0;
    }
    .highlight-item.left::after {
        background: url(../../assets/images/pattern-big.png) no-repeat top right;
        width: 1041px;
        height: 594px;
        top: 0;
        left: 0;
    }
    .highlight-item.left .info-wrap .info {
        opacity: 0;
        transform: translateX(-300px);
        transition: all 0.6s ease;
    }
    .highlight-item.left.in-view .info-wrap .info {
        animation: fadeInLeft 1s ease forwards;
    }

/* RIGHT */
    .highlight-item.right .info-wrap {
        flex-direction: row-reverse;
    }
    .highlight-item.right figure {
        position: absolute;
        left: 0;
    }
    .highlight-item.right::before,
    .highlight-item.right::after {
        transform: scaleX(-1);
    }
    .highlight-item.right::before {
        background: url(../../assets/images/pattern-small.png) no-repeat bottom left;
        width: 418px;
        height: 347px;    
        bottom: 0;
        left: 0;
    }
    .highlight-item.right::after {
        background: url(../../assets/images/pattern-big.png) no-repeat top right;
        width: 1041px;
        height: 594px;
        top: 0;
        right: 0;
    }
    .highlight-item.right .info-wrap .info {
        opacity: 0;
        transform: translateX(300px);
        transition: all 1s ease;
    }
    .highlight-item.right.in-view .info-wrap .info {
        animation: fadeInRight 0.6s ease forwards;
    }

/* KEYFRAMES */
    @keyframes fadeInRight {
        from {
            opacity: 0;
            transform: translateX(300px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
    @keyframes fadeInLeft {
        from {
            opacity: 0;
            transform: translateX(-300px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

/* RESPONSIVE */
    @media all and (max-width:1000px) {
        .highlight-item .info {
            width: 65%;
        }
    }
    @media all and (max-width:900px) {
        .highlight-item .info {
            width: 75%;
        }
    }
    @media all and (max-width:800px) {
        .highlight-item .info {
            width: 100%;
        }
    }