Mobile app download

<?php
/**
 * Title: Mobile app download
 * Slug: mobile-app-download
 * Block types: core/post-content
 * Categories: featured
 */
?>
<!-- wp:group {"tagName":"section","metadata":{"name":"Mobile app download"},"align":"full","className":"mobile-app-download","layout":{"type":"constrained"}} -->
<section class="wp-block-group alignfull mobile-app-download"><!-- wp:group {"className":"mobile-app-download__container","layout":{"type":"constrained","justifyContent":"center"}} -->
<div class="wp-block-group mobile-app-download__container"><!-- wp:columns {"className":"mobile-app-download__columns"} -->
<div class="wp-block-columns mobile-app-download__columns"><!-- wp:column {"verticalAlignment":"center","className":"mobile-app-download__content"} -->
<div class="wp-block-column is-vertically-aligned-center mobile-app-download__content"><!-- wp:heading {"className":"mobile-app-download__title"} -->
<h2 class="wp-block-heading mobile-app-download__title">Let's create more tools and ideas that brings us together.</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"mobile-app-download__description"} -->
<p class="mobile-app-download__description">Flowbite helps you connect with friends and communities of people who share your interests. Connecting with your friends and family as well as discovering new ones is easy with features like Groups.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"className":"mobile-app-download__buttons"} -->
<div class="wp-block-buttons mobile-app-download__buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button"><img class="wp-block-button__icon" src="https://upload.wikimedia.org/wikipedia/commons/f/fa/Apple_logo_black.svg" alt="Apple logo"><div class="wp-block-button__content"><div class="wp-block-button__content-primary">Download on the</div><div class="wp-block-button__content-secondary">Mac App Store</div></div></a></div>
<!-- /wp:button -->

<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button"><img class="wp-block-button__icon" src="https://upload.wikimedia.org/wikipedia/commons/d/d0/Google_Play_Arrow_logo.svg" alt="Apple logo"><div class="wp-block-button__content"><div class="wp-block-button__content-primary">Get it on</div><div class="wp-block-button__content-secondary">Google Play</div></div></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column -->

<!-- wp:column {"className":"mobile-app-download__image-column"} -->
<div class="wp-block-column mobile-app-download__image-column"><!-- wp:image {"sizeSlug":"large","metadata":{"name":"mobile-app-download__figure"}} -->
<figure class="wp-block-image size-large"><img src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/cta/iphone-mockup.png" alt=""/></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group --></section>
<!-- /wp:group -->

.mobile-app-download {
    @apply bg-white dark:bg-gray-900;
  
    .mobile-app-download__container {
      @apply gap-8 items-center py-8 px-4 mx-auto max-w-screen-xl xl:gap-16 sm:py-16 lg:px-6;
  
      .mobile-app-download__columns {
        @apply md:grid md:grid-cols-2 mb-0;
  
        .mobile-app-download__content {
            
          .mobile-app-download__title {
            @apply mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white;
          }
  
          .mobile-app-download__description {
            @apply mb-6 font-light text-gray-500 md:text-lg dark:text-gray-400;
          }
  
          .mobile-app-download__buttons {
            @apply items-center space-y-4 sm:flex sm:space-y-0 sm:space-x-4;
  
            .wp-block-button {
              @apply w-full sm:w-auto;
            }
  
            .wp-block-button__link {
              @apply w-full sm:w-auto bg-gray-800 hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-300 text-white rounded-lg inline-flex items-center justify-center px-4 py-2.5 dark:bg-gray-700 dark:hover:bg-gray-600 dark:focus:ring-gray-800;
            }
  
            .wp-block-button__icon {
              @apply mr-3 w-7 h-7;
              filter: brightness(0) invert(1);
            }
  
            .wp-block-button__content {
              @apply text-left;
            }
  
            .wp-block-button__content-primary {
              @apply mb-1 text-xs;
            }
  
            .wp-block-button__content-secondary {
              @apply -mt-1 font-sans text-sm font-semibold;
            }
          }
        }
  
        .mobile-app-download__image-column {
          @apply flex justify-center;
  
          .wp-block-image {
            @apply m-0;
          }
  
          img {
            @apply hidden mx-auto w-64 md:flex;
          }
        }
      }
    }
  }