Carousel slider

<?php
/**
 * Title: Carousel slider
 * Slug: wlc/carousel-slider
 * Block types: core/post-content
 * Categories: featured
 */
?>
<!-- wp:group {"tagName":"section","metadata":{"name":"Carousel slider","categories":["featured"],"patternName":"wlc/carousel-slider"},"align":"full","className":"carousel-slider","layout":{"type":"constrained"}} -->
<section class="wp-block-group alignfull carousel-slider"><!-- wp:group {"className":"carousel-slider__heading","layout":{"type":"default"}} -->
<div class="wp-block-group carousel-slider__heading"><!-- wp:heading -->
<h2 class="wp-block-heading">Unwavering in our commitment to trust</h2>
<!-- /wp:heading -->

<!-- wp:buttons {"className":"carousel-slider__buttons"} -->
<div class="wp-block-buttons carousel-slider__buttons"><!-- wp:button {"className":"carousel-slider__button","icon":"chevron-right"} -->
<div class="wp-block-button carousel-slider__button"><a class="wp-block-button__link wp-element-button">Learn more about us</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"carousel-slider__slider-wrapper","layout":{"type":"default"}} -->
<div class="wp-block-group carousel-slider__slider-wrapper"><!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">Slider space</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"layout":{"type":"default"}} -->
<div class="wp-block-group"><!-- wp:group {"className":"carousel-slider__content","layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between"}} -->
<div class="wp-block-group carousel-slider__content"><!-- wp:group {"className":"carousel-slider__content-box","layout":{"type":"constrained"}} -->
<div class="wp-block-group carousel-slider__content-box"><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">73M+</h3>
<!-- /wp:heading -->

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

<!-- wp:group {"className":"carousel-slider__content-box","layout":{"type":"constrained"}} -->
<div class="wp-block-group carousel-slider__content-box"><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">100M+</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Public repositories</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"carousel-slider__content-box","layout":{"type":"constrained"}} -->
<div class="wp-block-group carousel-slider__content-box"><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">1000s</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Open source projects</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"carousel-slider__content-box","layout":{"type":"constrained"}} -->
<div class="wp-block-group carousel-slider__content-box"><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">1B+</h3>
<!-- /wp:heading -->

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

<!-- wp:group {"className":"carousel-slider__content-box","layout":{"type":"constrained"}} -->
<div class="wp-block-group carousel-slider__content-box"><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">90+</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Top Forbes companies</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"carousel-slider__content-box","layout":{"type":"constrained"}} -->
<div class="wp-block-group carousel-slider__content-box"><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">4M+</h3>
<!-- /wp:heading -->

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

.carousel-slider {
    @apply bg-white dark:bg-gray-900 lg:py-16 py-8;

    .carousel-slider__heading {
        @apply px-4 mx-auto mb-8 text-center md:mb-16 lg:px-0;
        
        .wp-block-heading {
            @apply mb-4 text-3xl tracking-tight font-extrabold text-gray-900 md:text-4xl dark:text-white;
        }

        .carousel-slider__buttons {
            @apply inline-flex justify-center items-center;

            .carousel-slider__button {

                .wp-element-button {
                    @apply text-base font-medium text-primary-600 hover:text-primary-800 dark:text-primary-500 dark:hover:text-primary-700 bg-transparent;
                }
            }
        }
    }

    .carousel-slider__slider-wrapper {
        @apply mx-auto relative px-16 sm:px-24;
    }

    .carousel-slider__content {
        @apply grid grid-cols-2 gap-8 mx-auto mt-8 text-gray-900 lg:mt-14 sm:grid-cols-3 xl:grid-cols-6 dark:text-white;
       
        .carousel-slider__content-box {
            @apply flex flex-col justify-center items-center;

            .wp-block-heading {
                @apply mb-2 text-3xl font-extrabold md:text-4xl;
            }

            p{
                @apply mb-0 font-light text-gray-500 dark:text-gray-400;
            }
       } 
    }
}