General description with team members

<?php
/**
 * Title: General description with team members
 * Slug: general-with-team-members
 * Block types: core/post-content
 * Categories: featured
 */
?>
<!-- wp:group {"metadata":{"name":"General description with team members"},"className":"general-with-team-members","layout":{"type":"constrained"}} -->
<div class="wp-block-group general-with-team-members"><!-- wp:group {"className":"content-grid","layout":{"type":"constrained"}} -->
<div class="wp-block-group content-grid"><!-- wp:group {"className":"left-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group left-wrapper"><!-- wp:heading -->
<h2 class="wp-block-heading">Our people make us great</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Working here means you’ll interact with talented professionals, will be challenged to solve difficult problems and think in new and creative ways. Along the way, you may also make some new friends, have a lot of fun and enjoy opportunities.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

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

<!-- wp:group {"className":"text-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group text-wrapper"><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Bonnie Green</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>CEO/Co-founder</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Bonnie drives the technical strategy of the themesberg platform and brand.</p>
<!-- /wp:paragraph -->

<!-- wp:social-links -->
<ul class="wp-block-social-links"><!-- wp:social-link {"url":"#","service":"facebook"} /-->

<!-- wp:social-link {"url":"#","service":"twitter"} /-->

<!-- wp:social-link {"url":"#","service":"github"} /-->

<!-- wp:social-link {"url":"#","service":"dribbble"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

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

<!-- wp:group {"className":"text-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group text-wrapper"><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Roberta Casas</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Co-founder</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Bonnie drives the technical strategy of the themesberg platform and brand.</p>
<!-- /wp:paragraph -->

<!-- wp:social-links -->
<ul class="wp-block-social-links"><!-- wp:social-link {"url":"#","service":"facebook"} /-->

<!-- wp:social-link {"url":"#","service":"twitter"} /-->

<!-- wp:social-link {"url":"#","service":"github"} /-->

<!-- wp:social-link {"url":"#","service":"dribbble"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

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

<!-- wp:group {"className":"text-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group text-wrapper"><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Bonnie Green</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Designer</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Bonnie drives the technical strategy of the themesberg platform and brand.</p>
<!-- /wp:paragraph -->

<!-- wp:social-links -->
<ul class="wp-block-social-links"><!-- wp:social-link {"url":"#","service":"facebook"} /-->

<!-- wp:social-link {"url":"#","service":"twitter"} /-->

<!-- wp:social-link {"url":"#","service":"github"} /-->

<!-- wp:social-link {"url":"#","service":"dribbble"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

.general-with-team-members {
  @apply bg-white dark:bg-gray-900;

  .content-grid {
    @apply grid gap-16 py-8 px-4 mx-auto lg:grid-cols-2 lg:py-16 lg:px-6;

    .left-wrapper {
      @apply 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-2 md:text-lg;

        &:last-of-type {
          @apply font-light md:text-lg;
        }
      }
    }

    .right-wrapper {
      @apply divide-y divide-gray-200 dark:divide-gray-700;

      .profile-card {
        @apply flex flex-col items-center pb-8 sm:flex-row;

        &:not(:first-of-type) {
          @apply pt-8;
        }

        figure {
          @apply flex-shrink-0;
          @apply mx-auto mb-4 w-36 h-36 rounded-full sm:!ml-0 sm:!mr-6 overflow-hidden;

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

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

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

          &:last-of-type {
            @apply mt-3 mb-4 max-w-sm font-light text-gray-500 dark:text-gray-400;
          }
        }

        .wp-block-social-links {
          @apply flex space-x-4 sm:mt-0;
          .wp-social-link {
            @apply !ml-0 hover:scale-100;
            @apply p-0 bg-transparent text-gray-500;

            a {
              @apply p-0;
            }

            svg {
              @apply  hover:text-gray-900 dark:hover:text-white;
              @apply lg:w-5 lg:h-5;
            }
          }
        }
      }
    }
  }
}