<template>
    <div class="event-recirc">
        <h3 class="header p-xs">Upcoming Events</h3>

        <event-list-item v-for="event in events" :event="event" type="recirc" />
    </div>
</template>

<script setup>
const props = defineProps({ events: Array })
</script>

<style lang="scss">
.event-recirc {
    .header {
        background: var(--theme-fg);
        color: var(--theme-bg);
        padding: desktop-vw(6.5px) desktop-vw(14px);
    }

    @include mobile {
        .header {
            padding: mobile-vw(6.5px) mobile-vw(14px);
        }
    }
}
</style>
