Storefront categories grid view

<?php
/**
 * Title: Storefront categories grid view
 * Slug: wlc/storefront-categories-grid-view
 * Block types: core/post-content
 * Categories: featured
 */
?>
<!-- wp:group {"tagName":"section","metadata":{"name":"Statistics with icons and CTA","categories":["featured"],"patternName":"wlc/storefront-categories-grid-view"},"align":"full","className":"storefront-categories-grid-view","layout":{"type":"constrained"}} -->
<section class="wp-block-group alignfull storefront-categories-grid-view"><!-- wp:group {"className":"storefront-categories-grid-view__wrapper","layout":{"type":"default"}} -->
<div class="wp-block-group storefront-categories-grid-view__wrapper"><!-- wp:group {"className":"storefront-categories-grid-view__box","layout":{"type":"default"}} -->
<div class="wp-block-group storefront-categories-grid-view__box"><!-- wp:image {"lightbox":{"enabled":false},"sizeSlug":"large","linkDestination":"custom","className":"storefront-categories-grid-view__box-image storefront-categories-grid-view__box-image\u002d\u002dlight"} -->
<figure class="wp-block-image size-large storefront-categories-grid-view__box-image storefront-categories-grid-view__box-image--light"><a href="#"><img src="https://flowbite.s3.amazonaws.com/blocks/e-commerce/imac-back.svg" alt=""/></a></figure>
<!-- /wp:image -->

<!-- wp:image {"lightbox":{"enabled":false},"sizeSlug":"large","linkDestination":"custom","className":"storefront-categories-grid-view__box-image storefront-categories-grid-view__box-image\u002d\u002ddark"} -->
<figure class="wp-block-image size-large storefront-categories-grid-view__box-image storefront-categories-grid-view__box-image--dark"><a href="#"><img src="https://flowbite.s3.amazonaws.com/blocks/e-commerce/imac-back-dark.svg" alt=""/></a></figure>
<!-- /wp:image -->

<!-- wp:heading {"className":"storefront-categories-grid-view__box-heading"} -->
<h2 class="wp-block-heading storefront-categories-grid-view__box-heading"><a href="#">Enhance your study habits with iMac</a></h2>
<!-- /wp:heading --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"storefront-categories-grid-view__box","layout":{"type":"default"}} -->
<div class="wp-block-group storefront-categories-grid-view__box"><!-- wp:image {"lightbox":{"enabled":false},"sizeSlug":"large","linkDestination":"custom","className":"storefront-categories-grid-view__box-image storefront-categories-grid-view__box-image\u002d\u002dlight"} -->
<figure class="wp-block-image size-large storefront-categories-grid-view__box-image storefront-categories-grid-view__box-image--light"><a href="#"><img src="https://flowbite.s3.amazonaws.com/blocks/e-commerce/xbox-controller.svg" alt=""/></a></figure>
<!-- /wp:image -->

<!-- wp:image {"lightbox":{"enabled":false},"sizeSlug":"large","linkDestination":"custom","className":"storefront-categories-grid-view__box-image storefront-categories-grid-view__box-image\u002d\u002ddark"} -->
<figure class="wp-block-image size-large storefront-categories-grid-view__box-image storefront-categories-grid-view__box-image--dark"><a href="#"><img src="https://flowbite.s3.amazonaws.com/blocks/e-commerce/xbox-controller-dark.svg" alt=""/></a></figure>
<!-- /wp:image -->

<!-- wp:heading {"className":"storefront-categories-grid-view__box-heading"} -->
<h2 class="wp-block-heading storefront-categories-grid-view__box-heading"><a href="#"></a><a href="#">Mind-blowing savings on gaming</a></h2>
<!-- /wp:heading --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"storefront-categories-grid-view__box","layout":{"type":"default"}} -->
<div class="wp-block-group storefront-categories-grid-view__box"><!-- wp:image {"lightbox":{"enabled":false},"sizeSlug":"large","linkDestination":"custom","className":"storefront-categories-grid-view__box-image storefront-categories-grid-view__box-image\u002d\u002dlight"} -->
<figure class="wp-block-image size-large storefront-categories-grid-view__box-image storefront-categories-grid-view__box-image--light"><a href="#"><img src="https://flowbite.s3.amazonaws.com/blocks/e-commerce/imac-components.svg" alt=""/></a></figure>
<!-- /wp:image -->

<!-- wp:image {"lightbox":{"enabled":false},"sizeSlug":"large","linkDestination":"custom","className":"storefront-categories-grid-view__box-image storefront-categories-grid-view__box-image\u002d\u002ddark"} -->
<figure class="wp-block-image size-large storefront-categories-grid-view__box-image storefront-categories-grid-view__box-image--dark"><a href="#"><img src="https://flowbite.s3.amazonaws.com/blocks/e-commerce/imac-components-dark.svg" alt=""/></a></figure>
<!-- /wp:image -->

