<div class="gh-hero-section-wrapper{{#match @custom.hero_section_layout "Featured posts"}} gh-hero-section-wrapper--featured{{/match}}">
    {{#match @custom.hero_section_layout "Featured posts"}}
    <div class="gh-hero-section gh-container">
        <div class="gh-hero-section--featured">
        {{#get "posts" limit="4" filter="featured:true" include="tags"}}
            {{#foreach posts from="1" to="1"}}
                <a href="{{url}}" class="gh-hero-big-featured-post {{post_class}}">
                    {{#if feature_image}}
                        <picture>
                            <source srcset="{{img_url feature_image size="1600" format="webp"}} 1600w, {{img_url feature_image size="1200" format="webp"}} 1200w, {{img_url feature_image size="800" format="webp"}} 800w, {{img_url feature_image size="600" format="webp"}} 600w"  sizes="(max-width: 1000px) 92vw, 45vw, (min-width: 1584px) 810px" type="image/webp">
                            <img class="gh-hero-big-featured-post__img" srcset="{{img_url feature_image size="1600"}} 1600w, {{img_url feature_image size="1200" format="webp"}} 1200w, {{img_url feature_image size="800"}} 800w, {{img_url feature_image size="600"}} 600w"  sizes="(max-width: 1000px) 92vw, 45vw, (min-width: 1584px) 810px" src="{{img_url feature_image size="1600"}}" alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}} {{t "post image"}}{{/if}}">
                        </picture>
                    {{else}}
                        <div class="gh-hero-big-featured-post__img-plug {{#if @custom.dark_mode_logo}}hasDMlogo{{/if}}">
                             {{#if @site.logo}}
                                {{#if @custom.dark_mode_logo}}
                                    <img src="{{img_url @custom.dark_mode_logo}}" alt="{{@site.title}} {{t "icon"}}" class="gh-hero-big-featured-post__img-plug__logo-dark">
                                {{/if}}
                                    <img src="{{img_url @site.logo}}" alt="{{@site.title}} {{t "icon"}}" class="gh-hero-big-featured-post__img-plug__logo">
                            {{else}}
                                <h3 class="gh-hero-big-featured-post__img-plug__name">{{@site.title}}</h3>
                            {{/if}}
                        </div>
                    {{/if}}
                    <div class="gh-hero-big-featured-post__info">
                        <div class="gh-hero-big-featured-post__tags-wrapper">
                            {{#foreach tags}}
                                <div class="gh-hero-big-featured-post__tag">
                                    {{name}}
                                </div>
                            {{/foreach}}
                        </div>
                        <span class="gh-hero-big-featured-post__date">
                            {{t "Updated on"}} <time datetime="{{date format=" YYYY-MM-DD"}}">{{date format="MMM D, YYYY"}}</time>
                        </span>
                    </div>
                    <div class="gh-hero-big-featured-post__main">
                        <h2 class="gh-hero-big-featured-post__title">{{title}}</h2>
                        {{#if custom_excerpt}}
                        <p class="gh-hero-big-featured-post__excerpt">{{custom_excerpt}}</p>
                        {{/if}}
                    </div>
                </a>
            {{/foreach}}
            <div class="gh-hero-featured-posts-list">
                {{#foreach posts from="2" to="4"}}
                    <div class="gh-hero-featured-post">
                        <a href="{{url}}" class="gh-hero-featured-post__img-wrapper">
                            {{#if feature_image}}
                                <picture>
                                    <source srcset="{{img_url feature_image size="800" format="webp"}} 800w, {{img_url feature_image size="600" format="webp"}} 600w, {{img_url feature_image size="300" format="webp"}} 300w"  sizes="(max-width: 1000px) 45vw, 23vw, (min-width: 1584px) 352px" type="image/webp">
                                    <img class="gh-hero-featured-post__img" srcset="{{img_url feature_image size="800"}} 800w, {{img_url feature_image size="600"}} 600w, {{img_url feature_image size="300"}} 300w"  sizes="(max-width: 1000px) 45vw, 23vw, (min-width: 1584px) 352px" src="{{img_url feature_image size="800"}}" alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}} {{t "post image"}}{{/if}}">
                                </picture>
                            {{else}}
                                <div class="gh-hero-featured-post__img-plug {{#if @custom.dark_mode_logo}}hasDMlogo{{/if}}">
                                {{#if @site.logo}}
                                    {{#if @custom.dark_mode_logo}}
                                        <img src="{{img_url @custom.dark_mode_logo}}" alt="{{@site.title}} {{t "icon"}}" class="gh-hero-featured-post__img-plug__logo-dark">
                                    {{/if}}
                                        <img src="{{img_url @site.logo}}" alt="{{@site.title}} {{t "icon"}}" class="gh-hero-featured-post__img-plug__logo">
                                {{else}}
                                    <h3 class="gh-hero-featured-post__img-plug__name">{{@site.title}}</h3>
                                {{/if}}
                                </div>
                            {{/if}}
                        </a>
                        <div class="gh-hero-featured-post__content">
                            <div class="gh-hero-featured-post__tags-wrapper">
                            {{#foreach tags}}
                                <a class="gh-card-tag gh-hero-featured-post__tag" href="{{url}}" aria-label="{{name}} {{t "tag link"}}">
                                    {{name}}
                                </a>
                            {{/foreach}}
                            </div>
                            <a href="{{url}}" aria-label="{{title}} {{t "post title link"}}"><h2 class="gh-hero-featured-post__title">{{title}}</h2></a>
                            <span class="gh-hero-featured-post__date gh-post-meta">
                                {{t "Updated on"}} <time datetime="{{date format=" YYYY-MM-DD"}}">{{date format="MMM D, YYYY"}}</time>
                            </span>
                        </div>
                    </div>
                {{/foreach}}
            </div>
        {{/get}}
        </div>
    </div>
    {{else}}
    <div class="gh-hero-section gh-container gh-hero-section--{{#match @custom.hero_section_layout "Full background image"}}full-bg{{else match @custom.hero_section_layout "Bottom slider"}}bottom-slider{{else match @custom.hero_section_layout "Only text" }}only-text{{else match @custom.hero_section_layout "Image on the right" }}right-image{{else match @custom.hero_section_layout "Slider on the right" }}right-slider{{/match}}" {{#match @custom.hero_section_layout "Full background image"}}style="background-image: url({{@site.cover_image}})"{{/match}}>
        <div class="gh-hero-section-inner">
            <div class="gh-hero-section-content {{#match @custom.hero_section_layout "Only text"}}only-text{{else match @custom.hero_section_layout "Full background image"}}full-bg{{/match}}">
                <h2 class="gh-about-primary">{{@custom.about_primary}}</h2>
                <p class="gh-about-secondary">{{@custom.about_secondary}}</p>
                {{#if @site.members_enabled}}
                    {{#get "pages" slug="membership"}}
                        {{#if pages}}
							<div class="gh-about-buttons-wrapper">
								{{#unless @member}}
									<a class="gh-main-button gh-subscribe-button" href="{{@site.url}}/#/portal/signup" aria-label="{{t "Sign up button"}}">
										{{t "Sign Up for Free"}}
									</a>
                        {{else}}
									<a class="gh-main-button gh-subscribe-button" href="{{@site.url}}/membership" aria-label="{{t "Membership button"}}">
										{{t "View your Membership"}}
									</a>
								{{/unless}}
								<a class="gh-main-button gh-subscribe-button" href="{{@site.url}}/chapter-1" aria-label="{{t "Read chapter one button"}}">
									{{t "Read Chapter One"}}
								</a>
							</div>
                        {{else}}
                            {{#unless @member}}
                                <a class="gh-secondary-button gh-read-chapter-button" href="{{@site.url}}/#/portal/signup" aria-label="{{t "Sign up button"}}">
                                    {{t "Sign Up for Free"}}
                                </a>
                            {{/unless}}
                        {{/if}}
                    {{/get}}
                {{/if}}
            </div>
            {{#match @custom.hero_section_layout "Only text"}}
			{{else match @custom.hero_section_layout "Full background image"}}
			{{else}}
                {{#match @custom.hero_section_layout "Image on the right"}}
                    <div class="gh-hero-section-cover-image-wrapper">
                        <picture>
                            <source srcset="{{img_url @site.cover_image size="1600" format="webp"}} 1600w, {{img_url @site.cover_image size="1200" format="webp"}} 1200w, {{img_url @site.cover_image size="800" format="webp"}} 800w, {{img_url @site.cover_image size="500" format="webp"}} 500w" sizes="(max-width: 500px): 500px, (max-width: 900px) 100vw, 50vw" type="image/webp">
                            <img class="gh-hero-section-cover-image" srcset="{{img_url @site.cover_image size="1600"}} 1600w, {{img_url @site.cover_image size="1200"}} 1200w, {{img_url @site.cover_image size="800"}} 800w, {{img_url @site.cover_image size="500"}} 500w" sizes="(max-width: 500px): 500px, (max-width: 900px) 100vw, 50vw" src="{{img_url @site.cover_image size="1600"}}"  alt="{{t "Hero Section Image"}}" fetchpriority="high">
                        </picture>
                    </div>
                {{/match}}
            <div class="gh-hero-section-sliders-wrapper">
                {{#match @custom.hero_section_layout "Slider on the right"}}
                    <div class="gh-hero-sliders">
                        <div class="gh-hero-slider-wrapper">
                            <div class="gh-hero-slider gh-hero-slider--forward">
                                <div class="swiper-wrapper">
                                    {{#get "posts" limit="10" page="1" order="published_at desc" filter="feature_image:-null"}}
                                        {{#foreach posts}}
                                            {{#if feature_image}}
                                                <div class="swiper-slide gh-hero-slider-slide">
                                                    <picture>
                                                        <source srcset="{{img_url feature_image size="200" format="webp"}} 200w, {{img_url feature_image size="500" format="webp"}} 500w, {{img_url feature_image size="1000" format="webp"}} 1000w"  sizes="(max-width: 500px) 151px, 500px" type="image/webp">
                                                        <img srcset="{{img_url feature_image size="200"}} 200w, {{img_url feature_image size="500"}} 500w, {{img_url feature_image size="1000"}} 1000w" sizes="(max-width: 500px) 151px, 500px" src="{{img_url feature_image size="1000"}}" alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}} {{t "post feature image"}}{{/if}}">
                                                    </picture>
                                                </div>
                                            {{/if}}
                                        {{/foreach}}
                                    {{/get}}
                                </div>
                            </div>
                        </div>
                        <div class="gh-hero-slider-wrapper">
                            <div class="gh-hero-slider gh-hero-slider--reverse">
                                <div class="swiper-wrapper">
                                    {{#get "posts" limit="10" page="2" order="published_at desc" filter="feature_image:-null"}}
                                        {{#foreach posts}}
                                            {{#if feature_image}}
                                                <div class="swiper-slide gh-hero-slider-slide">
                                                    <picture>
                                                        <source srcset="{{img_url feature_image size="200" format="webp"}} 200w, {{img_url feature_image size="500" format="webp"}} 500w, {{img_url feature_image size="1000" format="webp"}} 1000w"  sizes="(max-width: 500px) 151px, 500px" type="image/webp">
                                                        <img srcset="{{img_url feature_image size="200"}} 200w, {{img_url feature_image size="500"}} 500w, {{img_url feature_image size="1000"}} 1000w" sizes="(max-width: 500px) 151px, 500px" src="{{img_url feature_image size="1000"}}" alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}} {{t "post feature image"}}{{/if}}">
                                                    </picture>
                                                </div>
                                            {{/if}}
                                        {{/foreach}}
                                    {{/get}}
                                </div>
                            </div>
                        </div>
                    </div>
                {{/match}}
                {{#match @custom.hero_section_layout "Bottom slider"}}
                    <div class="gh-hero-slider-wrapper">
                        <div class="gh-hero-slider gh-hero-slider--horizontal">
                            <div class="swiper-wrapper">
                                {{#get "posts" limit="15" filter="feature_image:-null" order="published_at desc"}}
                                    {{#foreach posts}}
                                        <div class="swiper-slide gh-hero-slider-slide {{#if @even}}swiper-slide-even{{/if}}">
                                            <div class="gh-hero-slider-slide-inner">
                                                <picture>
                                                    <source srcset="{{img_url feature_image size="200" format="webp"}} 200w, {{img_url feature_image size="500" format="webp"}} 500w, {{img_url feature_image size="1000" format="webp"}} 1000w"  sizes="(max-width: 500px) 155px, 352px" type="image/webp">
                                                    <img srcset="{{img_url feature_image size="200"}} 200w, {{img_url feature_image size="500"}} 500w, {{img_url feature_image size="1000"}} 1000w" sizes="(max-width: 500px) 155px, 352px" src="{{img_url feature_image size="1000"}}" alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}} {{t "post feature image"}}{{/if}}">
                                                </picture>
                                            </div>
                                        </div>
                                    {{/foreach}}
                                {{/get}}
                            </div>
                        </div>
                    </div>
                {{/match}}
            </div>
			{{/match}}
        </div>
    </div>
    {{/match}}
</div>
