owl-carousel создание карусели с половиной блока по first and last chilld

Всем привет как создать такую структуру carousel ? у меня есть она карусель, все работает но вот как сделать в карусели вот эти последнии и такой же первый div карусели чтобы они были на половину, и при пролистыванию возвращался в свое нормальное состояние, да и еще и с opacity

мой код карусели css

    background-color: #ffffff;

    &-item{
        margin: 10px;
        //background-color: #26E8A8;
        font-size: 14px;
        font-weight: 300;
        position: relative;
        display: flex;
        flex-direction: column-reverse;
        //box-shadow: rgba(0, 0, 0, 0.25) 0 12px 24px;
        border-radius: 21px;
        justify-content: space-between;
        //border: 1px solid black;
        box-shadow: #e0dada 0 14px 23px;

        &:hover{
            img{
                background-size: cover;
                background-position: center;
                opacity: .2;
                transition: opacity .5s ease;

            }
            .owl-item{
                &:last-child(2n+2){
                    .carousel-services-item{
                        flex-direction: column;
                        opacity: 1;
                    }
                }
            }
            &:last-child{
                color:green;
            }
        }
        img{
            opacity: 1;
        }
    }
    .carousel-logo{
        img{

            width: 272px;
            height: auto;
            display: inline-block;
            text-align: center;
        }
        ul{
            padding: 0 !important;

            li{
                text-align: center;
                padding: 5px;
                font-family: $heading-body-font-family;
                font-size: 16px;
                color: #A0A8AF;
                span{
                    font-size: 18px;
                    display: block;
                    color: #717D87;
                }
            }
        }
    }
    &-list{
        padding: 0;
        list-style-type: none;
        margin-bottom: 25px;
            li{
                font-size: 16px;
                color: #A0A8AF;
                text-align: center;
                padding: 5px;

                span{
                    font-size: 18px;
                    display: block;
                    color: #717D87;
                }
            }


    }
    &-content{
        display: flex;
        position: relative;
        padding: 50px 19% 0px;
    }
    &-composition{
        margin: auto;
        text-align: center;
        width: 100%;

        .h6{
            //font-weight: 600;
            font-family: $heading-body-font-family;
            color: $black-color;
            font-size: 20px;
            margin-top: 5px;
            margin-bottom: 10px;


        }

    }

}

.owl-carousel{
    .owl-item{
        backface-visibility: inherit;
    }
}  ```


код html

``` <section class="s-services">
        <div class="owl-carousel carousel-services">
           
            <div class="carousel-services-item">
                    <div class="carousel-services-content">
                        <div class="carousel-services-composition">
                            <div class="carousel-logo">
                                <img src="{{url('/storage/'.$item->images)}}" alt="Sales">
                                <h6 class="h6">Coffee 2 GO CLASSIC®</h6>
                                <ul class="carousel-services-list">
                                    <li>M/066</li>
                                    <li><span>18,90 PLN</span></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                <div class="carousel-services-image"></div>
            </div>
    

        </div>

    </section>```