Content card images

<?php
/**
 * Title: Content card images
 * Slug: content-card-images
 * Block types: core/post-content
 * Categories: featured
 */
?>
<!-- wp:group {"tagName":"section","metadata":{"name":"Content card images"},"className":"content-card-images","layout":{"type":"constrained"}} -->
<section class="wp-block-group content-card-images"><!-- wp:group {"className":"content-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group content-wrapper"><!-- wp:group {"className":"top-secion","layout":{"type":"constrained"}} -->
<div class="wp-block-group top-secion"><!-- wp:heading -->
<h2 class="wp-block-heading">Turn collaboration into innovation</h2>
<!-- /wp:heading -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"className":"is-style-outline","icon":"arrow-right"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button">Learn more about inner source</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"grid-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group grid-wrapper"><!-- wp:group {"className":"card-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group card-wrapper"><!-- wp:image {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/content/office-content-1.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Build as one team</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Work seamlessly across your organization on a platform designed for collaboration.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"card-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group card-wrapper"><!-- wp:image {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/content/office-content-2.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Transform your culture</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Embrace innersource, iterate faster, and ship more frequently using best tools from open source teams.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"card-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group card-wrapper"><!-- wp:image {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/content/office-content-3.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Learn as you build</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Get insight into how your team builds today with community-backed KPIs.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></section>
<!-- /wp:group -->

.content-card-images {
  @apply bg-white dark:bg-gray-900;
  .content-wrapper {
    @apply py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6;
    .top-secion {
      @apply text-center text-gray-900;

      .wp-block-heading {
        @apply mb-4 text-4xl tracking-tight font-extrabold text-gray-900 lg:text-5xl dark:text-white;
      }

      .wp-block-buttons {
        @apply inline-flex items-center;
        a {
          @apply border-0 p-0;
          @apply inline-flex items-center font-medium text-primary-600 hover:text-primary-800 dark:text-primary-500 dark:hover:text-primary-700;
        }
      }
    }

    .grid-wrapper {
      @apply grid gap-6 mt-12 lg:mt-14 lg:gap-12 md:grid-cols-3;

      .card-wrapper {
        @apply flex mb-2 md:flex-col md:mb-0;

        figure {
          @apply flex-shrink-0;
          @apply !mr-4 w-[7.75rem] md:w-auto h-auto aspect-[379/440] overflow-hidden rounded-lg;

          img {
            @apply w-full h-full object-cover;
          }
        }

        .wp-block-heading {
          @apply text-xl font-bold md:mt-4 mb-2.5 text-gray-900 dark:text-white;
        }

        p {
          @apply text-gray-500 dark:text-gray-400;
        }
      }
    }
  }
}