fix: featured items heading position (#3837)

src/components/FeaturedItems/FeaturedItems.astro

@@ -9,13 +9,15 @@ export interface Props {
 const { featuredItems, heading } = Astro.props;
 ---
 
-<div class='py-4 sm:py-14 border-b border-b-[#1e293c] relative'>
+<div class='relative border-b border-b-[#1e293c] py-10 sm:py-14'>
   <div class='container'>
-    <h2 class='hidden sm:flex absolute rounded-lg -top-[17px] left-1/2 -translate-x-1/2 bg-slate-900 py-1 px-3 border border-[#1e293c] text-md text-slate-400 font-regular'>
+    <h2
+      class='text-md font-regular absolute flex rounded-lg border border-[#1e293c] bg-slate-900 px-3 py-1 text-slate-400 -top-[17px] sm:left-1/2 sm:-translate-x-1/2'
+    >
       {heading}
     </h2>
 
-    <ul class='grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-2'>
+    <ul class='grid grid-cols-1 gap-2 sm:grid-cols-2 md:grid-cols-3'>
       {
         featuredItems.map((featuredItem) => (
           <li>

src/pages/index.astro

@@ -23,7 +23,7 @@ const videos = await getAllVideos();
 >
   <div class='bg-gradient-to-b from-slate-900 to-black'>
     <div class='border-b border-b-[#1e293c]'>
-      <div class='container text-left sm:text-center py-6 sm:py-20 px-6 sm:px-0'>
+      <div class='container text-left sm:text-center py-6 pb-14 sm:py-20 px-6 sm:px-0'>
         <h1
           class='text-2xl sm:text-5xl mb-2 sm:mb-4 font-bold bg-gradient-to-b from-amber-50 to-purple-500 text-transparent bg-clip-text'
         >