Social proof content

<?php
/**
 * Title: Social proof content
 * Slug: social-proof-content
 * Block types: core/post-content
 * Categories: featured
 */
?>
<!-- wp:group {"tagName":"section","metadata":{"name":"Social proof content"},"className":"social-proof-content","layout":{"type":"constrained"}} -->
<section class="wp-block-group social-proof-content"><!-- wp:group {"className":"content-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group content-wrapper"><!-- wp:heading -->
<h2 class="wp-block-heading">Home to the software teams</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Meet your developers where they already are. GitHub is home to over 40 million developers and the world’s largest open source community.</p>
<!-- /wp:paragraph -->

<!-- wp:group {"className":"description-grid","layout":{"type":"constrained"}} -->
<div class="wp-block-group description-grid"><!-- wp:group {"className":"block","layout":{"type":"constrained"}} -->
<div class="wp-block-group block"><!-- wp:paragraph -->
<p>73M+</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>developers</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"block","layout":{"type":"constrained"}} -->
<div class="wp-block-group block"><!-- wp:paragraph -->
<p>1B+</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>contributors</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"block","layout":{"type":"constrained"}} -->
<div class="wp-block-group block"><!-- wp:paragraph -->
<p>4M+</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>organizations</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></section>
<!-- /wp:group -->

.social-proof-content {
  @apply bg-white dark:bg-gray-900;

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

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

    &>p {
      @apply font-light text-gray-500 sm:text-lg sm:px-8 lg:px-16 dark:text-gray-400;
    }
    
    .description-grid {
      @apply grid grid-cols-2 gap-8 mx-auto mt-8 max-w-screen-md text-gray-900 lg:mt-14 sm:grid-cols-3 dark:text-white;

      .block {
        @apply flex flex-col justify-center items-center;

        p {
          &:first-child {
            @apply mb-2 text-4xl font-extrabold;
          }
          &:last-child {
            @apply text-xl font-normal text-gray-500 dark:text-gray-400;
          }
        }
      }
    }
  }
}