Feat: add mobile (440-768px) styles

app/Section/Photos.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import Link from "next/link";
+import { Section } from "../components/Section";
+import { IconWithText } from "../components/IconWithText";
+import { EmblaOptionsType } from "embla-carousel";
+import EmblaCarousel from "../components/Photos.Carousel";
+
+const links = [
+  {
+    icon: "/icons/ic_baseline-telegram.svg",
+    text: "Telegram",
+    desc: "@photowah",
+    url: "https://x.com/radiquum",
+  },
+  {
+    icon: "/icons/simple-icons_immich.svg",
+    text: "Gallery",
+    desc: "wah.su/photos",
+    url: "https://bsky.app/profile/@radiquum.wah.su",
+  },
+];
+
+const OPTIONS: EmblaOptionsType = { dragFree: true, loop: true };
+const SLIDES = [
+  "/images/photos/2024-06-14T19_32_04_024.JPG",
+  "/images/photos/2024-06-17T18_55_55_030.JPG",
+  "/images/photos/2024-06-17T19_44_15_068.JPG",
+  "/images/photos/2024-06-17T19_48_32_074.JPG",
+  "/images/photos/2024-06-22T20_17_57_001.JPG",
+  "/images/photos/image_2024-06-02_16-55-04.png",
+  "/images/photos/IMG_20230604_043911_43.JPG",
+  "/images/photos/IMG_20240710_225123.jpg",
+  "/images/photos/IMG_20240710_225448.jpg",
+  "/images/photos/IMG_20230602_190558.JPG",
+  "/images/photos/IMG_20230603_175135.JPG",
+];
+
+export const Photos = () => {
+  return (
+    <div className="flex flex-col gap-4">
+      <Section>
+        <div className="flex flex-col gap-2">
+          <h2 className="text-4xl">Photos</h2>
+          <div className="flex items-center gap-4">
+            {links.map((item) => (
+              <Link href={item.url} key={`photos.link.${item.text}`}>
+                <IconWithText
+                  icon={item.icon}
+                  text={item.text}
+                  desc={item.desc}
+                />
+              </Link>
+            ))}
+          </div>
+        </div>
+      </Section>
+      <EmblaCarousel slides={SLIDES} options={OPTIONS} />
+    </div>
+  );
+};