Отзывы — скриншоты с соц.сетей

HTML

<?php 
$images = get_field('отзывы_скриншоты');
if( $images ): ?>
<div class="reviews-screen">
    <div class="container">
        <div class="content-title content-title--c"><?php the_field('заголовок_блока_отзывов_скриншотов'); ?></div>
        <div class="reviews_block_screen regular">
            <?php foreach( $images as $image ): ?>
            <a class="rev--inner" href="<?php echo esc_url($image['sizes']['large']); ?>" data-rel="lightbox-reviews-1">
                <img src="<?php echo esc_url($image['sizes']['medium_large']); ?>" alt="<?php echo esc_attr($image['medium_large']); ?>" />
            </a>
            <?php endforeach; ?>
        </div>
    </div>
</div>
<?php endif; ?>

LESS

.reviews-screen{
    text-align: center;
    padding-top: 150px;
    
    @media(max-width: 724px){
        padding-top: 80px;
    }
    .rev--inner{
        display: block;
        text-decoration: none;
        height: 300px;
        overflow: hidden;
        border-radius: 10px;
        border: 1px solid #e1f0f7;
        position: relative;
        
        img{
            object-fit: cover;
            width: 100%;
            height: 100%;
            vertical-align: bottom;
        }
        &::before{
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(26, 26, 26, 0.5) url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='12' cy='12' r='10'%3e%3c/circle%3e%3cline x1='12' y1='8' x2='12' y2='16'%3e%3c/line%3e%3cline x1='8' y1='12' x2='16' y2='12'%3e%3c/line%3e%3c/svg%3e") no-repeat 50% 50%;
            backdrop-filter: blur(2px);
            -webkit-backdrop-filter: blur(2px);
            opacity: 0;
            transition: 0.5s all;
        }
        &:hover{
            &::before{
                opacity: 1;
            }
        }
    }
}

JS

(function(){
    $(document).ready(function(){
        var owl = $('.reviews_block_screen');
        owl.owlCarousel({
            loop: true,
            items: 3,
            smartSpeed: 600,
            margin: 30,
            responsiveClass: true,
            responsive: {
                0: {
                    items: 1,
                },
                600: {
                    items: 2,
                },
                1000: {
                    items: 5,
                }
            }
        });
    });
})();