my_tests/assets/css/photos_components/_photos-owl.scss

$photos-main-family:'Microsoft JhengHei', Helvetica,Noto Sans TC,Roboto,Arial,sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
$photos-main-font-size:16px;
$photos-mob-main-font-size:16px;

a{
    &:hover{
        text-decoration: none;
    }
}

.mt-custom{
    margin-top: 6rem;
}

.photos-owl-wrapper{
    background-image: url(../images/section/icon/photos/owl-bg.svg);
    background-repeat:no-repeat;
    background-position: center;
    height: 300px;
}

.photos-owl-title{
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: center;
    transform: translateY(-45%);
}

.photos-owl-img-wrapper{
    overflow: hidden;
    &:hover{
        .photos-owl-img{
            transform: scale(1.2);
        }
        span{
            padding: 0 7rem;
        }
    }
}

.photos-owl-img{
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 220px;
    box-shadow: 0px 3px 6px 5px #ccc;
    transition: all 300ms ease-in-out;
    &:hover{
        cursor: pointer;
    }
}
.photos-owl-text-wrapper{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    .photos-owl-text{
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    span{
        color: #6D6D6D;
        background-color: #FFF;
        opacity: 0.8;
        font-family: $photos-main-family;
        font-size: $photos-main-font-size;
        padding: 0 1rem;
        transition: all 500ms ease-in-out;
        z-index: 30;
    }
}

.owl-nav{
    position: absolute;
    top: 15%;
    width: 100%;
    width: calc(100% + 105px);
    display:flex;
    justify-content: space-between;
    z-index: -1;
    transform: translateX(-4%);
}

button:focus{
    outline: none;
}

.item{
    &:hover{
        cursor: pointer;
    }
    &:hover span{
        text-decoration: none;
    }
}

.carousel-arrow-prev:after{
    content:'';
    position: absolute;
    left: 4px;
    width: 30px;
    height: 105px;
    background: url("../images/section/icon/photos/LEFT-1.svg") no-repeat ;
    display: inline-block;
}

.carousel-arrow-next:after{
    content:'';
    position: absolute;
    right: 4px;
    width: 30px;
    height: 105px;
    background: url("../images/section/icon/photos/RIGHT-1.svg") no-repeat ;
    display: inline-block;
}