<!-- wp:heading {"className":"storefront-categories-grid-view__box-heading"} -->
<h2 class="wp-block-heading storefront-categories-grid-view__box-heading"><a href="#"></a><a href="https://flowbite.com/blocks/e-commerce/storefront-hero/#"></a><a href="#">Computer Peripherals for your upgrade</a></h2>
<!-- /wp:heading --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"storefront-categories-grid-view__box","layout":{"type":"default"}} -->
<div class="wp-block-group storefront-categories-grid-view__box"><!-- wp:image {"lightbox":{"enabled":false},"sizeSlug":"large","linkDestination":"custom","className":"storefront-categories-grid-view__box-image storefront-categories-grid-view__box-image\u002d\u002dlight"} -->
<figure class="wp-block-image size-large storefront-categories-grid-view__box-image storefront-categories-grid-view__box-image--light"><a href="#"><img src="https://flowbite.s3.amazonaws.com/blocks/e-commerce/ipad-keyboard.svg" alt=""/></a></figure>
<!-- /wp:image -->

<!-- wp:image {"lightbox":{"enabled":false},"sizeSlug":"large","linkDestination":"custom","className":"storefront-categories-grid-view__box-image storefront-categories-grid-view__box-image\u002d\u002ddark"} -->
<figure class="wp-block-image size-large storefront-categories-grid-view__box-image storefront-categories-grid-view__box-image--dark"><a href="#"><img src="https://flowbite.s3.amazonaws.com/blocks/e-commerce/ipad-keyboard-dark.svg" alt=""/></a></figure>
<!-- /wp:image -->

<!-- wp:heading {"className":"storefront-categories-grid-view__box-heading"} -->
<h2 class="wp-block-heading storefront-categories-grid-view__box-heading"><a href="#"></a><a href="https://flowbite.com/blocks/e-commerce/storefront-hero/#"></a><a href="https://flowbite.com/blocks/e-commerce/storefront-hero/#"></a><a href="#">Discover the best Echo devices</a></h2>
<!-- /wp:heading --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"storefront-categories-grid-view__box-secondary storefront-categories-grid-view__box-secondary\u002d\u002dleft","layout":{"type":"default"}} -->
<div class="wp-block-group storefront-categories-grid-view__box-secondary storefront-categories-grid-view__box-secondary--left"><!-- wp:group {"className":"storefront-categories-grid-view__box-image","layout":{"type":"default"}} -->
<div class="wp-block-group storefront-categories-grid-view__box-image"><!-- wp:image {"lightbox":{"enabled":false},"sizeSlug":"large","linkDestination":"custom","className":"storefront-categories-grid-view__box-image storefront-categories-grid-view__box-image\u002d\u002dlight"} -->
<figure class="wp-block-image size-large storefront-categories-grid-view__box-image storefront-categories-grid-view__box-image--light"><a href="#"><img src="https://flowbite.s3.amazonaws.com/blocks/e-commerce/iphone-light.svg" alt=""/></a></figure>
<!-- /wp:image -->

<!-- wp:image {"lightbox":{"enabled":false},"sizeSlug":"large","linkDestination":"custom","className":"storefront-categories-grid-view__box-image storefront-categories-grid-view__box-image\u002d\u002ddark"} -->
<figure class="wp-block-image size-large storefront-categories-grid-view__box-image storefront-categories-grid-view__box-image--dark"><a href="#"><img src="https://flowbite.s3.amazonaws.com/blocks/e-commerce/iphone-dark.svg" alt=""/></a></figure>
<!-- /wp:image --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"storefront-categories-grid-view__box-content","layout":{"type":"default"}} -->
<div class="wp-block-group storefront-categories-grid-view__box-content"><!-- wp:heading {"className":"storefront-categories-grid-view__box-heading"} -->
<h2 class="wp-block-heading storefront-categories-grid-view__box-heading"><a href="#">Trending gadgets to make it feel like home</a></h2>
<!-- /wp:heading -->

<!-- wp:buttons {"className":"storefront-categories-grid-view__box-buttons","layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-buttons storefront-categories-grid-view__box-buttons"><!-- wp:button {"className":"storefront-categories-grid-view__box-button"} -->
<div class="wp-block-button storefront-categories-grid-view__box-button"><a class="wp-block-button__link wp-element-button">See more gaming</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"storefront-categories-grid-view__box-secondary storefront-categories-grid-view__box-secondary\u002d\u002dright","layout":{"type":"default"}} -->
<div class="wp-block-group storefront-categories-grid-view__box-secondary storefront-categories-grid-view__box-secondary--right"><!-- wp:group {"className":"storefront-categories-grid-view__box-image","layout":{"type":"default"}} -->
<div class="wp-block-group storefront-categories-grid-view__box-image"><!-- wp:image {"lightbox":{"enabled":false},"sizeSlug":"large","linkDestination":"custom","className":"storefront-categories-grid-view__box-image storefront-categories-grid-view__box-image\u002d\u002dlight"} -->
<figure class="wp-block-image size-large storefront-categories-grid-view__box-image storefront-categories-grid-view__box-image--light"><a href="#"><img src="https://flowbite.s3.amazonaws.com/blocks/e-commerce/ps5-side.svg" alt=""/></a></figure>
<!-- /wp:image -->

