---
    import * as m from '@/messages';
    import { Image } from 'astro:assets';
    import Stack from '@/lib/components/Stack/Stack.svelte';
    import Grid from '@/lib/components/Grid/Grid.svelte';
    import image1 from '../../assets/images/person_looking_at_computer.svg';
    import image2 from '../../assets/images/world_connected.svg';
---

<article class="rhythm zm-article">
    <Stack gap="xl" class="zm-article__inner">
        <Grid cols={2} gap="xl">
            <div>
                <Image src={image1} alt={m.img1Alt()} class="zm-article-image" />
            </div>
            <div>
                <h2>{m.infoHeading1()}</h2>
                <p class="preamble">{m.infoPreamble()}</p>
                <p>{m.infoTextParagraph1()}</p>
                <p><strong>{m.infoTextStrong()}</strong> {m.infoTextParagraph2()}</p>
            </div>
        </Grid>
    </Stack>
    <Stack gap="xl">
        <Grid cols={2} gap="xl">
            <div>
                <h2>{m.infoHeading2()}</h2>
                <p>{m.infoTextParagraph3}</p>
            </div>
            <div>
                <Image src={image2} alt={m.img2Alt()} class="zm-article-image" />
            </div>
        </Grid>
    </Stack>
</article>
