src/pages/index.astro

---
import Card from '../components/Card.astro';
import Header from '../components/Header';
import Footer from '../components/Footer/Footer.vue';

const remoteData = await fetch('https://css-tricks.com/wp-json/wp/v2/posts?per_page=12&_embed').then(response => response.json());
---

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>CSS-Trickzz</title>
    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>⭐️</text></svg>">
    <link rel="stylesheet" href="/style/global.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;700&display=swap" rel="stylesheet">

    <style lang="scss">
      .grid {
        --space: 4rem;
        margin: var(--space);
        gap: var(--space);
        display: grid;
        grid-template-columns: 3fr 2fr;
        @media (max-width: 850px) {
          grid-template-columns: 1fr 1fr;
          --space: 2rem;
        }
        @media (max-width: 550px) {
          grid-template-columns: 1fr;
          --space: 1.5rem;
        }
      }
    </style>
</head>

<body>
  <main>
    <Header />

    <div class="grid">
      {remoteData.map((post) => {
        return(
          <Card 
            title={post.title.rendered}
            link={post.link}
            excerpt={post.excerpt.rendered}
            featured_img={post.featured_media_src_url}
          />
        )
      })}
    </div>

    <Footer client:visible />
  </main>
</body>

</html>