From 5c633e5f7a684255db1149964f0cb821f2e92887 Mon Sep 17 00:00:00 2001
From: poyrazavsever <poyrazavsever@hotmail.com>
Date: Tue, 1 Sep 2026 09:36:28 +0300
Subject: [PATCH] fix(content): reduce media density on mobile

---
 components/content-content.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/components/content-content.tsx b/components/content-content.tsx
index 539de31..0e80e45 100644
--- a/components/content-content.tsx
+++ b/components/content-content.tsx
@@ -109,10 +109,10 @@ export function ContentContent({
           />
         </div>
         <div className="grid gap-2 md:grid-cols-3">
-          {embeddedVideos.map((link) => (
+          {embeddedVideos.map((link, index) => (
             <Card
               key={link}
-              className="overflow-hidden rounded-sm border-border p-0"
+              className={`overflow-hidden rounded-sm border-border p-0 ${index > 0 ? "hidden md:block" : ""}`}
             >
               <YoutubeLiteEmbed link={link} title={t("youtubeEmbedTitle")} />
             </Card>
@@ -138,7 +138,7 @@ export function ContentContent({
               key={pdf.fileName}
               type="button"
               onClick={() => openPdfModal(index)}
-              className="cursor-pointer text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+              className={`cursor-pointer text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ${index > 1 ? "hidden md:block" : ""}`}
               aria-label={t("openPdf", { name: pdf.title })}
             >
               <Card className="relative aspect-4/5 overflow-hidden rounded-sm border-border bg-muted/20 p-0 transition-colors hover:border-zinc-700">
@@ -174,15 +174,15 @@ export function ContentContent({
           />
         </div>
         <div className="grid gap-2 md:grid-cols-2">
-          {xVideos.map((video) => (
+          {xVideos.map((video, index) => (
             <Card
               key={video.src}
-              className="relative aspect-video overflow-hidden rounded-sm border-border bg-black p-0"
+              className={`relative aspect-video overflow-hidden rounded-sm border-border bg-black p-0 ${index > 0 ? "hidden md:block" : ""}`}
             >
               <video
                 controls
                 playsInline
-                preload="metadata"
+                preload={index === 0 ? "metadata" : "none"}
                 className="absolute inset-0 h-full w-full object-cover"
                 aria-label={t("xVideoTitle", { episode: video.episode })}
               >