Heading with description (two columns)

<?php
/**
 * Title: Heading with description (two columns)
 * Slug: heading-with-description-two-columns
 * Block types: core/post-content
 * Categories: featured
 */
?>
<!-- wp:group {"tagName":"section","metadata":{"name":"Heading with description (two columns)"},"className":"heading-with-description-two-columns","layout":{"type":"constrained"}} -->
<section class="wp-block-group heading-with-description-two-columns"><!-- wp:group {"className":"grid-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group grid-wrapper"><!-- wp:group {"className":"left-content","layout":{"type":"constrained"}} -->
<div class="wp-block-group left-content"><!-- wp:heading -->
<h2 class="wp-block-heading">Powering innovation at 200,000+ companies worldwide</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Empower Developers, IT Ops, and business teams to collaborate at high velocity. Respond to changes and deliver great customer and employee service experiences fast.</p>
<!-- /wp:paragraph -->

<!-- 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</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"right-content","layout":{"type":"constrained"}} -->
<div class="wp-block-group right-content"><!-- wp:paragraph -->
<p>Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></section>
<!-- /wp:group -->

.heading-with-description-two-columns {
  @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-content {
      @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 {
        @apply mb-4;
      }

      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;
      }
    }

    .right-content {
      @apply mt-4 font-light text-gray-500 sm:text-lg lg:mt-0 dark:text-gray-400;

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