Images with heading and description

We didn’t reinvent the wheel

We are strategists, designers and developers. Innovators and problem solvers. Small enough to be simple and quick, but big enough to deliver the scope you want at the pace you need. Small enough to be simple and quick, but big enough to deliver the scope you want at the pace you need.

We are strategists, designers and developers. Innovators and problem solvers. Small enough to be simple and quick.

<?php
/**
 * Title: Images with heading and description
 * Slug: images-with-heading-and-description
 * Block types: core/post-content
 * Categories: featured
 */
?>
<!-- wp:group {"tagName":"section","metadata":{"name":"Images with heading and description"},"className":"images-with-heading-and-description","layout":{"type":"constrained"}} -->
<section class="wp-block-group images-with-heading-and-description"><!-- wp:group {"className":"grid-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group grid-wrapper"><!-- wp:group {"className":"left-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group left-wrapper"><!-- wp:heading -->
<h2 class="wp-block-heading">We didn't reinvent the wheel</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>We are strategists, designers and developers. Innovators and problem solvers. Small enough to be simple and quick, but big enough to deliver the scope you want at the pace you need. Small enough to be simple and quick, but big enough to deliver the scope you want at the pace you need.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>We are strategists, designers and developers. Innovators and problem solvers. Small enough to be simple and quick.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

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

<!-- wp:image {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/content/office-long-1.png" alt=""/></figure>
<!-- /wp:image --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></section>
<!-- /wp:group -->

.images-with-heading-and-description {
  @apply bg-white dark:bg-gray-900;
  .grid-wrapper {
    @apply gap-16 items-center py-8 px-4 mx-auto lg:grid lg:grid-cols-2 lg:py-16 lg:px-6;

    .left-wrapper {
      @apply font-light text-gray-500 sm:text-lg dark:text-gray-400;

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

      p {
        &:not(:last-child) {
          @apply mb-4;
        }
      }

    }
    .right-wrapper {
      @apply grid grid-cols-2 gap-4 mt-8;

      .wp-block-image {

        img {
          @apply object-cover object-center h-auto w-auto aspect-[284/394] rounded-lg ;
        }

        &:nth-child(2) {
          @apply mt-4 lg:mt-10;
        }
      }
    }
  }
}