<template>

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

</template>

<script setup>
</script>

<style lang="scss" scoped>

    // --------------------------------------------------
    // LAYOUT & STYLE
    // --------------------------------------------------

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

        &__decoration {
            grid-area: decoration;
        }

        &__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:
                'decoration header form' auto
                / auto 1fr 2fr;
            column-gap: 6rem;
        }
    }

</style>
