<s-stack gap="base">
  <s-text type="strong">Narrow container (375px)</s-text>
  <s-box inlineSize="375px">
    <s-query-container>
      <s-grid
        gridTemplateColumns="@container (inline-size > 400px) 1fr 1fr 1fr, 1fr"
        gap="base"
      >
        <s-grid-item>
          <s-box padding="small" background="subdued">
            <s-text>Item 1</s-text>
          </s-box>
        </s-grid-item>
        <s-grid-item>
          <s-box padding="small" background="subdued">
            <s-text>Item 2</s-text>
          </s-box>
        </s-grid-item>
        <s-grid-item>
          <s-box padding="small" background="subdued">
            <s-text>Item 3</s-text>
          </s-box>
        </s-grid-item>
      </s-grid>
    </s-query-container>
  </s-box>

  <s-text type="strong">Wide container (450px)</s-text>
  <s-box inlineSize="450px">
    <s-query-container>
      <s-grid
        gridTemplateColumns="@container (inline-size > 400px) 1fr 1fr 1fr, 1fr"
        gap="base"
      >
        <s-grid-item>
          <s-box padding="small" background="subdued">
            <s-text>Item 1</s-text>
          </s-box>
        </s-grid-item>
        <s-grid-item>
          <s-box padding="small" background="subdued">
            <s-text>Item 2</s-text>
          </s-box>
        </s-grid-item>
        <s-grid-item>
          <s-box padding="small" background="subdued">
            <s-text>Item 3</s-text>
          </s-box>
        </s-grid-item>
      </s-grid>
    </s-query-container>
  </s-box>
</s-stack>
