fix: redesign 'Latest News' section in Community Newsroom

components/campaigns/AnnouncementHero.tsx

@@ -60,7 +60,7 @@ export default function AnnouncementHero({ className = '', small = false }: IAnn
             <ArrowLeft className='text-white' />
           </div>
         )}
-        <div className='relative flex w-5/6 flex-col items-center justify-center gap-2'>
+        <div className='relative flex w-4/5 md:w-5/6 flex-col items-center justify-center gap-2'>
           <div className='relative flex min-h-72 w-full justify-center overflow-hidden lg:h-[17rem] lg:w-[38rem]'>
             {visibleBanners.map((banner, index) => {
               // Only render the active banner

components/newsroom/Newsroom.tsx

@@ -61,17 +61,17 @@ export default function Newsroom() {
             Read about what people are <br /> saying about AsyncAPI
           </Paragraph>
           <div className='my-5' data-testid='Newsroom-Twitter-Link'>
-            <TextLink href='https://twitter.com/AsyncAPISpec' className='mt-4' target='_blank'>
+            <TextLink href='https://twitter.com/AsyncAPISpec' className='mt-4 flex items-center' target='_blank'>
               Follow us on Twitter
-              <ArrowRight className='inline w-6' />
+              <ArrowRight className='ml-2 w-6' />
             </TextLink>
           </div>
         </div>
 
-        <div className='w-full flex-row items-stretch justify-between md:flex md:h-120 lg:w-3/4'>
-          <div className='relative flex w-full flex-col overflow-y-auto md:w-1/2'>
+        <div className='w-full flex-row items-stretch justify-between md:flex lg:w-3/4'>
+          <div className='relative flex max-h-96 w-full flex-col overflow-y-auto'>
             <div className='min-h-0'>
-              <div className='md:t-0 md:b-0 md:l-0 md:r-0 size-full md:absolute'>
+              <div className='size-full'>
                 <NewsroomArticle />
               </div>
             </div>