Update index.html

index.html

@@ -59,7 +59,70 @@
     max-width: 100%; /* 수정된 속성 */
     max-height: 30vh; /* 수정된 속성, 화면 높이에 맞춰 조정 */
 }
+.slide .text-xl {
+    font-size: 1.25rem; /* 예시 폰트 크기 */
+}
+
+.slide .text-sm {
+    font-size: 0.875rem; /* 예시 폰트 크기 */
+}
+
+.slide p {
+    font-size: 1rem; /* 예시 폰트 크기 */
+}
+      @media (max-height: 500px) {
+    .slide {
+        height: 50vh;
+    }
+
+    .slide .text-xl {
+        font-size: 1rem; /* 조정된 폰트 크기 */
+    }
+
+    .slide .text-sm {
+        font-size: 0.75rem; /* 조정된 폰트 크기 */
+    }
+
+    .slide p {
+        font-size: 0.875rem; /* 조정된 폰트 크기 */
+    }
+
+    .slide img {
+        max-height: 20vh;
+    }
+
+    .slide button {
+        padding: 8px 16px;
+        font-size: 0.8em;
+    }
+}
+
+@media (max-height: 400px) {
+    .slide {
+        height: 40vh;
+    }
 
+    .slide .text-xl {
+        font-size: 0.875rem; /* 더 작게 조정된 폰트 크기 */
+    }
+
+    .slide .text-sm {
+        font-size: 0.675rem; /* 더 작게 조정된 폰트 크기 */
+    }
+
+    .slide p {
+        font-size: 0.75rem; /* 더 작게 조정된 폰트 크기 */
+    }
+
+    .slide img {
+        max-height: 15vh;
+    }
+
+    .slide button {
+        padding: 6px 12px;
+        font-size: 0.7em;
+    }
+}
 /* 반응형 디자인을 위한 미디어 쿼리 */
 @media (max-height: 500px) {
     .slide {