<style lang="scss">
    .discover {
        padding: 0 20px;
        font-family: $font-sans;
        font-size: rem(24px);
        font-weight: 200;
        line-height: 1.5;
        color: $color-tertiary;

        @include bp (sm) {
            font-size: rem(28px);
        }
        @include bp (md) {
            font-size: rem(32px);
        }

        strong {
            color: $color-secondary;
            font-weight: 200;
        }
    }
</style>

<script lang="ts">
    import { getContext } from 'svelte'

    const { count }: any = getContext('global')
</script>

<p class="discover">
    Discover <strong>{count.photos} homes</strong><br>
    from <strong>{count.locations} places</strong>
    in <strong>{count.countries} countries</strong>
</p>
