.home-bg {
    position: relative;
    width: 100%;
    height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .home-bg .item {
        position: relative;
        width: 50%;
        height: 100%;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .home-bg .item img {
            transition: all ease .3s;
        }

        .home-bg .item::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: black;
            opacity: .3;
            transition: all linear .2s;
            z-index: 2;
        }


        .home-bg .item.active img {
            transform: scale(1.04);
        }

        .home-bg .item.active::before {
            opacity: 0;
        }

    .home-bg .grid.wide {
        position: absolute;
        pointer-events: none;
    }

    .home-bg .container {
        position: relative;
        z-index: 4;
        display: flex;
    }

        .home-bg .container .items {
            width: 50%;
            position: relative;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

            .home-bg .container .items .top-title {
                color: #fff;
                text-transform: uppercase;
                line-height: calc(100% + 7px);
                font-family: openB;
                font-size: 22px;
                transition: all linear .2s;
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
                display: -webkit-box;
            }

            .home-bg .container .items.active .top-title {
                opacity: 0;
            }

            .home-bg .container .items .content {
                position: absolute;
                right: 0;
                width: 0;
                height: 60%;
                background-color: #021f4f61;
                transition: all linear .3s;
                display: flex;
                align-items: center;
                justify-content: center;
                opacity: 0;
            }

            .home-bg .container .items.active .content {
                width: 80%;
                opacity: 1;
            }

            .home-bg .container .items:last-child .content {
                left: 0;
            }

            .home-bg .container .items .wrap {
                position: relative;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                padding: 0 20px;
            }



                .home-bg .container .items .wrap::before {
                    content: '';
                    position: absolute;
                    width: 6px;
                    left: 0;
                    height: calc(100% + 20px);
                    background-color: #022155;
                }

            .home-bg .container .items:last-child .wrap::before {
                left: unset;
                right: 0;
            }

            .home-bg .container .items .content h3 {
                color: #2a2f35;
                font-family: openB;
                font-size: 21px;
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
                display: -webkit-box;
                margin-bottom: 7px !important;
                opacity: 0;
                transform: translateY(15px);
                margin-top: 0;
            }

            .home-bg .container .items .content span {
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                display: -webkit-box;
                opacity: 0;
                color: #fff;
                transform: translateY(15px);
                font-size: 17px;
            }

            .home-bg .container .items.active .content h3 {
                color: #ffffff;
                opacity: 1;
                transform: translateY(0);
                margin: 15px 0;
                transition: all linear .3s;
                transition-delay: .3s;
                margin-top: 0;
            }

            .home-bg .container .items.active .content span {
                opacity: 1;
                transform: translateY(0);
                transition: all linear .3s;
                transition-delay: .3s;
                text-align: center;
            }