<!-- wp:image {"lightbox":{"enabled":false},"sizeSlug":"large","linkDestination":"custom","className":"storefront-categories-grid-view__box-image storefront-categories-grid-view__box-image\u002d\u002ddark"} -->
<figure class="wp-block-image size-large storefront-categories-grid-view__box-image storefront-categories-grid-view__box-image--dark"><a href="#"><img src="https://flowbite.s3.amazonaws.com/blocks/e-commerce/ps5-side-dark.svg" alt=""/></a></figure>
<!-- /wp:image --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"storefront-categories-grid-view__box-content","layout":{"type":"default"}} -->
<div class="wp-block-group storefront-categories-grid-view__box-content"><!-- wp:heading {"className":"storefront-categories-grid-view__box-heading"} -->
<h2 class="wp-block-heading storefront-categories-grid-view__box-heading"><a href="#">Browse our Consoles range for best deals</a></h2>
<!-- /wp:heading -->

<!-- wp:buttons {"className":"storefront-categories-grid-view__box-buttons"} -->
<div class="wp-block-buttons storefront-categories-grid-view__box-buttons"><!-- wp:button {"className":"storefront-categories-grid-view__box-button"} -->
<div class="wp-block-button storefront-categories-grid-view__box-button"><a class="wp-block-button__link wp-element-button">Shop gadgets</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"storefront-categories-grid-view__box-secondary storefront-categories-grid-view__box-secondary\u002d\u002dleft","layout":{"type":"default"}} -->
<div class="wp-block-group storefront-categories-grid-view__box-secondary storefront-categories-grid-view__box-secondary--left"><!-- wp:group {"className":"storefront-categories-grid-view__box-image","layout":{"type":"default"}} -->
<div class="wp-block-group storefront-categories-grid-view__box-image"><!-- wp:image {"lightbox":{"enabled":false},"sizeSlug":"large","linkDestination":"custom","className":"storefront-categories-grid-view__box-image storefront-categories-grid-view__box-image\u002d\u002dlight"} -->
<figure class="wp-block-image size-large storefront-categories-grid-view__box-image storefront-categories-grid-view__box-image--light"><a href="#"><img src="https://flowbite.s3.amazonaws.com/blocks/e-commerce/apple-watch-light.svg" alt=""/></a></figure>
<!-- /wp:image -->

<!-- wp:image {"lightbox":{"enabled":false},"sizeSlug":"large","linkDestination":"custom","className":"storefront-categories-grid-view__box-image storefront-categories-grid-view__box-image\u002d\u002ddark"} -->
<figure class="wp-block-image size-large storefront-categories-grid-view__box-image storefront-categories-grid-view__box-image--dark"><a href="#"><img src="https://flowbite.s3.amazonaws.com/blocks/e-commerce/apple-watch-dark.svg" alt=""/></a></figure>
<!-- /wp:image --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"storefront-categories-grid-view__box-content","layout":{"type":"default"}} -->
<div class="wp-block-group storefront-categories-grid-view__box-content"><!-- wp:heading {"className":"storefront-categories-grid-view__box-heading"} -->
<h2 class="wp-block-heading storefront-categories-grid-view__box-heading"><a href="#">Watches you've never seen before</a></h2>
<!-- /wp:heading -->

<!-- wp:buttons {"className":"storefront-categories-grid-view__box-buttons"} -->
<div class="wp-block-buttons storefront-categories-grid-view__box-buttons"><!-- wp:button {"className":"storefront-categories-grid-view__box-button"} -->
<div class="wp-block-button storefront-categories-grid-view__box-button"><a class="wp-block-button__link wp-element-button">See more watches</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"storefront-categories-grid-view__box-secondary storefront-categories-grid-view__box-secondary\u002d\u002dright","layout":{"type":"default"}} -->
<div class="wp-block-group storefront-categories-grid-view__box-secondary storefront-categories-grid-view__box-secondary--right"><!-- wp:group {"className":"storefront-categories-grid-view__box-image","layout":{"type":"default"}} -->
<div class="wp-block-group storefront-categories-grid-view__box-image"><!-- wp:image {"lightbox":{"enabled":false},"sizeSlug":"large","linkDestination":"custom","className":"storefront-categories-grid-view__box-image storefront-categories-grid-view__box-image\u002d\u002dlight"} -->
<figure class="wp-block-image size-large storefront-categories-grid-view__box-image storefront-categories-grid-view__box-image--light"><a href="#"><img src="https://flowbite.s3.amazonaws.com/blocks/e-commerce/ipad-light.svg" alt=""/></a></figure>
<!-- /wp:image -->

