WordPress Block Pattern for Horizontal Card

horizontal-card.html

<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:media-text {"align":"full","mediaPosition":"right","mediaId":44,"mediaLink":"http://blockpatterns.local/patterns-playground/mackerel_beach_house_-_black__white_perspective/","linkDestination":"custom","mediaType":"image","mediaWidth":32,"verticalAlignment":"top","imageFill":true,"backgroundColor":"white","className":"is-style-twentytwentyone-border"} -->
<div class="wp-block-media-text alignfull has-media-on-the-right is-stacked-on-mobile is-vertically-aligned-top is-image-fill is-style-twentytwentyone-border has-white-background-color has-background" style="grid-template-columns:auto 32%"><figure class="wp-block-media-text__media" style="background-image:url(http://blockpatterns.local/wp-content/uploads/2021/06/Mackerel_Beach_House_-_Black__White_Perspective.jpg);background-position:50% 50%"><a href="#"><img src="http://blockpatterns.local/wp-content/uploads/2021/06/Mackerel_Beach_House_-_Black__White_Perspective.jpg" alt="" class="wp-image-44 size-full"/></a></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"style":{"typography":{"lineHeight":"0","fontSize":12}},"backgroundColor":"green","textColor":"black"} -->
<p class="has-black-color has-green-background-color has-text-color has-background" style="font-size:12px;line-height:0"><strong><em>Design</em></strong></p>
<!-- /wp:paragraph -->

<!-- wp:heading {"style":{"typography":{"lineHeight":"1"}}} -->
<h2 style="line-height:1"><strong>Metal </strong></h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"fontSize":"small"} -->
<p class="has-small-font-size">The use of metal cylindrical exteriors highlights the assimilation of industrial design into modern architecture. </p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:media-text --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:media-text {"align":"full","mediaPosition":"right","mediaId":41,"mediaLink":"http://blockpatterns.local/patterns-playground/23405637530_488a386b15_b/","linkDestination":"custom","mediaType":"image","mediaWidth":32,"verticalAlignment":"top","imageFill":true,"backgroundColor":"white","className":"is-style-twentytwentyone-border"} -->
<div class="wp-block-media-text alignfull has-media-on-the-right is-stacked-on-mobile is-vertically-aligned-top is-image-fill is-style-twentytwentyone-border has-white-background-color has-background" style="grid-template-columns:auto 32%"><figure class="wp-block-media-text__media" style="background-image:url(http://blockpatterns.local/wp-content/uploads/2021/06/23405637530_488a386b15_b.jpg);background-position:50% 50%"><a href="#"><img src="http://blockpatterns.local/wp-content/uploads/2021/06/23405637530_488a386b15_b.jpg" alt="" class="wp-image-41 size-full"/></a></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"style":{"typography":{"lineHeight":"0","fontSize":12}},"backgroundColor":"green","textColor":"black"} -->
<p class="has-black-color has-green-background-color has-text-color has-background" style="font-size:12px;line-height:0"><strong><em>Architecture</em></strong></p>
<!-- /wp:paragraph -->

<!-- wp:heading {"style":{"typography":{"lineHeight":"1"}}} -->
<h2 style="line-height:1"><strong>Wood</strong></h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"fontSize":"small"} -->
<p class="has-small-font-size">A throwback to mission style interior architecture, wooden high contrast exteriors evoke a visceral reaction in the viewer.</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:media-text --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->