diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css
index f0817aa..57c8f65 100644
--- a/assets/css/v2/style.css
+++ b/assets/css/v2/style.css
@@ -206,17 +206,26 @@ textarea:not([rows]) {
 
   --flow-gap: 1rem;
 
-  /* @link https://utopia.fyi/type/calculator?c=320,16,1.2,1240,18,1.25,5,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
+  /* @link https://utopia.fyi/type/calculator?c=320,14,1.2,1240,16,1.25,5,3,&s=0.75,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
   /* ALWAYS use for fonts */
-  --font-step--3: clamp(0.576rem, 0.5796rem + -0.0047vw, 0.5787rem);
-  --font-step--2: clamp(0.6944rem, 0.6856rem + 0.0444vw, 0.72rem);
-  --font-step--1: clamp(0.8333rem, 0.8101rem + 0.1159vw, 0.9rem);
-  --font-step-0: clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem);
-  --font-step-1: clamp(1.2rem, 1.1283rem + 0.3587vw, 1.4063rem);
-  --font-step-2: clamp(1.44rem, 1.3295rem + 0.5527vw, 1.7578rem);
-  --font-step-3: clamp(1.728rem, 1.5648rem + 0.8161vw, 2.1973rem);
-  --font-step-4: clamp(2.0736rem, 1.8395rem + 1.1704vw, 2.7466rem);
-  --font-step-5: clamp(2.4883rem, 2.1597rem + 1.6433vw, 3.4332rem);
+  /* Step -3: 8.1019px → 8.192px */
+  --font-step--3: clamp(0.5064rem, 0.5044rem + 0.0098vw, 0.512rem);
+  /* Step -2: 9.7222px → 10.24px */
+  --font-step--2: clamp(0.6076rem, 0.5964rem + 0.0563vw, 0.64rem);
+  /* Step -1: 11.6667px → 12.8px */
+  --font-step--1: clamp(0.7292rem, 0.7045rem + 0.1232vw, 0.8rem);
+  /* Step 0: 14px → 16px */
+  --font-step-0: clamp(0.875rem, 0.8315rem + 0.2174vw, 1rem);
+  /* Step 1: 16.8px → 20px */
+  --font-step-1: clamp(1.05rem, 0.9804rem + 0.3478vw, 1.25rem);
+  /* Step 2: 20.16px → 25px */
+  --font-step-2: clamp(1.26rem, 1.1548rem + 0.5261vw, 1.5625rem);
+  /* Step 3: 24.192px → 31.25px */
+  --font-step-3: clamp(1.512rem, 1.3586rem + 0.7672vw, 1.9531rem);
+  /* Step 4: 29.0304px → 39.0625px */
+  --font-step-4: clamp(1.8144rem, 1.5963rem + 1.0904vw, 2.4414rem);
+  /* Step 5: 34.8365px → 48.8281px */
+  --font-step-5: clamp(2.1773rem, 1.8731rem + 1.5208vw, 3.0518rem);
 
   /* @link https://utopia.fyi/space/calculator?c=320,16,1.2,1240,18,1.25,5,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
   /* ALWAYS use for horizontal spacing */
@@ -515,19 +524,6 @@ ol li:last-child {
   }
 }
 