<!-- wp:image {"lightbox":{"enabled":false},"sizeSlug":"large","linkDestination":"custom","className":"storefront-categories-grid-view__box-image storefront-categories-grid-view__box-image\u002d\u002ddark"} -->
<figure class="wp-block-image size-large storefront-categories-grid-view__box-image storefront-categories-grid-view__box-image--dark"><a href="#"><img src="https://flowbite.s3.amazonaws.com/blocks/e-commerce/ipad-dark.svg" alt=""/></a></figure>
<!-- /wp:image --></div>
<!-- /wp:group -->

<!-- wp:group {"align":"full","className":"storefront-categories-grid-view__box-content","layout":{"type":"default"}} -->
<div class="wp-block-group alignfull storefront-categories-grid-view__box-content"><!-- wp:heading {"className":"storefront-categories-grid-view__box-heading"} -->
<h2 class="wp-block-heading storefront-categories-grid-view__box-heading"><a href="#">Your guide to the top tablets on the market</a></h2>
<!-- /wp:heading -->

<!-- wp:buttons {"className":"storefront-categories-grid-view__box-buttons"} -->
<div class="wp-block-buttons storefront-categories-grid-view__box-buttons"><!-- wp:button {"className":"storefront-categories-grid-view__box-button"} -->
<div class="wp-block-button storefront-categories-grid-view__box-button"><a class="wp-block-button__link wp-element-button">See tablets deals</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></section>
<!-- /wp:group -->

.storefront-categories-grid-view {
    @apply bg-gray-50 py-8 antialiased dark:bg-gray-900 md:py-12;

    .storefront-categories-grid-view__wrapper {
        @apply mx-auto grid gap-4 px-4 md:grid-cols-2 lg:grid-cols-4;
    }

    .storefront-categories-grid-view__box {
        @apply rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-800 md:p-6 mx-0;

        .wp-block-image {
            a {
                @apply block;
            }
        }

        .storefront-categories-grid-view__box-image img{
            @apply mx-auto mb-4 h-44 dark:hidden md:mb-6;
        } 
        
        .storefront-categories-grid-view__box-image--light {
            @apply dark:hidden;
        }

        .storefront-categories-grid-view__box-image--dark {
            @apply hidden dark:block;
        }

        .storefront-categories-grid-view__box-heading {
            @apply mt-2 text-center text-xl font-bold leading-tight text-gray-900 hover:underline dark:text-white lg:mt-0 lg:text-left lg:text-2xl;
        
            a {
                @apply text-gray-900;
            }
        }
    }

    .storefront-categories-grid-view__box-secondary {
        @apply flex flex-col items-center gap-8 rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-800 md:p-6 lg:col-span-2 lg:flex-row mx-0;
        
        .wp-block-image {
            a {
                @apply block;
            }
        }

        .storefront-categories-grid-view__box-image img {
            @apply mx-auto h-56 lg:mt-0;
        } 
        
        .storefront-categories-grid-view__box-image--light {
            @apply dark:hidden;
        }

        .storefront-categories-grid-view__box-image--dark {
            @apply mt-6 hidden dark:block;
        }

        .storefront-categories-grid-view__box-heading {
            @apply text-center text-xl font-bold leading-tight text-gray-900 hover:underline dark:text-white lg:mt-0 lg:text-left lg:text-2xl;
        
            a {
                @apply text-gray-900;
            }
        }

        .storefront-categories-grid-view__box-buttons {
            @apply mt-4 inline-block;

            .storefront-categories-grid-view__box-button {
                .wp-element-button {
                    @apply rounded-lg border border-gray-200 bg-white px-5 py-2.5 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:outline-none focus:ring-4 focus:ring-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700;
                }
            }
        }
    }

    .storefront-categories-grid-view__box-secondary--right {
        .storefront-categories-grid-view__box-content {
            @apply order-2 w-full text-center lg:text-left lg:order-1;
        }

        .storefront-categories-grid-view__box-image {
            @apply order-1 w-full lg:order-2;
        }
    }

    .storefront-categories-grid-view__box-secondary--left {
        .storefront-categories-grid-view__box-content {
            @apply w-full max-md:text-center;
        }

        .storefront-categories-grid-view__box-image {
            @apply w-full text-center lg:text-left;
        }
    }
}