<?php
/**
 * Title: Features
 * Slug: wecodeart/section-features
 * Categories: wecodeart, featured
 */
?>
<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|xxl","bottom":"var:preset|spacing|g","right":"var:preset|spacing|g","left":"var:preset|spacing|g"},"margin":{"top":"var:preset|spacing|xxl","bottom":"0"}}},"className":"position-relative","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull position-relative" style="margin-top:var(--wp--preset--spacing--xxl);margin-bottom:0;padding-top:var(--wp--preset--spacing--xxl);padding-right:var(--wp--preset--spacing--g);padding-bottom:var(--wp--preset--spacing--g);padding-left:var(--wp--preset--spacing--g)">
    <!-- wp:columns {"verticalAlignment":"bottom","className":"flex-wrap g-md-5"} -->
    <div class="wp-block-columns are-vertically-aligned-bottom flex-wrap g-md-5">
        <!-- wp:column {"verticalAlignment":"bottom","style":{"spacing":{"blockGap":"var:preset|spacing|md"}},"className":"col-12 col-md"} -->
        <div class="wp-block-column is-vertically-aligned-bottom col-12 col-md">
            <!-- wp:columns {"verticalAlignment":"top","isStackedOnMobile":false} -->
            <div class="wp-block-columns are-vertically-aligned-top is-not-stacked-on-mobile">
                <!-- wp:column {"verticalAlignment":"top","className":"col-auto order-md-last"} -->
                <div class="wp-block-column is-vertically-aligned-top col-auto order-md-last">
                    <!-- wp:image {"align":"center","width":"35px","height":"35px","scale":"contain","sizeSlug":"large","linkDestination":"none","textColor":"primary"} -->
                    <figure class="wp-block-image aligncenter size-large is-resized has-primary-color has-text-color">
                        <img src="<?php echo esc_url( get_parent_theme_file_uri( 'assets/images/icon-download.svg' ) ); ?>" alt="" style="object-fit:contain;width:35px;height:35px" />
                    </figure>
                    <!-- /wp:image -->
                </div>
                <!-- /wp:column -->
                <!-- wp:column {"verticalAlignment":"top","style":{"spacing":{"blockGap":"var:preset|spacing|xs"}},"className":"has-text-align-md-right"} -->
                <div class="wp-block-column is-vertically-aligned-top has-text-align-md-right">
                    <!-- wp:heading {"level":3,"className":"h4 fw-400"} -->
                    <h3 class="wp-block-heading h4 fw-400"><?php esc_html_e( 'Free WP Theme', 'wecodeart' ); ?></h3>
                    <!-- /wp:heading -->
                    <!-- wp:paragraph {"fontSize":"small"} -->
                    <p class="has-small-font-size"><?php esc_html_e( 'WeCodeArt Framework is FREE with all future updates. Guaranteed!', 'wecodeart' ); ?></p>
                    <!-- /wp:paragraph -->
                </div>
                <!-- /wp:column -->
            </div>
            <!-- /wp:columns -->
            <!-- wp:columns {"verticalAlignment":"top","isStackedOnMobile":false} -->
            <div class="wp-block-columns are-vertically-aligned-top is-not-stacked-on-mobile">
                <!-- wp:column {"verticalAlignment":"top","className":"col-auto order-md-last"} -->
                <div class="wp-block-column is-vertically-aligned-top col-auto order-md-last">
                    <!-- wp:image {"align":"center","width":"35px","height":"35px","scale":"contain","sizeSlug":"large","linkDestination":"none","textColor":"primary"} -->
                    <figure class="wp-block-image aligncenter size-large is-resized has-primary-color has-text-color">
                        <img src="<?php echo esc_url( get_parent_theme_file_uri( 'assets/images/icon-puzzle.svg' ) ); ?>" alt="" style="object-fit:contain;width:35px;height:35px" />
                    </figure>
                    <!-- /wp:image -->
                </div>
                <!-- /wp:column -->
                <!-- wp:column {"verticalAlignment":"top","style":{"spacing":{"blockGap":"var:preset|spacing|xs"}},"className":"has-text-align-md-right"} -->
                <div class="wp-block-column is-vertically-aligned-top has-text-align-md-right">
                    <!-- wp:heading {"level":3,"className":"h4 fw-400"} -->
                    <h3 class="wp-block-heading h4 fw-400"><?php esc_html_e( 'Modular Design', 'wecodeart' ); ?></h3>
                    <!-- /wp:heading -->
                    <!-- wp:paragraph {"fontSize":"small"} -->
                    <p class="has-small-font-size"><?php esc_html_e( 'Cutting-edge code, simple, fast, and not packed with features you will never use.', 'wecodeart' ); ?></p>
                    <!-- /wp:paragraph -->
                </div>
                <!-- /wp:column -->
            </div>
            <!-- /wp:columns -->
        </div>
        <!-- /wp:column -->
        <!-- wp:column {"verticalAlignment":"bottom","className":"col-md-12 col-lg order-first order-lg-2 mb-3 mb-lg-0"} -->
        <div class="wp-block-column is-vertically-aligned-bottom col-md-12 col-lg order-first order-lg-2 mb-3 mb-lg-0">
            <!-- wp:image {"align":"center","sizeSlug":"large","className":"position-relative","customStyle":"selector {\n  z-index: 5;\n}\nselector img {\n  margin-top: -100px;\n}\n"} -->
            <figure class="wp-block-image aligncenter size-large has-custom-border position-relative">
                <img src="<?php echo esc_url( get_parent_theme_file_uri( 'assets/images/devices.png' ) ); ?>" alt="" />
            </figure>
            <!-- /wp:image -->
        </div>
        <!-- /wp:column -->
        <!-- wp:column {"verticalAlignment":"bottom","style":{"spacing":{"blockGap":"var:preset|spacing|md"}},"className":"col-12 col-md order-lg-last"} -->
        <div class="wp-block-column is-vertically-aligned-bottom col-12 col-md order-lg-last">
            <!-- wp:columns {"verticalAlignment":"top","isStackedOnMobile":false} -->
            <div class="wp-block-columns are-vertically-aligned-top is-not-stacked-on-mobile">
                <!-- wp:column {"verticalAlignment":"top","className":"col-auto"} -->
                <div class="wp-block-column is-vertically-aligned-top col-auto">
                    <!-- wp:image {"align":"center","width":"35px","height":"35px","scale":"contain","sizeSlug":"large","linkDestination":"none","textColor":"primary"} -->
                    <figure class="wp-block-image aligncenter size-large is-resized has-primary-color has-text-color">
                        <img src="<?php echo esc_url( get_parent_theme_file_uri( 'assets/images/icon-heart.svg' ) ); ?>" alt="" style="object-fit:contain;width:35px;height:35px" />
                    </figure>
                    <!-- /wp:image -->
                </div>
                <!-- /wp:column -->
                <!-- wp:column {"verticalAlignment":"top","style":{"spacing":{"blockGap":"var:preset|spacing|xs"}}} -->
                <div class="wp-block-column is-vertically-aligned-top">
                    <!-- wp:heading {"level":3,"className":"h4 fw-400"} -->
                    <h3 class="wp-block-heading h4 fw-400"><?php esc_html_e( 'Gutenberg Ready', 'wecodeart' ); ?></h3>
                    <!-- /wp:heading -->
                    <!-- wp:paragraph {"fontSize":"small"} -->
                    <p class="has-small-font-size"><?php esc_html_e( 'You don\'t need to fear the Gutenberg update introduced into WordPress.', 'wecodeart' ); ?></p>
                    <!-- /wp:paragraph -->
                </div>
                <!-- /wp:column -->
            </div>
            <!-- /wp:columns -->
            <!-- wp:columns {"verticalAlignment":"top","isStackedOnMobile":false} -->
            <div class="wp-block-columns are-vertically-aligned-top is-not-stacked-on-mobile">
                <!-- wp:column {"verticalAlignment":"top","className":"col-auto"} -->
                <div class="wp-block-column is-vertically-aligned-top col-auto">
                    <!-- wp:image {"align":"center","width":"35px","height":"35px","scale":"contain","sizeSlug":"large","linkDestination":"none","textColor":"primary"} -->
                    <figure class="wp-block-image aligncenter size-large is-resized has-primary-color has-text-color">
                        <img src="<?php echo esc_url( get_parent_theme_file_uri( 'assets/images/icon-bolt.svg' ) ); ?>" alt="" style="object-fit:contain;width:35px;height:35px" />
                    </figure>
                    <!-- /wp:image -->
                </div>
                <!-- /wp:column -->
                <!-- wp:column {"verticalAlignment":"top","style":{"spacing":{"blockGap":"var:preset|spacing|xs"}}} -->
                <div class="wp-block-column is-vertically-aligned-top">
                    <!-- wp:heading {"level":3,"className":"h4 fw-400"} -->
                    <h3 class="wp-block-heading h4 fw-400"><?php esc_html_e( 'Super Optimized', 'wecodeart' ); ?></h3>
                    <!-- /wp:heading -->
                    <!-- wp:paragraph {"fontSize":"small"} -->
                    <p class="has-small-font-size"><?php esc_html_e( 'Optimized to load very fast (under 1s GTMetrix), in any device, and also for SEO.', 'wecodeart' ); ?></p>
                    <!-- /wp:paragraph -->
                </div>
                <!-- /wp:column -->
            </div>
            <!-- /wp:columns -->
        </div>
        <!-- /wp:column -->
    </div>
    <!-- /wp:columns -->
</div>
<!-- /wp:group -->