-.content {
-  grid-area: content;
-  justify-self: center;
-  padding: 0 var(--space-l) 2rem var(--space-l);
-  max-width: var(--content-max-width);
-
-  /* Allow redocly to fill the entire container */
-  &.content__redocly {
-    justify-self: unset;
-    max-width: unset;
-  }
-}
-
 .footer {
   grid-area: footer;
   padding: var(--space-l);
@@ -848,11 +844,82 @@ nav {
 /* MARK: Main content
 */
 
-.content-layout {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  grid-template-rows: 1fr;
-  z-index: 1;
+.content {
+  grid-area: content;
+  justify-self: center;
+  padding: 0 var(--space-l) 2rem var(--space-l);
+  max-width: var(--content-max-width);
+
+  & > *,
+  & > ul,
+  & > ol {
+    display: grid;
+    grid-template-columns: 1fr;
+    /* These gaps determine the spacing between all content. Be careful!! */
+    gap: var(--space-m) var(--space-m);
+
+    /* Handles some strangeness where single-line codeblocks caused
+   horizon */
+    ol:has(.highlight-v2),
+    ul:has(.highlight-v2) {
+      min-width: 0;
+      max-width: 100%;
+    }
+
+    > *:not([data-grid]),
+    > li:not([data-grid]) {
+      grid-column: 1;
+    }
+
+    [data-grid="wide"] {
+      grid-column: 1;
+    }
+    [data-grid="first-third"] {
+      grid-column: 1;
+    }
+    [data-grid="last-third"] {
+      grid-column: 1;
+    }
+    [data-grid="halve"] {
+      grid-column: 1;
+    }
+
+    @media (min-width: 55rem) {
+      max-width: var(--content-max-width);
+      grid-template-columns: repeat(var(--grid-columns), 1fr);
+
+      > *:not([data-grid]),
+      > li:not([data-grid]) {
+        grid-column: 1 / 8;
+      }
+
+      [data-grid="wide"] {
+        grid-column: 1 / -1;
+      }
+
+      [data-grid="first-third"] {
+        grid-column: 1 / 4;
+      }
+
+      [data-grid="first-two-thirds"] {
+        grid-column: 1 / 8;
+      }
+
+      [data-grid="last-third"] {
+        grid-column: 8 / -1;
+      }
+
+      [data-grid="halve"] {
+        grid-column: span 6;
+      }
+    }
+  }
+
+  /* Allow redocly to fill the entire container */
+  &.content__redocly {
+    justify-self: unset;
+    max-width: unset;
+  }
 }
 
 #searchbox {
@@ -862,30 +929,7 @@ nav {
 }
 
 .breadcrumb-layout {
-  grid-column: 1 / -1;
-}
-
-.text-content {
-  grid-column: 1 / -1;
-  display: grid;
-  grid-template-columns: var(--grid-content-mobile);
-  column-gap: var(--grid-column-gutter);
-  margin-top: 2rem;
-  grid-auto-rows: max-content;
-  row-gap: var(--flow-gap);
-  justify-content: center;
-}
-
-.text-content > :not(.wide) {
-  grid-column: 1 / -1;
-}
-
-.text-content .wide {
-  grid-column: 1 / -1;
-}
-
-.text-content table {
-  width: 100%;
+  padding-top: 1rem;
 }
 
 main {
@@ -897,29 +941,6 @@ main {
     display: unset;
   }
 
-  .text-content {
-    grid-template-columns: var(--grid-content) var(--grid-side-callout);
-    grid-template-rows: 3rem max-content;
-    column-gap: var(--grid-column-gutter);
-  }
-
-  .text-content > :not(.wide) {
-    grid-column: 1;
-  }
-
-  .content-layout {
-    display: grid;
-    grid-template-columns: 1fr minmax(
-        auto,
-        calc(
-          var(--grid-content) +
-          var(--grid-side-callout) +
-          var(--grid-column-gutter)
-        )
-      ) 1fr;
-    column-gap: var(--grid-column-gutter);
-  }
-
   .navbar atomic-search-interface {
     margin: 0;
     display: block;
@@ -1353,14 +1374,18 @@ a:hover {
   text-decoration-color: oklch(var(--color-brand) / 0.8);
 }
 
+/* MARK: Typography */
+
 h1 {
-  font-size: 2rem;
-  margin: 0 0 1rem 0;
+  font-size: var(--font-step-3);
 }
 
 h2 {
-  font-size: 1.5rem;
-  margin: 1rem 0 0.75rem 0;
+  font-size: var(--font-step-2);
+}
+
+p {
+  font-size: var(--font-step-0);
 }
 
 h2:target,
@@ -1433,7 +1458,7 @@ h6:has(a):hover {
 }
 
 /* Landing page cards */
-.text-content .card-layout {
+.card-layout {
   grid-column: 1;
 
   .card-section {
@@ -1445,65 +1470,53 @@ h6:has(a):hover {
       font-weight: 500;
     }
 
-    /* Hide all the cards past 3 if it is a featured card section */
     &.featured-section {
-      .card-section-content.card-grid
-        > *:nth-child(n + 4 of div.card-container) {
+      /* Hide all the cards past 3 if it is a featured card section */
+      .card-section-content > *:nth-child(n + 4 of div.card) {
         display: none;
       }
     }
   }
-}
 
-/* Optional grid layout */
-.card-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(33%, 1fr));
-  gap: 1.5rem;
+  .card {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    margin-bottom: 1rem;
 
-  .card-container {
-    border: 1px solid oklch(var(--color-codeblock-border));
-    box-shadow: 3px 3px 0px oklch(var(--color-shadow));
-    padding: 1rem;
+    .card-header {
+      display: flex;
+      flex-direction: row;
+      gap: 0.5rem;
 
-    &.featured-card {
-      /* If there is a need for a featured card, only the featured card should be full length */
-      grid-column: 1 / -1;
+      .card-brand-icon {
+        height: 20px;
+        width: auto;
+      }
 
-      /* If there is a featured card AND two cards, the last one should be full length */
-      ~ .card-container:nth-child(2n):last-child {
-        grid-column: 1 / -1;
+      h2 {
+        padding: 0;
+        margin: 0;
+        font-size: 1rem;
       }
     }
   }
-
-  /* If there is no featured card, last card that is the 3rd one should be full width */
-  &:not(:has(.featured-card)) *:nth-child(n + 3 of div.card-container) {
-    grid-column: 1 / -1;
-  }
 }
 
-.card-container {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  margin-bottom: 1rem;
-
-  .card-header {
-    display: flex;
-    flex-direction: row;
-    gap: 0.5rem;
+/* Optional grid layout */
+.card-grid {
+  display: grid;
+  grid-template-columns: repeat(var(--grid-columns), 1fr);
+  gap: 1.5rem;
 
-    .card-brand-icon {
-      height: 20px;
-      width: auto;
-    }
+  @media (max-width: 55rem) {
+    grid-template-columns: 1fr;
+  }
 
-    h2 {
-      padding: 0;
-      margin: 0;
-      font-size: 1rem;
-    }
+  .card {
+    border: 1px solid oklch(var(--color-codeblock-border));
+    box-shadow: 3px 3px 0px oklch(var(--color-shadow));
+    padding: 1rem;
   }
 }
 
@@ -1637,7 +1650,6 @@ blockquote p:last-child {
 /* Maintain the split column for as long as possible */
 @media (min-width: 67rem) {
   blockquote.side-callout {
-    grid-column: 2 !important;
     align-self: start;
   }
 }
diff --git a/exampleSite/content/test-product/call-out/all-callouts.md b/exampleSite/content/test-product/call-out/all-callouts.md
index d09f70c..7e9868d 100644
--- a/exampleSite/content/test-product/call-out/all-callouts.md
+++ b/exampleSite/content/test-product/call-out/all-callouts.md
@@ -25,7 +25,7 @@ This is a plain callout with a default title for its type. It has a [link](#plai
 
 Naturally, callouts should contain less text within them than the text it lives next to. We do this for several reasons. Firstly, it looks weird to have a big empty space in the primary content area. Secondly, if you have more text in the callout, then it stops being a callout. I have asked an LLM to lengthen this passage.
 
-{{<call-out "side-callout">}}
+{{<call-out sideline="true">}}
 This is a plain side callout with no title. It has a [link](#plain-callouts) to a heading on this page. Its shortcode is `<call-out>` with the `.side-callout` class.
 {{</call-out>}}
 
@@ -33,7 +33,7 @@ When designing effective web layouts, it's important to maintain proper balance
 
 Additionally, concise callouts tend to be more effective at capturing user attention. When a callout becomes too verbose, users are less likely to read it entirely, defeating its purpose. The visual weight of callouts should align with their informational importance - brief, impactful statements create better engagement than lengthy explanations. Remember that white space itself is a powerful design element, creating visual breathing room that enhances readability and focus. Ultimately, the most successful callouts follow the principle of "less is more," delivering maximum impact through minimal interruption to the user's reading experience.
 
-{{<call-out "side-callout" "Custom title">}}
+{{<call-out sideline="true" title="Custom title">}}
 This is a plain side callout with a custom title. It has a [link](#plain-callouts) to a heading on this page. Its shortcode is `<call-out>` with the `.side-callout` class, and a custom title.
 {{</call-out>}}
 
@@ -84,4 +84,4 @@ This is `<before-you-begin>`.
 
 {{<see-also>}}
 This is `<see-also>`.
-{{</see-also>}}
\ No newline at end of file
+{{</see-also>}}
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index 6b7db67..f49bea0 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -1,16 +1,14 @@
 {{ define "main" }}
 
 <main class="content " role="main">
-<section class="main-layout">
-    <section id="maincontent" class="content-layout">
     <div data-cms-edit="content" class="text-content list-page">
-        <section class="breadcrumb-layout wide">
+        <div class="breadcrumb-layout wide">
         {{ if not .IsHome }}
             {{ if not (in .Params.display_breadcrumb "false" ) }}
             {{ partial "breadcrumb" .}}
             {{ end }}
         {{ end }}
-        </section>
+        </div>
         <div class="list-header-container">
           <img src="/images/icons/{{ .Params.logo | default "NGINX-product-icon.svg" }}">
           <div class="list-header-title">
@@ -42,8 +40,7 @@ <h2>
         {{ end }}
 
     </div>
-    </section>
-</section>
+
 </main>
 
 
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 9c5837b..9a699f1 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -1,28 +1,25 @@
 {{ define "main" }}
-
 <main class="content">
     <!-- Replace icons -->
     {{ $content := partial "icon-replacement.html" (dict "content" .Content) }}
 
-
-    <section class="main-layout">
-    <section id="maincontent" class="content-layout">
-        <div data-cms-edit="content" class="text-content">
-        <section class="breadcrumb-layout wide">
-            {{ if not .IsHome }}
-            {{ if not (in .Params.display_breadcrumb "false" ) }}
-            {{ partial "breadcrumb" .}}
-            {{ end }}
-            {{ end }}
-        </section>
+    <div class="breadcrumb-layout wide">
+        {{ if not .IsHome }}
+        {{ if not (in .Params.display_breadcrumb "false" ) }}
+        {{ partial "breadcrumb" .}}
+        {{ end }}
+        {{ end }}
+    </div>
+    <article data-cms-edit="content" >
         {{ partial "banner" .}}
+
         <h1>{{ .Title }}</h1>
+
         {{ $content | safeHTML }}
+
         {{ if eq .Page.Draft true }}{{ partial "draft-badge.html" . }}{{ end }}
         {{ if in .Params.doctypes "beta" }}{{ partial "beta-badge" . }}{{ end }}
 
-        <hr>
-
         {{ if .Page.Lastmod }}
         <div class="last-modified">
             {{ partial "page-meta-links" . }}
@@ -46,6 +43,4 @@ <h1>{{ .Title }}</h1>
 
 
 
-
-
 {{ end }}
diff --git a/layouts/partials/callout.html b/layouts/partials/callout.html
index 314137a..52bac5e 100644
--- a/layouts/partials/callout.html
+++ b/layouts/partials/callout.html
@@ -13,10 +13,10 @@
 {{ $sideOption := "side-callout" }}
 {{ $inlineOption := "inline-callout" }}
 
+{{/*  Default to inline callout  */}}
+{{ $dataGrid := "first-two-thirds" }}
 {{ if $sideline }}
-  {{ $class = printf "%s %s" $class $sideOption }}
-{{ else }}
-  {{ $class = printf "%s %s" $class $inlineOption }}
+  {{ $dataGrid = "last-third" }}
 {{ end }}
 
 {{/*  Render a different block, if "loud" callouts are used  */}}
@@ -33,7 +33,7 @@
 {{ $isSpecialTitle := in $specialTitles $type }}
 {{ if $isSpecialTitle }}
 {{/*  Loud callouts  */}}
-<blockquote class="{{ $class }}">
+<blockquote class="{{ $class }}" data-grid="{{ $dataGrid }}">
   <div>
     <div class="call-out-type">
       {{ partial "feather" (dict "context" . "icon" $icon) .}}
@@ -51,7 +51,7 @@
 
 {{ $cleanTitle := strings.TrimSuffix ":" $title}}
 
-<blockquote class="{{ $class }} note" data-title="{{ $cleanTitle }}">
+<blockquote class="{{ $class }} note" data-title="{{ $cleanTitle }}" data-grid="{{ $dataGrid }}">
   <div class="callout-content">
     {{- with $icon -}}
       <i class="{{ . }}"></i>
diff --git a/layouts/shortcodes/card.html b/layouts/shortcodes/card.html
index b4d5587..5b5b2dd 100644
--- a/layouts/shortcodes/card.html
+++ b/layouts/shortcodes/card.html
@@ -3,17 +3,30 @@
 {{- $icon := .Get "icon" | default "book-open" -}}
 {{- $brandIcon := .Get "brandIcon" -}}
 {{- $isFeaturedParam := .Get "isFeatured" | default "false" }}
+{{- $isFullSizeParam := .Get "isFullSize" | default "false" -}}
+
 {{- /* Validate the parameter strictly */ -}}
 {{- if not (in (slice "true" "false") $isFeaturedParam) -}}
   {{- warnf "The '<card>' Shortcode parameter 'isFeatured' must be 'true' or 'false', but got: '%s'. This will now default to 'false'" $isFeaturedParam -}}
 {{- end -}}
 {{- $isFeatured := cond (eq $isFeaturedParam "true") "true" "false" -}}
-{{- $current := .Page.Scratch.Get "cards" | default (slice) -}}
-{{- $newCard := dict "title" ($title) "content" (.Inner) -}}
-{{- .Page.Scratch.Set "cards" ($current | append $newCard) -}}
+
+{{- if not (in (slice "true" "false") $isFullSizeParam) -}}
+  {{- warnf "The '<card>' Shortcode parameter 'isFullSize' must be 'true' or 'false', but got: '%s'. This will now default to 'false'" $isFullSizeParam -}}
+{{- end -}}
+{{- $isFullSize := cond (eq $isFullSizeParam "true") "true" "false" -}}
+
+{{- /* Set up the positioning */ -}}
+{{ $dataGrid := "" }}
+{{ if or (eq $isFullSize "true") (eq $isFeatured "true") }}
+  {{ $dataGrid = "wide"}}
+{{ else }}
+  {{ $dataGrid = "halve"}}
+{{ end }}
+
 {{- /* Validate that the parent is card-section and under 3 cards */ -}}
 {{- if (eq .Parent.Name "card-section") -}}
-  <div class="card-container {{ if eq $isFeatured "true" }}featured-card{{ end }}">
+  <div class="card{{ if eq $isFeatured "true" }} featured-card{{ end }}" data-grid="{{ $dataGrid }}">
     {{- if $title -}}
       <div class="card-header">
         {{- if $brandIcon -}}