Zerif lite -grid with category items

template-category-items-grid.php

<?php
/**
 * Template Name: Страница с категориями раздела
 */
get_header();?>

<div class="clear"></div>

</header> <!-- / END HOME SECTION  -->

<?php
  zerif_after_header_trigger();
  $zerif_change_to_full_width = get_theme_mod( 'zerif_change_to_full_width' );
?>

<div id="content" class="site-content">

  <div class="container">
<?php while ( have_posts() ) : the_post(); ?>
  <?php
    $parent_thumb = '';

    if(has_post_thumbnail()) {
      $thumb_id = get_post_thumbnail_id();
      $thumb_url = wp_get_attachment_image_src($thumb_id,'thumbnail', true);
      $parent_thumb = $thumb_url[0];
    } else {
      $parent_thumb = '';
    }
  ?>
  <h1 class="sk-title">
    <?php the_title(); ?>
  </h1>
  <?php zerif_before_page_content_trigger(); ?>

  <div class="content-left-wrap col-md-12">

    <?php zerif_top_page_content_trigger(); ?>
    <div id="primary" class="content-area">

      <main itemscope itemtype="http://schema.org/WebPageElement" itemprop="mainContentOfPage" id="main" class="site-main">

        <?php

$args = array(
    'post_type'      => 'page',
    'posts_per_page' => -1,
    'post_parent'    => $post->ID,
    'order'          => 'ASC',
    'orderby'        => 'menu_order'
 );


$parent = new WP_Query( $args );

if ( $parent->have_posts() ) : ?>
    <div class="sk-grid text-center">
      <div class="row">
        <?php while ( $parent->have_posts() ) : $parent->the_post();
          $thumb = '';
          if( has_post_thumbnail() ) {
            $thumb_id = get_post_thumbnail_id();
            $thumb_url = wp_get_attachment_image_src($thumb_id,'thumbnail', true);
            $thumb = $thumb_url[0];
            // $thumb = the_post_thumbnail_url(array(128, 128));
          } else {
            $thumb = $parent_thumb;
          }
        ?>
            <section class="sk-grid__item col-md-4 col-sm-6 col-xs-12">
              <a class="sk-grid__item__header" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
                <div class="sk-grid__item__image" style="background-image: url('<?php echo $thumb; ?>');">
                </div>
                <h3 class="sk-grid__item__title">
                  <span><?php the_title(); ?></span>
                </h3>
              </a>
              
              <div class="sk-grid__item__description">
                <?php the_excerpt(); ?>
              </div>
            </section>
        <?php endwhile; ?>
      </div>
    </div>
    

<?php endif; wp_reset_query(); ?>

      </main><!-- #main -->

    </div><!-- #primary -->

  
<?php endwhile; ?>
  </div><!-- .container -->

  <style>

  .sk-title {
    text-align: center;
    display: block;
    font-weight: bold;
    color: black;
    text-transform: uppercase;
    font-size: 28pt;
    padding-top: 48px;
    padding-bottom: 5px;
  }
.sk-grid__item__image {
  display: block;
  height: 128px;
  width: 128px;
  margin: 0 auto;
  background-size: contain;
  background-position: center;
  background-color: rgb(231, 231, 231);
  transition: all 0.3s ease 0s;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -ms-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  border-radius: 100%;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
  border: 10px solid rgb(231, 231, 231);
}

h3.sk-grid__item__title span {
  text-transform: uppercase;
  font-weight: bold;
  font-size: 17px;
  color: #404040;
}

.sk-grid__item__title {
  display: inline-block;
  width: auto;
  position: relative;
  text-align: center;
  margin: 15px auto;
  padding-bottom: 12px;
  line-height: 25px;
}

.sk-grid__item__title:after {
  content: '';
  position: absolute;
  height: 2px;
  width: 75%;
  bottom:0;
  left:0;
  right:0;
  margin: auto;
  background: red;
}

.sk-grid__item__header:hover .sk-grid__item__image{
  border-color: rgb(223, 79, 69);
}

.sk-grid__item:nth-child(2n) .sk-grid__item__header:hover .sk-grid__item__image {
  border-color: rgb(50, 205, 189);
}

.sk-grid__item:nth-child(2n) .sk-grid__item__title:after {
  background: rgb(50, 205, 189);
}

.sk-grid__item:nth-child(3n) .sk-grid__item__header:hover .sk-grid__item__image {
  border-color: rgb(50, 160, 219);
}

.sk-grid__item:nth-child(3n) .sk-grid__item__title:after {
  background: rgb(50, 160, 219);
}

.sk-grid__item:nth-child(4n) .sk-grid__item__header:hover .sk-grid__item__image {
  border-color: rgb(244, 209, 79);
}

.sk-grid__item:nth-child(4n) .sk-grid__item__title:after {
  background: rgb(244, 209, 79);
}

.sk-grid__item__description {
  font-size: 14px;
  color: #808080;
  padding: 0 5px;
}

.sk-grid__item__description p {
  font-size: inherit;
  margin:0 !important;
}

.sk-grid__item {
  margin-bottom: 42px;
  height: 370px;
}

.sk-grid {
  margin-bottom: 86px;
  display: table;
  width: 100%;
}
</style>

<?php get_footer(); ?>