Add masonry layout and small fixes

src/widgets/section/section.tsx

@@ -2,6 +2,7 @@
 
 import Link from "next/link";
 import { useRouter } from "next/navigation";
+import Masonry, { ResponsiveMasonry } from "react-responsive-masonry";
 
 export const Section = ({
 	name,
@@ -17,7 +18,7 @@ export const Section = ({
 	const router = useRouter();
 
 	return (
-		<section className="w-full h-fit p-5 mb-20 pt-8">
+		<section className="w-full h-fit p-2 mb-20 pt-8">
 			{name && (
 				<h2
 					className="text-4xl pb-2 cursor-pointer w-fit"
@@ -26,12 +27,15 @@ export const Section = ({
 					{name}
 				</h2>
 			)}
-			<div className="grid grid-cols-1 tb:grid-cols-2 lp:grid-cols-3 gap-y-10 gap-x-3">
-				{children}
-			</div>
+			<ResponsiveMasonry columnsCountBreakPoints={{ 0: 1, 640: 2, 1024: 3 }}>
+				<Masonry gutter="1rem">{children}</Masonry>
+			</ResponsiveMasonry>
 			{link && invite_text && (
 				<div className="w-full flex justify-end pt-5">
-					<Link href={link} className="text-lg">
+					<Link
+						href={link}
+						className="text-lg hover:underline underline-offset-4"
+					>
 						{invite_text}
 					</Link>
 				</div>