<template>
    <section class="properties">
        <div class="properties__contents">
            <property-item
                v-for="item in dataSource"
                :key="item.title"
                :data-source="item"
            />
        </div>
    </section>
</template>
<script>
import propertyItem from "./home_property_item";

export default {
    name: "HomePropertiesSection",
    components: {
        propertyItem
    },
    props: {
        dataSource: {
            required: true,
            type: Array
        }
    }
}
</script>
<style lang="scss" scoped>
.properties {
    content-visibility: auto;
    padding: $padding-default*2 0;
    position: relative;

    &__contents {
        margin: 0 auto;
        max-width: $app-max-width;
    }

    @media (min-width: $tablet) {
        content-visibility: unset;
        padding: 0;
        z-index: 4;

        &__contents {
            margin-top: -50px;
            position: relative;
        }
    }
}
</style>