Grid layout cards

<?php
/**
 * Title: Grid layout cards
 * Slug: grid-layout-cards
 * Block types: core/post-content
 * Categories: featured
 */
?>
<!-- wp:group {"tagName":"aside","metadata":{"name":"Publisher UI: Grid layout cards","categories":["featured"],"patternName":"wlc/publisher-grid-layout-cards"},"align":"full","className":"grid-layout-cards","layout":{"type":"constrained"}} -->
<aside class="wp-block-group alignfull grid-layout-cards"><!-- wp:group {"metadata":{"name":"Wrapper"},"className":"grid-layout-cards__wrapper","layout":{"type":"default"}} -->
<div class="wp-block-group grid-layout-cards__wrapper"><!-- wp:heading {"className":"grid-layout-cards__heading"} -->
<h2 class="wp-block-heading grid-layout-cards__heading">Read next</h2>
<!-- /wp:heading -->

<!-- wp:query {"queryId":37,"query":{"perPage":6,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false,"taxQuery":null,"parents":[],"format":[]},"className":"grid-layout-cards__loop"} -->
<div class="wp-block-query grid-layout-cards__loop"><!-- wp:post-template -->
<!-- wp:post-featured-image {"isLink":true,"className":"grid-layout-cards__featured-image"} /-->

<!-- wp:group {"className":"grid-layout-cards__content","layout":{"type":"default"}} -->
<div class="wp-block-group grid-layout-cards__content"><!-- wp:post-title {"level":3,"isLink":true,"className":"grid-layout-cards__post-title"} /-->

<!-- wp:wlc/reading-time /--></div>
<!-- /wp:group -->
<!-- /wp:post-template -->

<!-- wp:query-no-results -->
<!-- wp:paragraph {"placeholder":"Add text or blocks that will display when a query returns no results."} -->
<p>No entries</p>
<!-- /wp:paragraph -->
<!-- /wp:query-no-results --></div>
<!-- /wp:query --></div>
<!-- /wp:group --></aside>
<!-- /wp:group -->

.grid-layout-cards {
  @apply py-8 bg-white lg:py-16 dark:bg-gray-900 antialiased;
}

.grid-layout-cards__wrapper {
  @apply px-4 mx-auto;
}

.grid-layout-cards__heading {
  @apply mb-8 text-2xl font-bold text-gray-900 dark:text-white;
}

.grid-layout-cards__loop {
  .wp-block-post-template {
    @apply grid gap-8 sm:grid-cols-2 lg:grid-cols-3;
    
    .wp-block-post {
      .grid-layout-cards__featured-image {
        @apply mb-5;

        img {
          @apply w-full max-w-full rounded-lg aspect-[416/226];
        }
      }
      
      .grid-layout-cards__content {
        .grid-layout-cards__post-title {
          @apply mb-2 text-xl font-bold leading-tight text-gray-900 dark:text-white;
          
          a {
            @apply transition-colors duration-300 ease-in-out;
          }
        }
        
        .wlc-reading-time {
          @apply inline-flex items-center font-medium underline underline-offset-4 text-primary-600 dark:text-primary-500;
        }
      }
    }
  }
}