Horizontal card with image

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

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

<!-- wp:group {"className":"horizontal-card-with-image__content","layout":{"type":"default"}} -->
<div class="wp-block-group horizontal-card-with-image__content"><!-- wp:post-title {"level":3,"isLink":true,"className":"horizontal-card-with-image__post-title"} /-->

<!-- wp:post-excerpt {"showMoreOnNewLine":false,"excerptLength":13,"className":"horizontal-card-with-image__excerpt"} /-->

<!-- 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 -->

.horizontal-card-with-image {
  @apply bg-white dark:bg-gray-900 py-8 lg:py-24 antialiased;
}

.horizontal-card-with-image__wrapper {
  @apply px-4;
}

.horizontal-card-with-image__heading {
  @apply mb-6 lg:mb-8 text-2xl font-bold text-gray-900 dark:text-white;
}

.horizontal-card-with-image__loop {
  .wp-block-post-template {
    @apply grid gap-6 lg:gap-12 md:grid-cols-2;
    
    .wp-block-post {
      @apply flex flex-col xl:flex-row;
      
      .horizontal-card-with-image__featured-image {
        @apply mb-2 xl:mb-0 mr-5;
        
        img {
          @apply max-w-sm aspect-[296/193] object-cover rounded-lg;
        }
      }
      
      .horizontal-card-with-image__content {
        @apply flex flex-col justify-center w-full;
        
        .horizontal-card-with-image__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;
          }
        }
        
        .horizontal-card-with-image__excerpt {
          @apply mb-4;
          
          .wp-block-post-excerpt__excerpt {
            @apply text-gray-500 dark:text-gray-400 max-w-sm;
          }
        }
        
        .wlc-reading-time {
          @apply inline-flex items-center font-medium underline underline-offset-4 text-primary-600 dark:text-primary-500;
        }
      }
    }
  }
}