<?php
/*
 *  Query latest blog posts 
 */
$the_query = new WP_Query( array(
        'post_type' => 'post',
        'order' => 'DESC',
) );

// The Loop
if ( $the_query->have_posts() ) {

        echo '<div class="post-masonry-row">';

        echo '<div class="masonry-css">';

        while ( $the_query->have_posts() ) {

                $the_query->the_post();
                                echo '<a href="' . get_permalink() . '">';
?>
<div class="masonry-css-item">
        <article <?php post_class( array( 'callout' ) ); ?>>
<?php

                                        if ( has_post_thumbnail() ) {
                                                the_post_thumbnail( 'featured-content' );
                                        }
?>

                                <h1 class="masonry-title"><?php echo get_the_title(); ?></h1>
                                <div class="masonry-excerpt">
<?php

                                the_excerpt();
?>
                                </div>

        </article>
</div>
<?php
                                echo '</a>'; // close get_permalink hyperlink
                        // End while loop for 'event-image'
        }
                        echo '</div>';
                        echo '</div>';
}

* Post Masonry */
.post-masonry-row {
          margin: 0 auto;
          max-width: 1600px;
}
.masonry-css {
  -webkit-column-count: 1;
          column-count: 1;
  -webkit-column-gap: 1rem;
          column-gap: 1rem;
}

.masonry-css .callout {
        padding: 0;
}

.masonry-excerpt,
.masonry-title {
        margin: 0.5rem;
}

.masonry-title {
        font-size: 2rem;
        text-decoration: underline;
}

.masonry-css a {
        font-family: inter, sans-serif;
        font-size: 0.9rem;
}

.masonry-css a:hover .callout {
        border: 1px dotted #2655a0;
}

.masonry-css a:focus .callout {
        background-color: #FFFEE8;
        outline: 3px dotted #2655a0;
}

.post-masonry-row a:hover h1.masonry-title,
.post-masonry-row a:focus h1.masonry-title {
        color: #2655A0;
}

a .masonry-excerpt {
        color: #000;
}

@media screen and (min-width: 37.5em) {
  .masonry-css {
    -webkit-column-count: 2;
            column-count: 2;
  }
}

@creen and (min-width: 37.5em) {
          .masonry-css {
                      -webkit-column-count: 2;
                               edia screen and (min-width: 68.75em) {
  .masonry-css {
    -webkit-column-count: 3;
            column-count: 3;
  }
}

.masonry-css-item {
  -webkit-column-break-inside: avoid;
          break-inside: avoid;
  margin-bottom: 1rem;
}