<?php
/**
 * Title: Two Columns — Image + Numbered Details
 * Slug: absolute-2026/two-columns-image-numbered-details
 * Description: A responsive two-column section with an image and a sequence of numbered editorial details.
 * Categories: absolute-2026/sections, absolute-2026/media
 * Keywords: image, numbered, details, services
 * Viewport Width: 1280
 */
?>

<!-- wp:group {"tagName":"section","align":"wide","className":"is-style-section-divider two-columns-image-numbered-details","layout":{"type":"default"}} -->
<section class="wp-block-group alignwide is-style-section-divider two-columns-image-numbered-details">
	<!-- wp:group {"className":"two-columns-image-numbered-details__eyebrow","layout":{"type":"default"}} -->
	<div class="wp-block-group two-columns-image-numbered-details__eyebrow">
		<!-- wp:paragraph {"className":"is-style-eyebrow"} -->
		<p class="is-style-eyebrow"><?php echo esc_html_x( 'Section eyebrow', 'Sample eyebrow for the Two Columns — Image + Numbered Details pattern', 'absolute-2026' ); ?></p>
		<!-- /wp:paragraph -->
	</div>
	<!-- /wp:group -->

	<!-- wp:group {"className":"two-columns-image-numbered-details__heading","layout":{"type":"default"}} -->
	<div class="wp-block-group two-columns-image-numbered-details__heading">
		<!-- wp:heading -->
		<h2 class="wp-block-heading"><?php echo esc_html_x( 'Numbered details', 'Sample heading for the Two Columns — Image + Numbered Details pattern', 'absolute-2026' ); ?></h2>
		<!-- /wp:heading -->
	</div>
	<!-- /wp:group -->

	<!-- wp:image {"aspectRatio":"1","scale":"cover","sizeSlug":"large","linkDestination":"none","className":"is-style-framed two-columns-image-numbered-details__media"} -->
	<figure class="wp-block-image size-large is-style-framed two-columns-image-numbered-details__media"><img alt="" style="aspect-ratio:1;object-fit:cover" /></figure>
	<!-- /wp:image -->

	<!-- wp:group {"className":"two-columns-image-numbered-details__content","style":{"spacing":{"blockGap":"var:preset|spacing|100"}},"layout":{"type":"default"}} -->
	<div class="wp-block-group two-columns-image-numbered-details__content">
		<!-- wp:paragraph {"className":"two-columns-image-numbered-details__point"} -->
		<p class="two-columns-image-numbered-details__point"><span class="two-columns-image-numbered-details__point-label"><?php echo esc_html_x( '1A', 'First point label for the Two Columns — Image + Numbered Details pattern', 'absolute-2026' ); ?></span> — <strong><?php echo esc_html_x( 'A clear statement introduces the first supporting point.', 'First point heading for the Two Columns — Image + Numbered Details pattern', 'absolute-2026' ); ?></strong> <?php echo esc_html_x( 'Use the remaining copy to explain the idea and provide enough context for the reader.', 'First point copy for the Two Columns — Image + Numbered Details pattern', 'absolute-2026' ); ?></p>
		<!-- /wp:paragraph -->

		<!-- wp:paragraph {"className":"two-columns-image-numbered-details__point"} -->
		<p class="two-columns-image-numbered-details__point"><span class="two-columns-image-numbered-details__point-label"><?php echo esc_html_x( '1B', 'Second point label for the Two Columns — Image + Numbered Details pattern', 'absolute-2026' ); ?></span> — <strong><?php echo esc_html_x( 'A second statement develops the section’s central argument.', 'Second point heading for the Two Columns — Image + Numbered Details pattern', 'absolute-2026' ); ?></strong> <?php echo esc_html_x( 'Supporting detail can clarify the relationship between this point and the accompanying image.', 'Second point copy for the Two Columns — Image + Numbered Details pattern', 'absolute-2026' ); ?></p>
		<!-- /wp:paragraph -->

		<!-- wp:paragraph {"className":"two-columns-image-numbered-details__point"} -->
		<p class="two-columns-image-numbered-details__point"><span class="two-columns-image-numbered-details__point-label"><?php echo esc_html_x( '1C', 'Third point label for the Two Columns — Image + Numbered Details pattern', 'absolute-2026' ); ?></span> — <strong><?php echo esc_html_x( 'A final statement completes the sequence.', 'Third point heading for the Two Columns — Image + Numbered Details pattern', 'absolute-2026' ); ?></strong> <?php echo esc_html_x( 'Conclude with the most useful implication, outcome, or next consideration for the reader.', 'Third point copy for the Two Columns — Image + Numbered Details pattern', 'absolute-2026' ); ?></p>
		<!-- /wp:paragraph -->
	</div>
	<!-- /wp:group -->
</section>
<!-- /wp:group -->
