<template>
    <div class="newsCard align-self-stretch col-12" :class="sizeClass">
        <b-link
            :href="card.link"
            :target="card.linkTarget"
            class="newsCard-content d-flex flex-column justify-content-start h-100"
        >
            <div
                class="newsCard-content-img"
                :class="card.gradient"
            >
                <img :src="card.img" alt="news img">
            </div>
            <div class="newsCard-content-info d-flex flex-column justify-content-between h-100">
                <div class="newsCard-content-info-text">
                    <div class="newsCard-content-info-text-title" v-html="card.title"></div>
                    <div class="newsCard-content-info-text-news" v-html="card.text"></div>
                </div>
                <div class="newsCard-content-info-date">
                    {{card.date}}
                </div>
            </div>
        </b-link>
    </div>
</template>

<script>
module.exports = {
    name: 'NewsCard',
    mixins: [sizableComponentMixin],
    props: {
        card: Object,
        withSidebar: Boolean,
    },
    data() {
        return {
            defaultSize: 'col-lg-6',
        }
    },
};
</script>

<style lang="stylus">
#app
    .newsCard
        margin-bottom 30px
        &-content
            background-color #ffffff
            box-shadow 0 0 20px rgba(0, 0, 0, 0.2)
            transition all .3s
            &:hover
                text-decoration none
                box-shadow 0px 0px 20px rgba(0, 0, 0, 0.2), 0px 0px 30px rgba(0, 0, 0, 0.25)
                .newsCard-content-img
                    img
                      transform scale(1.1)
                .newsCard-content-info-text-title
                    color #00ADEF
            &-img
                overflow hidden
                height 180px
                min-height 180px
                @media (max-width 1199px)
                    height 230px
                    min-height 230px
                @media (max-width 991px)
                    height 355px
                    min-height 355px
                @media (max-width 767px)
                    height 278px
                    min-height 278px
                @media (max-width 575px)
                    height 180px
                    min-height 180px
                img
                    transition all .3s
                    width 100%
                    height 100%
                    object-fit cover
            &-info
                &-text
                    padding 16px 20px
                    color #3C3C3C
                    line-height 150%
                    font-weight normal
                    font-size 16px
                    @media (max-width 575px)
                        font-size 14px
                    &-news
                        a
                            color #1E7FB8
                    &-title
                        color #1E7FB8
                        line-height 120%
                        font-size 18px
                        margin-bottom 10px
                &-date
                    padding 0 20px 20px
                    color #808080
                    line-height 150%
                    font-weight normal
                    font-size 14px
                    letter-spacing: 0.5px
                    @media (max-width 575px)
                        font-size 12px
</style>
