<?php
/**
 * Title: Home Banner
 * Slug: automobile-car-shop/home-banner
 * Categories: template
 */
?>

<!-- wp:cover {"url":"<?php echo esc_url(get_template_directory_uri()); ?>/images/banner.png","id":9384,"dimRatio":0,"focalPoint":{"x":0.48,"y":0.57},"minHeight":730,"minHeightUnit":"px","align":"full","className":"main-banner-section position-relative wow zoomIn delay-1000"} -->
<div class="wp-block-cover alignfull main-banner-section position-relative wow zoomIn delay-1000" style="min-height:730px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span><img class="wp-block-cover__image-background wp-image-9384" alt="" src="<?php echo esc_url(get_template_directory_uri()); ?>/images/banner.png" style="object-position:48% 57%" data-object-fit="cover" data-object-position="48% 57%"/><div class="wp-block-cover__inner-container"><!-- wp:columns {"className":"alignwide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"className":"banner-col-sec1"} -->
<div class="wp-block-column banner-col-sec1"></div>
<!-- /wp:column -->

<!-- wp:column {"width":"45%","className":"is-vertically-aligned-center  banner-sec-content"} -->
<div class="wp-block-column is-vertically-aligned-center banner-sec-content" style="flex-basis:45%"><!-- wp:heading {"style":{"typography":{"fontSize":"35px"}},"className":"has-text-align-center"} -->
<h2 class="wp-block-heading has-text-align-center" style="font-size:35px"><?php echo esc_html__('Designed For Driving Pleasure', 'automobile-car-shop'); ?></h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"align":"center","style":{"typography":{"fontSize":"16px","lineHeight":"1.5"}}} -->
<p class="has-text-align-center" style="font-size:16px;line-height:1.5"><?php echo esc_html__('Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco', 'automobile-car-shop'); ?></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"className":"banner-col-sec2"} -->
<div class="wp-block-column banner-col-sec2"></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"20%"} -->
<div class="wp-block-column" style="flex-basis:20%"></div>
<!-- /wp:column -->

<!-- wp:column {"width":"50%","className":"banner-section-info"} -->
<div class="wp-block-column banner-section-info" style="flex-basis:50%"><!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:heading -->
<h2 class="wp-block-heading"><?php echo esc_html__('Mazda SZ EV 23', 'automobile-car-shop'); ?></h2>
<!-- /wp:heading -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"30%","className":"banner-col-1"} -->
<div class="wp-block-column banner-col-1" style="flex-basis:30%"><!-- wp:heading -->
<h2 class="wp-block-heading"><?php echo esc_html__('520 nm', 'automobile-car-shop'); ?></h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"typography":{"fontSize":"16px"}}} -->
<p style="font-size:16px"><?php echo esc_html__('Torque', 'automobile-car-shop'); ?></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"30%","className":"banner-col-2"} -->
<div class="wp-block-column banner-col-2" style="flex-basis:30%"><!-- wp:heading -->
<h2 class="wp-block-heading"><?php echo esc_html__('4.4s', 'automobile-car-shop'); ?></h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"typography":{"fontSize":"16px"}}} -->
<p style="font-size:16px"><?php echo esc_html__('0-100 km/h', 'automobile-car-shop'); ?></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"30%","className":"banner-col-3"} -->
<div class="wp-block-column banner-col-3" style="flex-basis:30%"><!-- wp:heading -->
<h2 class="wp-block-heading"><?php echo esc_html__('290 km/h', 'automobile-car-shop'); ?></h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><?php echo esc_html__('Max Sp', 'automobile-car-shop'); ?></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"25%"} -->
<div class="wp-block-column" style="flex-basis:25%"></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div></div>
<!-- /wp:cover -->