{{!-- Forma hero: two-line serif title left, model photo right (ports-forma/shared/MARKUP.md). --}}
<section class="n-hero{{#if theme_settings.yamshi_hero_overlay}} has-fade{{/if}}">
    <div class="n-hero__media">
        <img src="{{> components/yamshi/image-url value=theme_settings.yamshi_hero_image fallback='img/yamshi/hero-model.jpg'}}" alt="" width="1839" height="1080" fetchpriority="high">
    </div>
    <div class="y-container n-hero__inner">
        <div class="n-hero__content">
            <h2 class="n-hero__title notranslate" translate="no">{{#if theme_settings.yamshi_hero_title}}<span class="n-hero__l1">{{theme_settings.yamshi_hero_title}}</span>{{#if theme_settings.yamshi_hero_title2}} <span class="n-hero__l2">{{theme_settings.yamshi_hero_title2}}</span>{{/if}}{{else}}<span class="n-hero__l1">{{lang 'yamshi.hero.title'}}</span> <span class="n-hero__l2">{{#if theme_settings.yamshi_hero_title2}}{{theme_settings.yamshi_hero_title2}}{{else}}{{lang 'yamshi.hero.title2'}}{{/if}}</span>{{/if}}</h2>
            <p class="n-hero__sub">
                <span class="n-hero__kicker">{{#if theme_settings.yamshi_hero_kicker}}{{theme_settings.yamshi_hero_kicker}}{{else}}{{lang 'yamshi.hero.kicker'}}{{/if}}</span>
                <span class="n-hero__text">{{#if theme_settings.yamshi_hero_text}}{{theme_settings.yamshi_hero_text}}{{else}}{{lang 'yamshi.hero.text'}}{{/if}}</span>
            </p>
            {{#unless theme_settings.yamshi_hero_button_hide}}
                <a class="y-btn y-btn--primary n-hero__btn" href="{{#if theme_settings.yamshi_hero_url}}{{theme_settings.yamshi_hero_url}}{{else}}{{theme_settings.yamshi_shop_url}}{{/if}}">{{#if theme_settings.yamshi_hero_button}}{{theme_settings.yamshi_hero_button}}{{else}}{{lang 'yamshi.hero.button'}}{{/if}}</a>
            {{/unless}}
        </div>
    </div>
</section>