export default function Example() { const StyledText = styled("p", { overflow: "wrap", width: "100px", }); const Container = styled({ padding: theme.space["100"], }); return ( <Box css={{ display: "flex", justifyContent: "center", width: "100%", flexWrap: "wrap", gap: "$100", }} > <ul style={{ display: "flex", listStyleType: "none" }}> <li style={{ marginRight: "10px" }}> <Card css={{ display: "flex", alignItems: "center", flexDirection: "column", padding: "0", maxWidth: "211px", }} > <img height="140" width="210" layout="fixed" alt="Vibrant quinoa bowl with carrots, tomatoes, and cucumbers" src="https://images.pexels.com/photos/1640777/pexels-photo-1640777.jpeg" /> <Container> <StyledText> How Saria makes ready-to-eat <a href="">quinoa bowls</a> with lots of veggies. </StyledText> </Container> </Card> </li> <li> <Card css={{ display: "flex", alignItems: "center", flexDirection: "column", padding: "0", maxWidth: "211px", }} > <img height="140" width="210" layout="fixed" alt="Pad thai plated with atop a green tablecloth." src="https://images.pexels.com/photos/12481161/pexels-photo-12481161.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" /> <Container> <StyledText> This <a href="">pad thai</a> with chicken and shrimp only takes 15 minutes to prepare! </StyledText> </Container> </Card> </li> </ul> </Box> ); }