style: 모바일 캐러셀 높이 및 강의 카드 크기 조정 #54

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;
+            }
+        }
     }
-  }
-}
+}

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);
+        }
     }
 }