system: You are an assistant that generates WordPress patterns.

user: This is new Popular Post By Categories block to display popular post by its categories

assistant: <!-- wp:spacer {"height":"30px"} -->
<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:paragraph {"align":"center","style":{"color":{"text":"#6c757d"}},"fontSize":"large"} -->
<p class="has-text-align-center has-text-color has-large-font-size" style="color:#6c757d">Popular Post</p>
<!-- /wp:paragraph -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"25%","style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"}},"border":{"width":"0px","style":"none"}}} -->
<div class="wp-block-column" style="border-style:none;border-width:0px;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;flex-basis:25%"><!-- wp:paragraph {"align":"center","style":{"color":{"text":"#ce1213"}},"fontSize":"medium"} -->
<p class="has-text-align-center has-text-color has-medium-font-size" style="color:#ce1213"><strong>LOREM</strong></p>
<!-- /wp:paragraph -->

<!-- wp:separator {"style":{"color":{"background":"#ce1213"}}} -->
<hr class="wp-block-separator has-text-color has-alpha-channel-opacity has-background" style="background-color:#ce1213;color:#ce1213" />
<!-- /wp:separator --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"25%"} -->
<div class="wp-block-column" style="flex-basis:25%"><!-- wp:paragraph {"align":"center","style":{"color":{"text":"#393940"}},"fontSize":"medium"} -->
<p class="has-text-align-center has-text-color has-medium-font-size" style="color:#393940"><strong>LOREM</strong></p>
<!-- /wp:paragraph -->

<!-- wp:separator {"backgroundColor":"cyan-bluish-gray"} -->
<hr class="wp-block-separator has-text-color has-cyan-bluish-gray-color has-alpha-channel-opacity has-cyan-bluish-gray-background-color has-background" />
<!-- /wp:separator --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"25%"} -->
<div class="wp-block-column" style="flex-basis:25%"><!-- wp:paragraph {"align":"center","style":{"color":{"text":"#393940"}},"fontSize":"medium"} -->
<p class="has-text-align-center has-text-color has-medium-font-size" style="color:#393940"><strong>LOREM</strong></p>
<!-- /wp:paragraph -->

<!-- wp:separator {"backgroundColor":"cyan-bluish-gray"} -->
<hr class="wp-block-separator has-text-color has-cyan-bluish-gray-color has-alpha-channel-opacity has-cyan-bluish-gray-background-color has-background" />
<!-- /wp:separator --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"25%"} -->
<div class="wp-block-column" style="flex-basis:25%"><!-- wp:paragraph {"align":"center","style":{"color":{"text":"#393940"}},"fontSize":"medium"} -->
<p class="has-text-align-center has-text-color has-medium-font-size" style="color:#393940"><strong>LOREM</strong></p>
<!-- /wp:paragraph -->

<!-- wp:separator {"backgroundColor":"cyan-bluish-gray"} -->
<hr class="wp-block-separator has-text-color has-cyan-bluish-gray-color has-alpha-channel-opacity has-cyan-bluish-gray-background-color has-background" />
<!-- /wp:separator --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:paragraph {"align":"center","style":{"color":{"text":"#ce1213"}},"fontSize":"large"} -->
<p class="has-text-align-center has-text-color has-large-font-size" style="color:#ce1213"><strong>LOREM</strong></p>
<!-- /wp:paragraph -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"33.33%"} -->
<div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:image -->
<figure class="wp-block-image"><img src="https://bootstrapmade.com/demo/templates/Yummy/assets/img/menu/menu-item-1.png" alt="Lorem First Img" /></figure>
<!-- /wp:image -->

<!-- wp:paragraph {"align":"center","style":{"color":{"text":"#ce1213"}},"fontSize":"medium"} -->
<p class="has-text-align-center has-text-color has-medium-font-size" style="color:#ce1213"><strong>Lorem Titel</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"center","style":{"typography":{"fontSize":"12px"}},"textColor":"black"} -->
<p class="has-text-align-center has-black-color has-text-color" style="font-size:12px">Lorem ipsum dolor sit amet, consectetur adipiscing elit,</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"33.33%"} -->
<div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:image -->
<figure class="wp-block-image"><img src="https://bootstrapmade.com/demo/templates/Yummy/assets/img/menu/menu-item-2.png" alt="Lorem zweites Bild" /></figure>
<!-- /wp:image -->

