<script lang="ts">
    import Button from '$components/atoms/Button.svelte'
    import Image from '$components/atoms/Image.svelte'
</script>

<div class="poster-product grid">
    <h2 class="title-huge">Melbourne</h2>

    <div class="poster-product__buy">
        <div class="info">
            <dl>
                <dt>Poster</dt>
                <dd>Houses Of Melbourne – 30€</dd>
            </dl>
            <Button
                text="Add to cart"
                color="pink"
            />
        </div>
        <img src="/images/poster-display.jpg" alt="">
    </div>

    <div class="poster-product__images grid container">
        <picture class="image image--first photo shadow-box-light">
            <img src="https://picsum.photos/656/493" width={656} height={493} alt="blob">
        </picture>
        <picture class="image image--second photo shadow-box-light">
            <img src="https://picsum.photos/324/259" width={324} height={259} alt="blob">
        </picture>
        <picture class="image image--third photo shadow-box-light">
            <img src="https://picsum.photos/324/416" width={324} height={416} alt="blob">
        </picture>
    </div>

    <div class="poster-product__about grid">
        <div class="text container">
            <p>This poster will bring you to straight to Melbourne, Australia with its unique Victorian architectural style, wrought iron and colorful fronts.</p>
            <p class="details">
                Format: 40cm x 60cm (16” x 24”)<br>Printed on Recycled offset paper, 150gm/m2.<br>Frame not included.
            </p>
        </div>
    </div>

    <div class="poster-product__image grid container">
        <picture class="image image--fourth photo shadow-box-light">
            <img src="https://picsum.photos/854/588" width={854} height={588} alt="blob">
        </picture>
    </div>
</div>