fix: update breakpoint styles for iPad and more

package.json

@@ -18,7 +18,7 @@
     ]
   },
   "engines": {
-    "node": ">=18.12.1 <19",
+    "node": ">=18.12.1 <21",
     "pnpm": ">=8"
   },
   "dependencies": {

src/app/[lang]/(DynamicLayout)/projects/[slug]/page.tsx

@@ -118,7 +118,7 @@ export default async function ProjectPage({ params: { slug, lang } }: IProps) {
 		<div className={themeStyle}>
 			<div className="flex h-full min-h-screen flex-col bg-skin-background text-skin-text dark:bg-skin-background-dark dark:text-skin-text-dark">
 				<div className="grow">
-					<div className="my-16 flex w-full flex-col items-center px-4 sm:px-56">
+					<div className="my-16 flex w-full flex-col items-center px-4 md:px-16 lg:px-24 2xl:px-56">
 						<div className="w-full max-w-full break-words px-4 sm:!max-w-4xl md:break-normal">
 							<div className="flex justify-between">
 								<TextHeader>

src/app/[lang]/(StaticLayout)/page.tsx

@@ -98,15 +98,15 @@ export default async function Page({ params: { lang } }: IProps) {
 		<div className="flex h-full min-h-screen flex-col overflow-hidden bg-skin-background text-skin-text dark:bg-skin-background-dark dark:text-skin-text-dark">
 			<Header title={t('hero.title')} description={t('hero.description')} />
 			<div className="grow">
-				<div className="my-16 flex w-full flex-col items-center px-4 sm:px-56">
+				<div className="my-16 flex w-full flex-col items-center px-4 md:px-16 lg:px-24 2xl:px-56">
 					<div className="w-full">
 						<TextHeader>
 							{t('page.featured.left')}
 							<span className="text-skin-heading dark:text-skin-heading-dark">
 								{t('page.featured.right')}
 							</span>
 						</TextHeader>
-						<div className="grid h-[40rem] gap-6 md:h-[24rem] md:grid-cols-3">
+						<div className="grid h-[40rem] gap-6 md:grid-cols-2 lg:h-[24rem] lg:grid-cols-3">
 							{featuredProjectsHtml.length > 0 ? (
 								featuredProjectsHtml
 							) : (

src/app/[lang]/(StaticLayout)/projects/page.tsx

@@ -67,7 +67,7 @@ export default async function Page({ params: { lang } }: IProps) {
 				description="A list of all the projects organized by Hololive EN Fan servers!"
 			/>
 			<div className="grow">
-				<div className="my-16 flex w-full flex-col items-center px-4 sm:px-56">
+				<div className="my-16 flex w-full flex-col items-center px-4 md:px-16 lg:px-24 2xl:px-56">
 					<div className="grid w-full grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3">
 						{projectsHtml.length > 0 ? (
 							projectsHtml

src/components/ui/ProjectFeaturedCard.tsx

@@ -24,7 +24,7 @@ export default function ProjectFeaturedCard({ project, lang }: IProps) {
 			<div className="absolute bottom-0 z-10 w-full rounded-b-lg">
 				<div className="relative">
 					<div className="absolute bottom-0 -z-1 h-full w-full bg-skin-header/50 text-white mix-blend-exclusion blur-[12px] backdrop-blur-[12.5px]" />
-					<div className="z-10 flex items-center justify-between p-6">
+					<div className="z-10 flex items-center justify-between gap-4 p-6">
 						<span className="text-lg text-white">
 							{project.title}
 						</span>