<>
<s-box inlineSize="375px">
  <s-query-container id="product-section" containerName="product">
    <s-box padding="@container product (inline-size > 400px) large-500, none" borderWidth="base" borderColor="base" borderRadius="base">
      <s-text>Padding is different depending on the container size</s-text>
    </s-box>
  </s-query-container>
</s-box>

<s-box inlineSize="450px">
  <s-query-container id="product-section" containerName="product">
    <s-box padding="@container product (inline-size > 400px) large-500, none" borderWidth="base" borderColor="base" borderRadius="base">
      <s-text>Padding is different depending on the container size</s-text>
    </s-box>
  </s-query-container>
</s-box>
</>