+ big verbiage update

components/sections/feats.tsx

@@ -1,31 +1,49 @@
 import Reveal from '@/components/ui/reveal';
 import SectionHeading from '@/components/ui/section-heading';
-import {feats} from '@/lib/site';
+import { feats } from '@/lib/site';
 
-const Feats = () => (
-	<section id="feats" className="container-page py-16">
-		<SectionHeading title="Leadership">
-			Operations and community work outside of code.
-		</SectionHeading>
+const Feats = () => {
+	const isOddTotal = feats.length % 2 === 1;
 
-		<ul className="grid panel sm:grid-cols-2">
-			{feats.map((feat, i) => (
-				<li
-					key={feat.title}
-					className="border-white/12 p-6 transition-colors not-last:border-b hover:bg-white/[0.04] sm:odd:border-r sm:odd:nth-last-2:border-b-0 md:p-7"
-				>
-					<Reveal delay={i * 60}>
-						<h3 className="font-display text-base font-normal text-ink">
-							{feat.title}
-						</h3>
-						<p className="mt-1.5 text-sm leading-relaxed text-ink/70">
-							{feat.detail}
-						</p>
-					</Reveal>
-				</li>
-			))}
-		</ul>
-	</section>
-);
+	return (
+		<section id="feats" className="container-page py-16">
+			<SectionHeading title="Leadership">
+				Operations and community work outside of code.
+			</SectionHeading>
+
+			<ul className="grid panel sm:grid-cols-2">
+				{feats.map((feat, i) => {
+					const isLast = i === feats.length - 1;
+					const isLastRow = isOddTotal
+						? isLast
+						: i >= feats.length - 2;
+					const isLeftCol = i % 2 === 0;
+					const colSpan = isOddTotal && isLast ? 'sm:col-span-2' : '';
+					const rightBorder =
+						isLeftCol && !(isOddTotal && isLast)
+							? 'sm:border-r'
+							: '';
+					const bottomBorder = isLastRow ? 'sm:border-b-0' : '';
+
+					return (
+						<li
+							key={feat.title}
+							className={`border-white/12 p-6 transition-colors not-last:border-b hover:bg-white/[0.04] md:p-7 ${colSpan} ${rightBorder} ${bottomBorder}`}
+						>
+							<Reveal delay={i * 60}>
+								<h3 className="font-display text-base font-normal text-ink">
+									{feat.title}
+								</h3>
+								<p className="mt-1.5 text-sm leading-relaxed text-ink/70">
+									{feat.detail}
+								</p>
+							</Reveal>
+						</li>
+					);
+				})}
+			</ul>
+		</section>
+	);
+};
 
 export default Feats;