<!-- wp:paragraph {"align":"center","style":{"color":{"text":"#ce1213"}},"fontSize":"medium"} -->
<p class="has-text-align-center has-text-color has-medium-font-size" style="color:#ce1213"><strong>Lorem Titel</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"center","style":{"typography":{"fontSize":"12px"}},"textColor":"black"} -->
<p class="has-text-align-center has-black-color has-text-color" style="font-size:12px">Lorem ipsum dolor sit amet, consectetur adipiscing elit,</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"33.34%"} -->
<div class="wp-block-column" style="flex-basis:33.34%"><!-- wp:image {"width":264,"height":264} -->
<figure class="wp-block-image is-resized"><img src="https://bootstrapmade.com/demo/templates/Yummy/assets/img/menu/menu-item-3.png" alt="Lorem Third Img" width="264" height="264" /></figure>
<!-- /wp:image -->

<!-- wp:paragraph {"align":"center","style":{"color":{"text":"#ce1213"}},"fontSize":"medium"} -->
<p class="has-text-align-center has-text-color has-medium-font-size" style="color:#ce1213"><strong>Lorem Titel</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"center","style":{"typography":{"fontSize":"12px"}},"textColor":"black"} -->
<p class="has-text-align-center has-black-color has-text-color" style="font-size:12px">Lorem ipsum dolor sit amet, consectetur adipiscing elit,</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"33.33%"} -->
<div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:image -->
<figure class="wp-block-image"><img src="https://bootstrapmade.com/demo/templates/Yummy/assets/img/menu/menu-item-1.png" alt="Lorem First Img" /></figure>
<!-- /wp:image -->

<!-- wp:paragraph {"align":"center","style":{"color":{"text":"#ce1213"}},"fontSize":"medium"} -->
<p class="has-text-align-center has-text-color has-medium-font-size" style="color:#ce1213"><strong>Lorem Titel</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"center","style":{"typography":{"fontSize":"12px"}},"textColor":"black"} -->
<p class="has-text-align-center has-black-color has-text-color" style="font-size:12px">Lorem ipsum dolor sit amet, consectetur adipiscing elit,</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"33.33%"} -->
<div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:image -->
<figure class="wp-block-image"><img src="https://bootstrapmade.com/demo/templates/Yummy/assets/img/menu/menu-item-2.png" alt="Lorem zweites Bild" /></figure>
<!-- /wp:image -->

<!-- wp:paragraph {"align":"center","style":{"color":{"text":"#ce1213"}},"fontSize":"medium"} -->
<p class="has-text-align-center has-text-color has-medium-font-size" style="color:#ce1213"><strong>Lorem Titel</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"center","style":{"typography":{"fontSize":"12px"}},"textColor":"black"} -->
<p class="has-text-align-center has-black-color has-text-color" style="font-size:12px">Lorem ipsum dolor sit amet, consectetur adipiscing elit,</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"33.34%"} -->
<div class="wp-block-column" style="flex-basis:33.34%"><!-- wp:image {"width":264,"height":264} -->
<figure class="wp-block-image is-resized"><img src="https://bootstrapmade.com/demo/templates/Yummy/assets/img/menu/menu-item-3.png" alt="Lorem Third Img" width="264" height="264" /></figure>
<!-- /wp:image -->

<!-- wp:paragraph {"align":"center","style":{"color":{"text":"#ce1213"}},"fontSize":"medium"} -->
<p class="has-text-align-center has-text-color has-medium-font-size" style="color:#ce1213"><strong>Lorem Titel</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"center","style":{"typography":{"fontSize":"12px"}},"textColor":"black"} -->
<p class="has-text-align-center has-black-color has-text-color" style="font-size:12px">Lorem ipsum dolor sit amet, consectetur adipiscing elit,</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:spacer {"height":"30px"} -->
<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->