<isscript>
    var assets = require('*/cartridge/scripts/assets.js');
    assets.addCss('/css/experience/components/commerceAssets/shopTheLook.css');
</isscript>

<isset name="product" value="${pdict.product}" scope="page" />
<div class="shop-the-look-container">
    <div class="row">
        <div class="col-12">
             <!---Displays large and extra large screens--->
            <figure class="shopthelook-figure-lg d-none d-lg-block">
                <picture>
                    <a href="${pdict.urls.product}">
                        <isinclude template="/experience/components/commerce_assets/shopTheLook/imageFile"/>
                        <div class="col-8 product-info">
                            <isinclude template="/experience/components/commerce_assets/shopTheLook/titleAndPrice"/>
                            <div class="d-flex justify-content-center">
                                <div class="shopthelook-text btn">
                                    ${Resource.msg('pd.shop.the.look.text','pageDesigner',null)}
                                </div>
                             </div>
                        </div>
                    </a>
                </picture>
            </figure>
            <!---medium, small and xs screen displays--->
            <figure class="shopthelook-figure-sm d-block d-lg-none">
                <picture>
                    <a href="${pdict.urls.product}">
                        <isinclude template="/experience/components/commerce_assets/shopTheLook/imageFile"/>
                    </a>
                </picture>
                <isinclude template="/experience/components/commerce_assets/shopTheLook/titleAndPrice"/>
            </figure>
        </div>
    </div>
</div>


