PostList A2

<ul
  sx={{
    listStyle: 'none',
    display: 'grid',
    gridGap: 3,
    gridTemplateColumns: 'repeat(auto-fit, minmax(256px, 1fr))',
    m: 0,
    px: 3,
    py: 4,
  }}>
  {posts.map((post) => (
    <li key={post.id} sx={{}}>
      <Themed.h2
        sx={{
          m: 0,
        }}>
        <Link
          to={post.slug}
          sx={{
            color: 'inherit',
            textDecoration: 'none',
            ':hover,:focus': {
              color: 'primary',
              textDecoration: 'underline',
            },
          }}>
          {post.title}
        </Link>
      </Themed.h2>
      <small sx={{ fontWeight: 'bold' }}>{post.date}</small>
      <Themed.p
        sx={{
          m: 0,
        }}>
        {post.excerpt}
      </Themed.p>
    </li>
  ))}
</ul>
<ul
  sx={{
    listStyle: 'none',
    display: 'grid',
    gridGap: 3,
    gridTemplateColumns: 'repeat(auto-fit, minmax(256px, 1fr))',
    m: 0,
    px: 3,
    py: 4,
  }}>
  {posts.map((post) => (
    <li key={post.id} sx={{}}>
      <Themed.h2
        sx={{
          m: 0,
        }}>
        <Link
          to={post.slug}
          sx={{
            color: 'inherit',
            textDecoration: 'none',
            ':hover,:focus': {
              color: 'primary',
              textDecoration: 'underline',
            },
          }}>
          {post.title}
        </Link>
      </Themed.h2>
      <small sx={{ fontWeight: 'bold' }}>{post.date}</small>
      <Themed.p
        sx={{
          m: 0,
        }}>
        {post.excerpt}
      </Themed.p>
    </li>
  ))}
</ul>