<template>
    <div class="card project-card">
        <div class="card-title">
            <h1>{{name}}</h1>
        </div>
        <div class="card-content my-4">
            <p>{{description}}</p>
        </div>
        <div class="card-footer">
            <p><a :href="url">Website</a></p>
        </div>
    </div>
</template>

<script>
export default {
    props: [ 'name', 'description', 'url' ],
}
</script>

<style>
.project-card {
    @apply mx-4 my-4 w-full;
}
@screen md {
    .project-card {
        @apply w-1/2;
    }
}
@screen lg {
    .project-card {
        @apply w-1/3;
    }
}
</style>
