fix: most recent posts should be cut off at right side on mobile, closes #101

src/containers/HomePage/HomePage.tsx

@@ -3,6 +3,7 @@ import styled from '@emotion/styled'
 import React, { useMemo } from 'react'
 import { Hero } from '../../components/Hero'
 import { PostsGrid } from '../../components/PostsGrid'
+import { uiConfigs } from '../../configs/ui.configs'
 import { useRecentPosts } from '../../queries/useRecentPosts.query'
 import { LPE } from '../../types/lpe.types'
 import { lsdUtils } from '../../utils/lsd.utils'
@@ -35,6 +36,8 @@ export const HomePage: React.FC<HomePageProps> = ({
   return (
     <Root {...props}>
       <Hero tags={tags} />
+      <MostRecentContainer>
+        <Container>
           <PostsGrid
             posts={group1}
             horizontal
@@ -55,6 +58,9 @@ export const HomePage: React.FC<HomePageProps> = ({
               },
             ]}
           />
+        </Container>
+      </MostRecentContainer>
+      <Container>
         <PostsGrid
           bordered
           posts={highlighted.slice(0, 1)}
@@ -130,6 +136,7 @@ export const HomePage: React.FC<HomePageProps> = ({
         )}
 
         <PodcastShowsPreview data={{ shows }} />
+      </Container>
     </Root>
   )
 }
@@ -164,3 +171,18 @@ const Root = styled('div')`
     margin-top: 40px;
   }
 `
+
+const MostRecentContainer = styled.div`
+  ${(props) => lsdUtils.breakpoint(props.theme, 'xs', 'exact')} {
+    & > div {
+      padding: 0;
+      padding-left: var(--main-content-padding);
+    }
+  }
+`
+
+const Container = styled.div`
+  @media (max-width: ${uiConfigs.maxContainerWidth}px) {
+    padding: 0 var(--main-content-padding);
+  }
+`