Tickets with toc magic.

Author: nikoshell

src/components/ticket-tiers/ticket-tiers.astro

@@ -134,7 +134,7 @@ const formatPrice = (price: number | string) => {
 ---
 
 <div class="ticket-tiers-container">
-  <div class="grid grid-cols-1 lg:grid-cols-3 gap-10 md:gap-6 lg:gap-10">
+  <div class="grid grid-cols-1 lg:grid-cols-3 gap-3 py-24">
     {
       tiers.map((tier) => (
         <div class="bg-white text-black rounded-2xl p-6 pb-20 relative not-prose z-0">
@@ -203,19 +203,30 @@ const formatPrice = (price: number | string) => {
 
 <style is:global>
   .ticket-tiers-container {
-    width: 100vw;
-    max-width: 1400px;
-    margin-left: 50%;
-    transform: translateX(-50%);
+    width: 97vw;
+    max-width: 1115px;
+    /*margin-left: 50%;*/
+    /*transform: translateX(-50%);*/
     position: relative;
-    padding: 0 40px;
+    /*padding: 0 40px;*/
+    background: linear-gradient( to top,
+rgba(245, 229, 214, 0) 0%,
+rgb(245, 229, 214) 5%,
+rgb(245, 229, 214) 95%,
+rgba(245, 229, 214, 0
+) 100% )
+;
   }
 
-  @media (max-width: 768px) {
+  @media (max-width: 1023px) {
     .ticket-tiers-container {
-      width: 100%;
-      padding: 0 10px;
-      position: relative;
+    max-width: 700px;
+    /*max-width: 95vw;*/
+      /*width: 100%;*/
+      /*width: 100vw;*/
+      /*padding: 0 10px;*/
+      /*position: relative;*/
+
     }
   }
 </style>

src/content/pages/tickets.mdx

@@ -2,7 +2,6 @@
 title: Tickets
 subtitle:
   Discover the latest Python trends, learn from 180+ expert speakers, network with fellow developers, enjoy social events, and explore open spaces to spark new ideas! Organized by the community for the community.
-toc: false
 ---
 
 import TicketTiers from "../../components/ticket-tiers/ticket-tiers.astro";