Cards with statistics

<?php
/**
 * Title: Cards with statistics
 * Slug: wlc/cards-with-statistics
 * Block types: core/post-content
 * Categories: featured
 */
?>
<!-- wp:group {"tagName":"section","metadata":{"name":"Cards with statistics","categories":["featured"],"patternName":"wlc/cards-with-statistics"},"align":"full","className":"cards-with-statistics","layout":{"type":"constrained"}} -->
<section class="wp-block-group alignfull cards-with-statistics"><!-- wp:group {"align":"full","className":"cards-with-statistics__wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull cards-with-statistics__wrapper"><!-- wp:group {"className":"cards-with-statistics__heading","layout":{"type":"constrained"}} -->
<div class="wp-block-group cards-with-statistics__heading"><!-- wp:heading -->
<h2 class="wp-block-heading">Transformation by the numbers</h2>
<!-- /wp:heading --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"cards-with-statistics__content","layout":{"type":"flex","flexWrap":"wrap","justifyContent":"stretch","orientation":"vertical"}} -->
<div class="wp-block-group cards-with-statistics__content"><!-- wp:group {"className":"cards-with-statistics__item-box","layout":{"type":"default"}} -->
<div class="wp-block-group cards-with-statistics__item-box"><!-- wp:group {"className":"cards-with-statistics__item","layout":{"type":"constrained"}} -->
<div class="wp-block-group cards-with-statistics__item"><!-- wp:paragraph -->
<p>40%</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Reduction</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>in developer onboarding time <strong>*</strong></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"cards-with-statistics__item-box","layout":{"type":"default"}} -->
<div class="wp-block-group cards-with-statistics__item-box"><!-- wp:group {"className":"cards-with-statistics__item","layout":{"type":"constrained"}} -->
<div class="wp-block-group cards-with-statistics__item"><!-- wp:paragraph -->
<p>469%</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Return on investment</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>over 3 years <strong>*</strong></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"cards-with-statistics__item-box","layout":{"type":"default"}} -->
<div class="wp-block-group cards-with-statistics__item-box"><!-- wp:group {"className":"cards-with-statistics__item","layout":{"type":"constrained"}} -->
<div class="wp-block-group cards-with-statistics__item"><!-- wp:paragraph -->
<p>60+</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Minutes saved</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>per developer, per day <strong>*</strong></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:paragraph {"className":"cards-with-statistics__footer-paragraph"} -->
<p class="cards-with-statistics__footer-paragraph"><strong>*</strong> Results based on a composite organization of 1,800 developers using GitHub over three years.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></section>
<!-- /wp:group -->

.cards-with-statistics {
    @apply bg-white dark:bg-gray-900;

    .cards-with-statistics__wrapper {
        @apply px-4 py-8 mx-auto sm:py-16 lg:px-6 xl:px-0;
        .cards-with-statistics__heading {
            @apply mx-auto mb-8 text-center md:mb-16;
            .wp-block-heading{
                @apply text-3xl tracking-tight font-extrabold text-gray-900 md:text-4xl dark:text-white;
            }
        }

        .cards-with-statistics__content{
            @apply mb-4 space-y-4 md:grid md:grid-cols-3 md:gap-4 xl:gap-16 md:space-y-0 md:mb-8;

            .cards-with-statistics__item-box{
                @apply flex justify-center items-center p-6 text-center bg-gray-100 rounded xl:p-12 dark:bg-gray-800;
            }

            .cards-with-statistics__item {
                @apply text-gray-900 dark:text-white;
                
                .wp-block-heading {
                    @apply mb-2 text-xl font-semibold;
                }
 
                p:first-of-type {
                    @apply mb-2 text-4xl font-extrabold md:text-5xl;
                }

                p:last-of-type {
                    @apply mb-0 font-light text-gray-500 dark:text-gray-400;
                    strong {
                        @apply font-medium text-primary-600 dark:text-primary-500;
                    }
                }
            }
        }

        .cards-with-statistics__footer-paragraph {
            @apply mb-0 text-sm font-light text-center text-gray-500 dark:text-gray-400;
            strong {
                @apply font-medium text-primary-600 dark:text-primary-500;
            }
        }
    }

}