system
You are an assistant that generates WordPress patterns.
user
Columns block with fixed position group on left and custom height content groups on right.
assistant
<!-- wp:columns {"metadata":{"name":"Fixed column content"},"align":"wide","style":{"spacing":{"blockGap":{"left":"var:preset|spacing|50"},"margin":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50"}}},"className":"alignwide"} -->
<div class="wp-block-columns alignwide" style="margin-top:var(--wp--preset--spacing--50);margin-bottom:var(--wp--preset--spacing--50)"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:group {"metadata":{"name":"Fixed content"},"style":{"spacing":{"padding":{"top":"var:preset|spacing|10","bottom":"var:preset|spacing|10","left":"var:preset|spacing|10","right":"var:preset|spacing|10"}},"dimensions":{"minHeight":""},"position":{"type":"sticky","top":"0px"}},"backgroundColor":"cyan-bluish-gray","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-cyan-bluish-gray-background-color has-background" style="padding-top:var(--wp--preset--spacing--10);padding-right:var(--wp--preset--spacing--10);padding-bottom:var(--wp--preset--spacing--10);padding-left:var(--wp--preset--spacing--10)"><!-- wp:cover {"url":"https://images.rawpixel.com/editor_1024/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvbHIvdXB3azYyMDk4NDAzLXdpa2ltZWRpYS1pbWFnZS1rb3dnemV3ZS5qcGc.jpg","dimRatio":0,"customOverlayColor":"#7c817f","isUserOverlayColor":true,"focalPoint":{"x":0.27,"y":0.56},"minHeight":50,"minHeightUnit":"vh","style":{"color":{"duotone":"var:preset|duotone|grayscale"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-cover" style="min-height:50vh"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim" style="background-color:#7c817f"></span><img class="wp-block-cover__image-background" alt="" src="https://images.rawpixel.com/editor_1024/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvbHIvdXB3azYyMDk4NDAzLXdpa2ltZWRpYS1pbWFnZS1rb3dnemV3ZS5qcGc.jpg" style="object-position:27% 56%" data-object-fit="cover" data-object-position="27% 56%" /><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Zadejte název…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size"></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:group {"metadata":{"name":"Scroll content (first)"},"style":{"dimensions":{"minHeight":"50vh"}},"layout":{"type":"flex","orientation":"vertical","verticalAlignment":"center"}} -->
<div class="wp-block-group" style="min-height:50vh"><!-- wp:heading {"fontSize":"large"} -->
<h2 class="wp-block-heading has-large-font-size">Heading one</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Content in paragraph can scroll but image in left column stays sticky.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button" href="#">CTA button</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group -->

<!-- wp:group {"metadata":{"name":"Scroll content"},"style":{"dimensions":{"minHeight":"200vh"}},"layout":{"type":"flex","orientation":"vertical","verticalAlignment":"center"}} -->
<div class="wp-block-group" style="min-height:200vh"><!-- wp:heading {"fontSize":"large"} -->
<h2 class="wp-block-heading has-large-font-size">Heading two</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Content in paragraph can scroll but image in left column stays sticky.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button" href="#">CTA button</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group -->

<!-- wp:group {"metadata":{"name":"Scroll content (last)"},"style":{"dimensions":{"minHeight":"50vh"}},"layout":{"type":"flex","orientation":"vertical","verticalAlignment":"center"}} -->
<div class="wp-block-group" style="min-height:50vh"><!-- wp:heading {"fontSize":"large"} -->
<h2 class="wp-block-heading has-large-font-size">Heading three</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Content in paragraph can scroll but image in left column stays sticky.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button" href="#">CTA button</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

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