diff --git a/docs/nx-cloud/intro/ci-with-nx.md b/docs/nx-cloud/intro/ci-with-nx.md
index 76bcbb4707..d27830471f 100644
--- a/docs/nx-cloud/intro/ci-with-nx.md
+++ b/docs/nx-cloud/intro/ci-with-nx.md
@@ -18,7 +18,7 @@ npx nx connect
 
 ## Learn about Nx on CI
 
-{% cards cols="2" lgCols="6" mdCols="4" smCols="2" %}
+{% cards cols="2" lgCols="4" mdCols="4" smCols="2" %}
 
 {% link-card title="What is Nx Cloud?" type="video" url="https://youtu.be/NZF0ZJpgaJM" icon="nxcloud" /%}
 
@@ -47,7 +47,7 @@ npx nx g ci-workflow
 
 ...or choose from our CI recipes with copy & pasteable code:
 
-{% cards cols="3" lgCols="8" mdCols="6" smCols="5"  %}
+{% cards cols="3" lgCols="6" mdCols="6" smCols="5"  %}
 
 {% link-card title="GitHub Actions" url="/ci/recipes/set-up/monorepo-ci-github-actions" icon="github" appearance="small" /%}
 {% link-card title="Circle CI" url="/ci/recipes/set-up/monorepo-ci-circle-ci" icon="circleci" appearance="small" /%}
diff --git a/docs/shared/plugins/intro.md b/docs/shared/plugins/intro.md
index a0368184bf..80319e67ca 100644
--- a/docs/shared/plugins/intro.md
+++ b/docs/shared/plugins/intro.md
@@ -15,7 +15,7 @@ Nx plugins contain [generators](/core-features/plugin-features/use-code-generato
 
 Nx plugins help you scaffold new projects, pre-configure tooling, follow best practices, and modularize your codebase.
 
-{% cards cols="2" %}
+{% cards cols="3" %}
 
 {% card title="Browse Existing Plugins" description="Find a plugin to use" url="/plugin-registry" /%}
 {% card title="Use Task Executors" description="Run operations on your code" url="/core-features/plugin-features/use-task-executors" /%}
diff --git a/nx-dev/ui-markdoc/src/lib/tags/cards.component.tsx b/nx-dev/ui-markdoc/src/lib/tags/cards.component.tsx
index c448856848..1503c39dc1 100644
--- a/nx-dev/ui-markdoc/src/lib/tags/cards.component.tsx
+++ b/nx-dev/ui-markdoc/src/lib/tags/cards.component.tsx
@@ -52,9 +52,9 @@ const lgColsClasses: Record<number, string> = {
 
 export function Cards({
   cols = 2,
-  smCols = 3,
-  mdCols = 4,
-  lgCols = 4,
+  smCols = cols,
+  mdCols = smCols,
+  lgCols = mdCols,
   children,
   moreLink,
 }: {
@@ -65,10 +65,6 @@ export function Cards({
   children: ReactNode;
   moreLink?: string;
 }): JSX.Element {
-  const calcCols = (cols: number, size: '' | 'lg' | 'md' | 'sm') => {
-    if (size === '') return `grid-cols-${cols}`;
-    return `${size}:grid-cols-${cols}`;
-  };
   // <div className="mt-8 grid grid-cols-2 lg:grid-cols-5 md:grid-cols-3 sm:grid-cols-2 gap-4">
   return (
     <div