<div class="amtheme-preview-plates">
    <div class="amtheme-preview-plate -fullwidth">
        <div class="amtheme-image">
            <picture>
                <source srcset="{{view url='images/cms/raspberry.png'}} 1x,{{view url='images/cms/raspberry-x2.png'}} 2x"
                        media="(min-width: 1440px)">
                <img src="{{view url='images/cms/raspberry.png'}}" alt="Raspberry Image">
            </picture>
        </div>
        <div class="amtheme-description">
            <h1 class="amtheme-title">Welcome NewProd.</h1>
            <div class="amtheme-content">
                <div class="amtheme-links">
                    <a class="amtheme-link"
                       href="#"
                       title="Learn more">Learn more</a>
                    <a class="amtheme-link"
                       href="#"
                       title="Buy">Buy</a>
                </div>
            </div>
        </div>
    </div>
    <div class="amtheme-preview-plate -halfwidth">
        <div class="amtheme-image" style="background-color: #fff1f3;">
            <picture>
                <source srcset="{{view url='images/cms/milk-bottles.png'}} 1x,{{view url='images/cms/milk-bottles-x2.png'}} 2x"
                        media="(min-width: 1440px)">
                <img src="{{view url='images/cms/milk-bottles.png'}}" alt="Milk Bottles Image">
            </picture>
        </div>
        <div class="amtheme-description">
            <h1 class="amtheme-title">Accessories.</h1>
            <div class="amtheme-content">
                <p class="amtheme-text">
                    Carefully selected to help you get the most from your Jet products.
                </p>
                <div class="amtheme-links">
                    <a class="amtheme-link"
                       href="#"
                       title="Shop Now">Shop Now</a>
                </div>
            </div>
        </div>
    </div>
    <div class="amtheme-preview-plate -halfwidth">
        <div class="amtheme-image" style="background-color: #f4effe;">
            <picture>
                <source srcset="{{view url='images/cms/bun.png'}} 1x,{{view url='images/cms/bun-x2.png'}} 2x"
                        media="(min-width: 1440px)">
                <img src="{{view url='images/cms/bun.png'}}" alt="Milk Bottles Image">
            </picture>
        </div>
        <div class="amtheme-description">
            <h1 class="amtheme-title">Bread.</h1>
            <div class="amtheme-content">
                <p class="amtheme-text">
                    Carefully selected to help you get the most from your Jet products.
                </p>
                <div class="amtheme-links">
                    <a class="amtheme-link"
                       href="#"
                       title="See what’s happening">See what’s happening</a>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .amtheme-preview-plate {
        margin: 0 -25px;
        background-color: #f8f8f8;
    }

    .amtheme-preview-plate.-fullwidth:not(:first-child),
    .amtheme-preview-plate.-halfwidth:not(:first-child) {
        margin-top: 30px;
    }

    .amtheme-preview-plate > .amtheme-image {
        text-align: center;
    }

    .amtheme-preview-plate > .amtheme-image img {
        width: 90%;
    }

    .amtheme-preview-plate > .amtheme-description {
        padding: 30px 25px;
    }

    .amtheme-preview-plate .amtheme-content {
        margin-top: 25px;
    }

    .amtheme-preview-plate .amtheme-content .amtheme-text {
        min-height: 40px;
    }

    .amtheme-preview-plate .amtheme-links {
        display: flex;
        flex-wrap: wrap;
    }

    .amtheme-preview-plate .amtheme-links:not(:first-child) {
        margin-top: 35px;
    }

    .amtheme-preview-plate .amtheme-link:after {
        position: absolute;
        top: 50%;
        right: 7px;
        display: inline-block;
        width: 6px;
        height: 6px;
        border-color: inherit;
        border-top: 1px solid;
        border-right: 1px solid;
        content: '';
        transition: right .3s;
        transform: translateY(-50%) rotate(45deg);
    }

    .amtheme-preview-plate .amtheme-link:hover:after {
        right: 2px;
    }

    .amtheme-preview-plate .amtheme-link {
        position: relative;
        padding-right: 25px;
    }

    .amtheme-preview-plate .amtheme-link:not(:last-child) {
        margin-right: 25px;
    }

    @media only screen and (min-width: 480px) {
        .amtheme-preview-plate.-fullwidth {
            margin: 0 -35px;
        }

        .amtheme-preview-plate.-halfwidth {
            margin: 0;
        }
    }

    @media only screen and (min-width: 640px) {
        .amtheme-preview-plate.-fullwidth,
        .amtheme-preview-plate.-halfwidth {
            margin: 0;
        }
    }

    @media only screen and (min-width: 768px) {
        .amtheme-preview-plates {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .amtheme-preview-plate.-fullwidth:not(:first-child),
        .amtheme-preview-plate.-halfwidth:not(:first-child) {
            margin-top: 20px;
        }

        .amtheme-preview-plate.-fullwidth {
            display: flex;
            align-items: center;
            flex-basis: 100%;
        }

        .amtheme-preview-plate.-fullwidth > .amtheme-image,
        .amtheme-preview-plate.-fullwidth > .amtheme-description {
            flex-basis: 50%;
            box-sizing: border-box;
        }

        .amtheme-preview-plate.-fullwidth > .amtheme-image img {
            box-sizing: border-box;
            padding: 0 10px;
        }

        .amtheme-preview-plate.-fullwidth > .amtheme-description {
            padding-left: 10px;
        }

        .amtheme-preview-plate.-halfwidth {
            flex-basis: calc((100% - 20px) / 2);
        }
    }
</style>
