Card

    () => (
      <Stack gap="m">
        <Card
          maxWidth={50}
          borderSide="all"
        >
          {demoText.m}
        </Card>
        <Card
          borderSide="all"
        >
          {demoText.xl}
        </Card>
      </Stack>
    )

    <Card
      borderSide="all"
      maxWidth={30}
      padding={0}
      overflow="hidden"
    >      
      <DemoImage aspectRatio="4/3"/>
      <Card>
        {demoText.s}
      </Card>
    </Card>
  

    () => (
      <Arrange 
        gap="m" 
        columns="repeat(auto-fit, minmax(360px, 1fr))"
      >
        <Card borderSide="all">
          {demoText.m}
        </Card>
        <Card borderSide="all">
          {demoText.m}
        </Card>
      </Arrange>
    )

    () => (
      <Flex gap="m">
        <Card flex="1 0 360px" borderSide="all">
          {demoText.m}
        </Card>
        <Card flex="1 0 360px" borderSide="all">
          {demoText.m}
        </Card>
      </Flex>
    )