From 5fb408f574b5a8bd5c2da69307a3ae99f0774c52 Mon Sep 17 00:00:00 2001
From: toothlessdev <toothless042@gmail.com>
Date: Mon, 15 Jan 2024 23:01:54 +0900
Subject: [PATCH] =?UTF-8?q?style:=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20?=
 =?UTF-8?q?=EC=BA=90=EB=9F=AC=EC=85=80=20=EB=86=92=EC=9D=B4=20=EB=B0=8F=20?=
 =?UTF-8?q?=EA=B0=95=EC=9D=98=20=EC=B9=B4=EB=93=9C=20=ED=81=AC=EA=B8=B0=20?=
 =?UTF-8?q?=EC=A1=B0=EC=A0=95=20#54?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../lecture-page/Carousel.module.scss         | 132 ++++++++++--------
 .../lecture-page/LectureCard.module.scss      |   9 +-
 2 files changed, 80 insertions(+), 61 deletions(-)

diff --git a/src/components/lecture-page/Carousel.module.scss b/src/components/lecture-page/Carousel.module.scss
index f4403e1..11458c2 100644
--- a/src/components/lecture-page/Carousel.module.scss
+++ b/src/components/lecture-page/Carousel.module.scss
@@ -1,75 +1,87 @@
+@import "@/styles/utils";
 
 .container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  margin-bottom: 70px;
-  .carouselWrapper {
-    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     width: 100%;
-    overflow: hidden;
+    margin-bottom: 70px;
+    .carouselWrapper {
+        position: relative;
+        width: 100%;
+        overflow: hidden;
 
-    &:hover {
-      .swipeLeft,
-      .swipeRight {
-        position: absolute;
-        top: 45%;
-        z-index: 1;
-        display: block;
-        padding: 8px 6px;
-        
-        border-radius: 50px;
-      }
-    }
+        &:hover {
+            .swipeLeft,
+            .swipeRight {
+                position: absolute;
+                top: 45%;
+                z-index: 1;
+                display: block;
+                padding: 8px 6px;
 
-    .swipeLeft,
-    .swipeRight {
-      display: none;
-    }
+                border-radius: 50px;
+            }
+        }
 
-    .swipeLeft {
-      left: 0;
-    }
+        .swipeLeft,
+        .swipeRight {
+            display: none;
+        }
 
-    .swipeRight {
-      right: 0;
-    }
+        .swipeLeft {
+            left: 0;
+        }
+
+        .swipeRight {
+            right: 0;
+        }
 
-    .carousel {
-      display: flex;
-      width: 100%;
+        .carousel {
+            display: flex;
+            width: 100%;
 
-      li {
-        flex: none;
-        object-fit: contain;
-      }
+            li {
+                flex: none;
+                object-fit: contain;
+            }
+        }
     }
-  }
 
-  .carouselItem {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 350px;
-    padding: 10px 0 15px;
-    overflow: hidden;
-    border-right: 2px solid white;
-    border-left: 2px solid white;
-    transition: border 300ms;
+    .carouselItem {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 350px;
+        padding: 10px 0 15px;
+        overflow: hidden;
+        border-right: 2px solid white;
+        border-left: 2px solid white;
+        transition: border 300ms;
 
-    img {
-      flex-shrink: 0;
-      min-width: 100%;
-      min-height: 100%;
+        img {
+            flex-shrink: 0;
+            min-width: 100%;
+            min-height: 100%;
+        }
     }
-  }
 
-  :root[color-theme='dark'] & {
-    .carouselItem {
-      border-right: 2px solid gray;
-      border-left: 2px solid gray;
+    :root[color-theme="dark"] & {
+        .carouselItem {
+            border-right: 2px solid gray;
+            border-left: 2px solid gray;
+        }
+    }
+}
+
+@include mobile {
+    .container {
+        margin-bottom: 30px;
+        .carouselWrapper {
+            .carouselItem {
+                height: 200px;
+            }
+        }
     }
-  }
-}
\ No newline at end of file
+}
diff --git a/src/components/lecture-page/LectureCard.module.scss b/src/components/lecture-page/LectureCard.module.scss
index b6c9c67..a167d56 100644
--- a/src/components/lecture-page/LectureCard.module.scss
+++ b/src/components/lecture-page/LectureCard.module.scss
@@ -11,12 +11,15 @@
     img {
         display: block;
         width: 100%;
-        height: 160px;
+        aspect-ratio: 30/16;
         object-fit: cover;
     }
     &:hover {
         cursor: pointer;
     }
+    @include mobile {
+        width: 200px;
+    }
 }
 
 .lecture_card_default {
@@ -73,6 +76,10 @@
             font-size: 2rem;
             font-weight: bold;
         }
+        div:last-child {
+            @include vertical-center;
+            @include text-overflow(elipsis);
+        }
     }
 }