Новости

HTML

<div class="news" id="news">
    <div class="container">
        <div class="content-title content-title--c">Новости</div>
        <div class="news_block regular">
            <?php query_posts('posts_per_page=-1');?>
            <?php if ( have_posts() ) : ?>
            <?php while ( have_posts()) : the_post(); ?>
            <div class="news--inner">
                <a href="<?php the_permalink(); ?>" class="miniature">
                    <?php the_post_thumbnail('medium_large'); ?>
                </a>
                <div class="text">
                    <a class="title-block" href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                    <div class="entrytext">
                        <p><?php echo trim_characters(150, '...'); ?></p>
                    </div>
                    <a class="btn" href="<?php the_permalink(); ?>">Подробнее</a>
                </div>
            </div>
            <?php endwhile; ?>
            <?php endif; ?>
            <?php wp_reset_query();?>
        </div>
    </div>
</div>

LESS

.news{
    padding-top: 150px;
    padding-bottom: 150px;
    background: #fafafa;
    text-align: center;
    
    @media(max-width: 724px){
        padding-top: 40px;
        padding-bottom: 90px;
        text-align: center;
    }
}

.news--inner{
    background: #ffffff;
    border-radius: 20px;
    
    .miniature{
        height: 252px;
        text-decoration: none;
        display: block;
        position: relative;
        border-radius: 20px;
        overflow: hidden;
        
        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;
            }
        }
    }
    .title-block{
        text-decoration: none;
        color: @text;
        line-height: 30px;
        transition: 0.3s all;
        margin-bottom: 20px;
        display: block;
        
        &:hover{
            color: @color-1;
        }
    }
    .text{
        padding: 45px;
    }
    .btn{
        margin-top: 10px;
    }
}

SINGLE

<?php get_header(); ?>
    <div class="intro-page">
        <div class="container clearfix">
            <div class="content-title"><h1><?php the_title(); ?></h1></div>
        </div>
    </div>
    
    <div class="page-content">
        <div class="container">
            <?php if (have_posts()) : while (have_posts()) : the_post();?>
            <div class="entrytext">
                <?php the_content(); ?>
            </div>
            <?php endwhile; endif; ?>
        </div>
    </div>
<?php get_footer() ?>

JS

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