<template>
    <div class="hero-image">
        <div class="hero-fade">
        </div>
        <div class="hero-contents">
            <slot></slot>
        </div>
    </div>
</template>

<script>
export default {

}
</script>
<style>
.hero-image {
    @apply w-full relative;
    background-image: url("~assets/bg.png");
    background-size: cover;
    min-height: 300px;
    height: 50vh;
}
.hero-fade {
    @apply bg-black w-full h-full;
    opacity: 0.25;
}
.hero-contents {
    @apply absolute bottom-0 text-white w-full py-4; 
}
.hero-contents h1 {
    @apply text-6xl text-center;
}
</style>
