paulnicoue/pages/index.vue

<template>

    <main>
        <HeroTitle class="hero-title" />
        <ContactSection class="contact-section" />
    </main>

</template>

<script setup>

    // --------------------------------------------------
    // HEAD
    // --------------------------------------------------

    definePageMeta({
        pageTitleChunk: null
    })

</script>

<style lang="scss" scoped>

    // --------------------------------------------------
    // LAYOUT
    // --------------------------------------------------

    main {
        width: 100%;
        padding: 2rem;
        display: grid;
        grid:
            'hero-title' auto
            'contact-section' auto
            / 1fr;
        place-content: start center;
        place-items: start center;
        row-gap: 4rem;

        .hero-title {
            grid-area: hero-title;
        }

        .contact-section {
            grid-area: contact-section;
        }

        @media screen and (min-width: $tablet-media-query) {
            padding: 2rem 4rem;
        }

        @media screen and (min-width: $desktop-media-query) {
            padding: 2rem 6rem;
        }
    }

</style>