<script lang="ts">
    import { fly } from "svelte/transition"
    export let col: Column
    export let siteId: string
    import { apiBaseURL } from "../../../config"
</script>

<div class="mainPicture">
    <div class="imgContainer">
        <img
            src="{`${apiBaseURL}content/${siteId}/${col.mainPicture?.src}?filter=${
                window.innerWidth > 500 ? 'xl' : 'm'
            }`}"
            alt="img"
        />
    </div>
    <div class="inscription" in:fly="{{ duration: 1000, delay: 500, y: 50, opacity: 0 }}">
        {col.inscription || ""}
    </div>
</div>

<style lang="less">
    @import "../../assets/css/variables.less";
    .mainPicture {
        max-width: @body-maxwidth;
        position: relative;
        height: 100%;
        line-height: normal;

        flex-grow: 2;
        width: 100%;
        .imgContainer {
            width: 100%;
            img {
                width: 100%;
                height: auto;
                object-fit: contain;
            }
        }
        .inscription {
            position: absolute;
            bottom: 35px;
            left: 35px;
            margin-right: 35px;
            font-size: 1.7rem;
            font-weight: 700;
            color: var(--heading-font-color);
        }
        @media @tablet {
            .inscription {
                bottom: 35px;
                left: 35px;
                font-size: 2.7rem;
            }
        }
    }
</style>
