<template>
    <div class="rectPhotoCard col-12" :class="sizeClass">
        <b-link
            :href="card.link"
            :target="card.linkTarget"
            class="rectPhotoCard-content d-flex justify-content-start flex-column"
        >
            <div :class="card.gradient">
                <img class="rectPhotoCard-content-img" :src="card.img" alt="logo">
            </div>
            <div class="rectPhotoCard-content-text h-100" v-html="card.text">
            </div>
            <div
                :v-if="card.date"
                class="rectPhotoCard-content-date"
            >
                {{ card.date }}
            </div>
        </b-link>
    </div>
</template>

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

<style lang="stylus">
#app
    .rectPhotoCard
        margin-bottom 30px
        &-content
            height 350px
            background-color #ffffff
            box-shadow 0 0 20px rgba(0, 0, 0, 0.2)
            overflow hidden
            @media (max-width 1199px)
                height 290px
            @media (max-width 991px)
                height 330px
            @media (max-width 767px)
                height auto
            @media (max-width 575px)
                height 290px
            &:hover
                text-decoration none
                box-shadow 0px 0px 20px rgba(0, 0, 0, 0.2), 0px 0px 30px rgba(0, 0, 0, 0.25)
                .rectPhotoCard-content-img
                    transform scale(1.1)
                .rectPhotoCard-content-text
                    color #00ADEF
            &-img
                width 100%
                height 188px
                object-fit cover
                transition all .3s
                @media (max-width 1199px)
                    height 150px
                @media (max-width 991px)
                    height 170px
                @media (max-width 767px)
                    height 278px
                @media (max-width 575px)
                    height 158px
            &-text
                font-size 18px
                line-height 120%
                color #1E7FB8
                padding 12px 20px 20px
                background-color #ffffff
                z-index 2
                @media (max-width 767px)
                    padding 20px 20px 29px
                @media (max-width 575px)
                    font-size 18px
            &-date
                padding 0px 20px 20px 20px
                color #808080
                line-height 150%
                font-weight normal
                font-size 14px
                @media (max-width 575px)
                    font-size 12px
</style>
