paulnicoue/components/ContactSection.vue

<template>

    <section id="contact" class="contact">
        <ContactHeader class="contact__header" />
        <ContactForm class="contact__form" />
    </section>

</template>

<script setup>
</script>

<style lang="scss" scoped>

    // --------------------------------------------------
    // STYLE
    // --------------------------------------------------

    .contact {
        max-width: var(--regular-content-max-width);
        display: grid;
        grid:
            'header' auto
            'form' auto
            / 1fr;
        place-content: start stretch;
        place-items: start stretch;
        row-gap: 4rem;

        &__header {
            grid-area: header;
        }

        &__form {
            grid-area: form;
        }

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

        @media screen and (min-width: $desktop-media-query) {
            grid:
                'header form' auto
                / 1fr 2fr;
            column-gap: 6rem;
        }
    }

</style>