<template>
    <div class="px-md-5" style="background-color: #fff;">
        <img
            v-if="group.metadata && group.metadata.hasOwnProperty('header')"
            :src="group.metadata.header.url"
            class="header-image">
        <div v-else class="header-jumbotron"></div>
    </div>
</template>

<script>
    export default {
        props: {
            group: {
                type: Object
            }
        }
    }
</script>

<style lang="scss" scoped>
    .header-image {
        width: 100%;
        height: auto;
        object-fit: cover;
        max-height: 220px;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        margin-top:-1px;
        border: 1px solid var(--light);
        margin-bottom: 0px;

        @media(min-width: 768px) {
            max-height: 420px;
        }
    }

    .header-jumbotron {
        background-color: #F3F4F6;
        height: 320px;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
    }
</style>