<?php
/**
 * Title: Left Media and Text
 * Slug: aamira/left-media-text
 * Categories: header
 * Block Types: core/template-part/header
 * Description: Site header with site title and navigation.
 * @package WordPress
 * @subpackage Aamira
 * @since Aamira 1.0
 */

?>

<!-- wp:cover {"customOverlayColor":"#001514","isUserOverlayColor":true,"minHeight":34,"minHeightUnit":"rem","metadata":{"categories":["header"],"patternName":"aamira/header-hero-section2","name":"Left Media and Text"},"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50"}}},"layout":{"type":"constrained","contentSize":"1150px","wideSize":"1380px"}} -->
<div class="wp-block-cover alignfull"
    style="padding-top:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);min-height:34rem">
    <span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim"
        style="background-color:#001514"></span>
    <div class="wp-block-cover__inner-container">
        <!-- wp:paragraph {"align":"center","fontSize":"x-large"} -->
        <p class="has-text-align-center has-x-large-font-size"><?php esc_html_e( 'Left Image', 'aamira' ); ?> &amp;
            <?php esc_html_e( 'Content', 'aamira' ); ?></p>
        <!-- /wp:paragraph -->

        <!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50"}}},"layout":{"inherit":true,"type":"constrained","contentSize":"1150px","wideSize":"1380px"}} -->
        <div class="wp-block-group alignwide"
            style="padding-top:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50)">
            <!-- wp:columns {"align":"wide","style":{"spacing":{"blockGap":{"left":"3rem"}}}} -->
            <div class="wp-block-columns alignwide">
                <!-- wp:column {"verticalAlignment":"center"} -->
                <div class="wp-block-column is-vertically-aligned-center">
                    <!-- wp:image {"id":6822,"scale":"cover","sizeSlug":"full","linkDestination":"none","style":{"border":{"radius":"10px"}}} -->
                    <figure class="wp-block-image size-full has-custom-border"><img
                            src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/404.jpg" alt=""
                            class="wp-image-6822" style="border-radius:10px;object-fit:cover" /></figure>
                    <!-- /wp:image -->
                </div>
                <!-- /wp:column -->

                <!-- wp:column {"verticalAlignment":"center","style":{"spacing":{"padding":{"left":"var:preset|spacing|30"}}}} -->
                <div class="wp-block-column is-vertically-aligned-center"
                    style="padding-left:var(--wp--preset--spacing--30)">
                    <!-- wp:paragraph {"style":{"typography":{"textTransform":"uppercase"},"elements":{"link":{"color":{"text":"#00f0e4"}}},"color":{"text":"#00f0e4"}}} -->
                    <p class="has-text-color has-link-color" style="color:#00f0e4;text-transform:uppercase">
                        <strong><?php esc_html_e( 'Service', 'aamira' ); ?></strong>
                    </p>
                    <!-- /wp:paragraph -->

                    <!-- wp:paragraph {"className":"text-7xl capitalize ","style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}},"typography":{"fontSize":"48px"}},"textColor":"white"} -->
                    <p class="text-7xl capitalize has-white-color has-text-color has-link-color" style="font-size:48px">
                        <?php esc_html_e( 'We solve web design problems efficiently', 'aamira' ); ?></p>
                    <!-- /wp:paragraph -->

                    <!-- wp:paragraph -->
                    <p><?php esc_html_e( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                        labore et dolore magna aliqua.', 'aamira' ); ?></p>
                    <!-- /wp:paragraph -->

                    <!-- wp:buttons {"style":{"spacing":{"padding":{"top":"2rem","bottom":"0px"}}}} -->
                    <div class="wp-block-buttons" style="padding-top:2rem;padding-bottom:0px">
                        <!-- wp:button {"className":"is-style-outline","style":{"elements":{"link":{"color":{"text":"#00f0e4"}}},"color":{"text":"#00f0e4"},"typography":{"textTransform":"uppercase"}}} -->
                        <div class="wp-block-button is-style-outline"><a
                                class="wp-block-button__link has-text-color has-link-color wp-element-button"
                                style="color:#00f0e4;text-transform:uppercase"><?php esc_html_e( 'Get Started', 'aamira' ); ?></a>
                        </div>
                        <!-- /wp:button -->
                    </div>
                    <!-- /wp:buttons -->
                </div>
                <!-- /wp:column -->
            </div>
            <!-- /wp:columns -->
        </div>
        <!-- /wp:group -->
    </div>
</div>
<!-- /wp:cover -->