diff --git a/src/components/content/carousels/templates/CourseTemplate.js b/src/components/content/carousels/templates/CourseTemplate.js
index b941ffb..0f77f9b 100644
--- a/src/components/content/carousels/templates/CourseTemplate.js
+++ b/src/components/content/carousels/templates/CourseTemplate.js
@@ -88,7 +88,7 @@ export function CourseTemplate({ course }) {
         </div>
         <p className="font-bold text-gray-300 min-w-[5%]">{lessonCount} {lessonCount === 1 ? "lesson" : "lessons"}</p>
       </CardContent>
-      <CardDescription className={`${isMobile ? "p-3" : "p-6"} py-2 pt-0 text-base text-neutral-50/90 dark:text-neutral-900/90 overflow-hidden min-h-[4em] flex items-center`}
+      <CardDescription className={`${isMobile ? "p-3" : "p-6"} py-2 pt-0 text-base text-neutral-50/90 dark:text-neutral-900/90 overflow-hidden min-h-[4em] flex items-center max-w-[100%]`}
         style={{
           overflow: "hidden",
           display: "-webkit-box",
diff --git a/src/components/content/carousels/templates/DocumentTemplate.js b/src/components/content/carousels/templates/DocumentTemplate.js
index 880876c..791ff59 100644
--- a/src/components/content/carousels/templates/DocumentTemplate.js
+++ b/src/components/content/carousels/templates/DocumentTemplate.js
@@ -77,7 +77,7 @@ export function DocumentTemplate({ document }) {
                 </div>
                 <p className="font-bold text-gray-300 min-w-[5%]">{document?.readTime || "5 min"} read</p>
             </CardContent>
-            <CardDescription className={`${isMobile ? "p-3" : "p-6"} py-2 pt-0 text-base text-neutral-50/90 dark:text-neutral-900/90 overflow-hidden min-h-[4em] flex items-center`}
+            <CardDescription className={`${isMobile ? "p-3" : "p-6"} py-2 pt-0 text-base text-neutral-50/90 dark:text-neutral-900/90 overflow-hidden min-h-[4em] flex items-center max-w-[100%]`}
                 style={{
                     overflow: "hidden",
                     display: "-webkit-box",
diff --git a/src/components/content/carousels/templates/VideoTemplate.js b/src/components/content/carousels/templates/VideoTemplate.js
index 97aeed3..fe2d1e3 100644
--- a/src/components/content/carousels/templates/VideoTemplate.js
+++ b/src/components/content/carousels/templates/VideoTemplate.js
@@ -78,7 +78,7 @@ export function VideoTemplate({ video }) {
                 </div>
                 <p className="font-bold text-gray-300 min-w-[5%]">{video?.duration || "5 min"} watch</p>
             </CardContent>
-            <CardDescription className={`${isMobile ? "p-3" : "p-6"} py-2 pt-0 text-base text-neutral-50/90 dark:text-neutral-900/90 overflow-hidden min-h-[4em] flex items-center`}
+            <CardDescription className={`${isMobile ? "p-3" : "p-6"} py-2 pt-0 text-base text-neutral-50/90 dark:text-neutral-900/90 overflow-hidden min-h-[4em] flex items-center max-w-[100%]`}
                 style={{
                     overflow: "hidden",
                     display: "-webkit-box",