mahee-auffret/pages/contact.vue

<template>
    <main id="contact">
        <div>
            <img 
                :src="`/imgs/small/${globalData.contact_image}.webp`"
                :alt="globalData.contact_image_titre"
            />
        </div>
        <div>
            <p>{{ globalData.contact_text }}</p>
            <a :href="'mailto:' + globalData.email">{{ globalData.email }}</a>
        </div>
    </main>
</template>

<script>
export default {
    async setup() {

        let globalData = await useFetchGlobalData();
        globalData = globalData.globalData._object.$sglobalData;

        return {
            globalData
        }
    }
}
</script>

<style lang="scss">
    #contact {
        display: flex;
        flex-direction: column;
        > div:first-of-type {
            width: 40vw;
            > img {
                width: 100%;
            }
        }
        > div:last-of-type {
            margin-top: 2rem;
            > p {
                line-height: 1.2;
                margin-bottom: 1.5rem;
            }
        }
    }

    @media screen and (min-width: 800px) {
        #contact {
            flex-direction: row;
            > div:first-of-type {
                width: 30vw;
            }
            > div:last-of-type {
                width: 40vw;
                margin-left: 2rem;
                align-self: flex-end;
            }
        }
    }

    @media screen and (min-width: 1200px) {
        #contact {
            > div:first-of-type {
                width: 15vw;
            }
            > div:last-of-type {
                width: 30vw;
            }
        }
    }
</style>