<template>

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

</template>

<script setup>
</script>

<style lang="scss" scoped>

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

    .contact {
        position: relative;
        display: grid;
        grid:
            'header' auto
            'form' auto
            / 1fr;
        place-content: start stretch;
        place-items: start stretch;
        row-gap: 4rem;

        &::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 1px;
            background: linear-gradient(90deg, var(--primary-color), var(--primary-color-light), var(--primary-color));
        }

        &__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>
