<script>
    export let name;
    export let link;
    export let img = "https://placehold.it/600x300";
    export let size = { width: 600, height: 300 };
    export let description;
</script>

<style>
    .card {
        display: flex;
        gap: 2.5rem;
    }

    .back a img {
        max-width: 100%;
        height: auto;
    }

    .description {
        width: 500px;
    }

    @media screen and (max-width: 978px) {
        .card {
            flex-wrap: wrap;
            gap: 0.25rem;
        }
    }
</style>

<div class="card">
    <div class="back">
        <a href="{link}">
            <img src={img} alt={name} width={size.width} height={size.height}>
        </a>
    </div>
    <div class="description">
        <h2>{name}</h2>
        <p>{description}</p>
    </div>
</div>
<br>
