{{#extend "base" pageClass="home-page" title="Banner" hideBreadcrumbs=true hideBanner=false pageHome=true smartBannerDIY=true blueBanner=true}}
{{#content "head" mode="append" pageHome="true"}}
<link type="text/css" rel="stylesheet" href="./css/pages/page_home.css">
<style>
    .home-page > .sticky-wrapper {
        display: block;
    }
    .hero {
        position: relative;
        height: 400px;
        overflow: hidden;
        max-width: 1397px;
        margin: 0 auto;
    }

    @media screen and (max-width: 992px) {
        .hero {
            height: 290px;
        }
    }

    @media screen and (max-width: 600px) {
        .hero {
            height: 500px;
        }
    }

    .hero__image-container .hero__image {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    @media screen and (max-width: 768px) {
        .hero__image-container {
            height: 290px;
            overflow: hidden;
            position: relative;
        }
    }

    @media screen and (max-width: 600px) {
        .hero__image-container {
            height: 290px;
            overflow: hidden;
            position: relative;
        }
    }

    .hero__banner {
        position: absolute;
        width: 380px;
        top: 0;
        left: 10%;
        margin: 0 auto;
        height: 100%;
    }

    @media screen and (max-width: 900px) {
        .hero__banner {
            max-width: 240px;
        }
    }

    @media screen and (max-width: 600px) {
        .hero__banner {
            max-width: 100%;
            width: 100%;
            position: relative;
            left: 0;
        }
    }

    .hero__banner .banner-info_large {
        position: relative;
    }
    .hero__banner .banner-info__offer {
        font-size: 3rem;
        margin-bottom: 20px;
        width: 100%;
        max-width: 100%;
    }
</style>
{{/content}}
{{#content "body"}}
<main class="banner-inside">
    <div class="hero">
        <img class="hero__image" src="./img/placeholders/hero.jpg" alt="hero">
    </div>

    <div class="proposition">
        <div class="proposition__inner">
            <a href="#" class="proposition__link  proposition__link_click-collect">
                <span class="proposition__icon  proposition__icon_click-collect"><i
                        class="fas fa-mouse-pointer icon"></i></span>
                FREE Click &amp; Collect<span
                    class="proposition__link_click-collect-short-text"> from store in 1 hour</span>
            </a>
            <a href="#" class="proposition__link  proposition__link_delivery">
                <span class="proposition__icon  proposition__icon_delivery"><i class="fas fa-truck icon"></i></span>FREE
                delivery *
            </a>
            <a href="#" class="proposition__link  proposition__link_returns">
                <span class="proposition__icon  proposition__icon_returns"><i class="fas fa-reply-all icon"></i></span>FREE
                returns
            </a>
            <a href="#" class="proposition__link  proposition__link_price-promise">
                <span class="proposition__icon  proposition__icon_price-promise"><i class="fas fa-pound-sign icon"></i></span>Price
                match promise
            </a>
        </div>
    </div>

    {{> home-offers }}
    {{> popular-categories }}

</main>
{{/content}}
{{/extend}}