Image gallery

<?php
/**
 * Title: Image gallery
 * Slug: image-gallery
 * Block types: core/post-content
 * Categories: featured
 */
?>
<!-- wp:group {"tagName":"section","metadata":{"name":"Image gallery"},"className":"image-gallery","layout":{"type":"constrained"}} -->
<section class="wp-block-group image-gallery"><!-- wp:group {"className":"content-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group content-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.</p>
<!-- /wp:paragraph -->

<!-- wp:group {"className":"images-grid","layout":{"type":"constrained"}} -->
<div class="wp-block-group images-grid"><!-- wp:gallery {"columns":1,"linkTo":"none"} -->
<figure class="wp-block-gallery has-nested-images columns-1 is-cropped"><!-- wp:image {"sizeSlug":"large","linkDestination":"none","className":"col-span-2"} -->
<figure class="wp-block-image size-large col-span-2"><img src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/content/content-gallery-1.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:image {"sizeSlug":"large","linkDestination":"none","className":"hidden  sm:block"} -->
<figure class="wp-block-image size-large hidden  sm:block"><img src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/content/content-gallery-2.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:image {"sizeSlug":"large","linkDestination":"none","className":"hidden sm:block"} -->
<figure class="wp-block-image size-large hidden sm:block"><img src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/content/content-gallery-3.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:image {"sizeSlug":"large","linkDestination":"none","className":"hidden sm:block"} -->
<figure class="wp-block-image size-large hidden sm:block"><img src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/content/content-gallery-4.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:image {"sizeSlug":"large","linkDestination":"none","className":"col-span-2"} -->
<figure class="wp-block-image size-large col-span-2"><img src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/content/content-gallery-5.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:image {"sizeSlug":"large","linkDestination":"none","className":"hidden sm:block"} -->
<figure class="wp-block-image size-large hidden sm:block"><img src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/content/content-gallery-6.png" alt=""/></figure>
<!-- /wp:image --></figure>
<!-- /wp:gallery --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></section>
<!-- /wp:group -->

.image-gallery {
  @apply bg-white dark:bg-gray-900;

  .content-wrapper {
    @apply py-8 px-4 mx-auto lg:px-12 sm:text-center lg:py-16;

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

    p {
      @apply font-light text-gray-500 sm:text-lg md:px-8 dark:text-gray-400
    }

    .images-grid {
      &>figure {
        @apply gap-4 mt-8 sm:grid sm:grid-cols-4 sm:mt-12;

        figure {
          @apply hidden sm:block;
          @apply !max-h-[11rem] overflow-hidden rounded-lg;

          &:nth-child(1),
          &:nth-child(5) {
            @apply block col-span-2;
          }
        }
      }
    }
  }
}