Fix titles on carousel template

src/templates/CarouselTemplate.css

@@ -41,7 +41,7 @@
     text-align: center;
     color: #fff;
     font-family: var(--font-heading);
-    font-size: 1.4rem;
+    font-size: clamp(0.65rem, 2vw, 1.4rem);
     font-weight: 300;
     letter-spacing: 0.2em;
     text-transform: uppercase;
@@ -49,6 +49,18 @@
     pointer-events: none;
 }
 
+@media (max-width: 600px) {
+    .carousel-slide {
+        width: 100vw;
+    }
+
+    .carousel-caption {
+        font-size: clamp(0.8rem, 4vw, 1.2rem);
+        letter-spacing: 0.12em;
+        bottom: 48px;
+    }
+}
+
 .carousel-btn {
     position: absolute;
     top: 50%;

src/templates/CarouselTemplate.js

@@ -5,6 +5,7 @@ import './CarouselTemplate.css';
 
 const VISIBLE = 3;
 const AUTOPLAY_DELAY = 4000;
+const MOBILE_BREAKPOINT = 600;
 
 function parseSlides(content) {
     const parts = content.split(/^## /m);
@@ -48,8 +49,18 @@ export default function CarouselTemplate({ page }) {
     const [trackIndex, setTrackIndex] = useState(VISIBLE);
     const [animated, setAnimated] = useState(true);
     const [paused, setPaused] = useState(false);
+    const [slideWidthPct, setSlideWidthPct] = useState(
+        window.innerWidth <= MOBILE_BREAKPOINT ? 100 : 100 / 3
+    );
     const timerRef = useRef(null);
 
+    useEffect(() => {
+        const mq = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT}px)`);
+        const handler = (e) => setSlideWidthPct(e.matches ? 100 : 100 / 3);
+        mq.addEventListener('change', handler);
+        return () => mq.removeEventListener('change', handler);
+    }, []);
+
     const advance = useCallback(() => setTrackIndex(i => i + 1), []);
 
     const startTimer = useCallback(() => {
@@ -105,7 +116,7 @@ export default function CarouselTemplate({ page }) {
                 <div
                     className="carousel-track"
                     style={{
-                        transform: `translateX(calc(-${trackIndex * 100 / 3}vw))`,
+                        transform: `translateX(calc(-${trackIndex * slideWidthPct}vw))`,
                         transition: animated ? 'transform 1.2s ease' : 'none',
                     }}
                     onTransitionEnd={handleTransitionEnd}