1 files changed, 35 insertions, 11 deletions
diff --git a/src/components/widgets/Pricing.astro b/src/components/widgets/Pricing.astro
index 4ab5279..ce2dd50 100644
--- a/src/components/widgets/Pricing.astro
+++ b/src/components/widgets/Pricing.astro
@@ -21,7 +21,7 @@ const {
 <WidgetWrapper
   id={id}
   isDark={isDark}
-  containerClass={`max-w-7xl mx-auto ${classes?.container ?? ''}`}
+  containerClass={`mx-auto ${classes?.container ?? ''}`}
   bg={bg}
 >
   <Headline
@@ -35,15 +35,15 @@ const {
     }}
   />
   <div class="mt-12">
-    <div class="row-gap-8 md:grid md:grid-cols-2 md:gap-8">
-      {
-        items && items.length > 0 && items.map((item, index) => (
-          <div class={index % 2 === 0 ? "mb-6 md:mb-0" : ""}>
-            <div class="mb-6">
+    <div class="md:flex md:gap-8">
+      <div class="md:w-1/2">
+        {
+          items && items.length > 0 && items.filter((_, index) => index % 2 === 0).map((item) => (
+            <div class="mb-8">
               {item.title && (
-                <h3 class="text-2xl font-bold tracking-tight dark:text-white sm:text-3xl mb-4">{item.title}</h3>
+                <h3 class="text-lg font-medium leading-6 dark:text-white mb-4">{item.title}</h3>
               )}
-              <hr class="mb-4">
+              <hr class="mb-8">
               {item.entries && item.entries.length > 0 && (
                 <table class="w-full border-collapse">
                   <tbody>
@@ -57,9 +57,33 @@ const {
                 </table>
               )}
             </div>
-          </div>
-        ))
-      }
+          ))
+        }
+      </div>
+      <div class="md:w-1/2">
+        {
+          items && items.length > 0 && items.filter((_, index) => index % 2 === 1).map((item) => (
+            <div class="mb-8">
+              {item.title && (
+                <h3 class="text-lg font-medium leading-6 dark:text-white mb-4">{item.title}</h3>
+              )}
+              <hr class="mb-8">
+              {item.entries && item.entries.length > 0 && (
+                <table class="w-full border-collapse">
+                  <tbody>
+                    {item.entries.map((entry) => (
+                      <tr class="h-12">
+                        <td class="w-1/2 h-12 px-4 text-muted dark:text-slate-400" set:html={entry.description}></td>
+                        <td class="w-1/2 text-right h-12 px-4 text-muted dark:text-slate-400">{entry.price}</td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              )}
+            </div>
+          ))
+        }
+      </div>
     </div>
   </div>