curl --request POST \
  --url https://api.iotools.cloud/v1/tool/css-container-query-generator \
  --header 'Authorization: Bearer <token>' \
  --header 'Content-Type: application/json' \
  --data '
{
  "containerName": "sidebar",
  "containerType": "inline-size",
  "conditionType": "min-width",
  "minWidthPx": "400",
  "maxWidthPx": "700",
  "styleProperty": "--theme",
  "styleValue": "dark",
  "declarations": "display: flex;\n  flex-direction: row;\n  gap: 1rem;"
}
'

{
  "tool": "css-container-query-generator",
  "tool_version": "1.0.1",
  "outputs": {
    "cssCode": ".container {\n  container-type: inline-size;\n  container-name: sidebar;\n}\n\n@container sidebar (min-width: 400px) {\n  .card {\n    display: flex;\n    flex-direction: row;\n    gap: 1rem;\n  }\n}",
    "htmlCode": "<div class=\"container\" style=\"resize: horizontal; overflow: auto; width: 320px; min-width: 160px; max-width: 100%; padding: 8px; border: 1px dashed #94a3b8; border-radius: 8px;\">\n  <div class=\"card\">\n      <strong>Card title</strong>\n      <p style=\"margin: 4px 0 0;\">Drag the container's bottom-right handle to resize it.</p>\n    </div>\n</div>",
    "previewCss": ".card {\n  padding: 12px;\n  border-radius: 8px;\n  background: #eef2ff;\n  border: 1px solid #c7d2fe;\n}\n\n.container {\n  container-type: inline-size;\n  container-name: sidebar;\n}\n\n@container sidebar (min-width: 400px) {\n  .card {\n    display: flex;\n    flex-direction: row;\n    gap: 1rem;\n  }\n}"
  },
  "credits_used": 3,
  "credits_remaining": null
}