<template>

    <article class="project">
        <ProjectImage
            class="project__image"
            :title="title"
            :url="url"
            :screenshot="screenshot"
        />
        <ProjectData
            class="project__data"
            :title="title"
            :url="url"
            :description="description"
            :keywords="keywords"
        />
    </article>

</template>

<script setup>

    // --------------------------------------------------
    // DATA
    // --------------------------------------------------

    defineProps({
        title: String,
        url: String,
        screenshot: String,
        description: String,
        keywords: Array
    });

</script>

<style lang="scss">

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

    .project {
        display: flex;
        flex-direction: column;
        gap: 2rem;

        @media screen and (min-width: $desktop-media-query) {
            align-items: center;
            gap: 4rem;

            &:nth-of-type(odd) {
                flex-direction: row;

                .project__data {
                    align-items: flex-end;
                    text-align: right;

                    ul {
                        justify-content: flex-end;
                    }
                }
            }

            &:nth-of-type(even) {
                flex-direction: row-reverse;

                .project__data {
                    align-items: flex-start;
                    text-align: left;

                    ul {
                        justify-content: flex-start;
                    }
                }
            }

            &__image {
                width: 65%;
            }

            &__data {
                width: 35%;
            }
        }
    }

</style>
