From a6394bbedd8d0d5a61cf3d0ff77858c9ea94d0f2 Mon Sep 17 00:00:00 2001
From: Hossein Mehrabi <ohyeaross@gmail.com>
Date: Tue, 5 Sep 2023 18:57:38 +0330
Subject: [PATCH] fix: fix the font size of episode page's title; refs #180

---
 src/components/Episode/Header/Episode.Header.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/Episode/Header/Episode.Header.tsx b/src/components/Episode/Header/Episode.Header.tsx
index 8c721b1..7f5af37 100644
--- a/src/components/Episode/Header/Episode.Header.tsx
+++ b/src/components/Episode/Header/Episode.Header.tsx
@@ -5,6 +5,7 @@ import styled from '@emotion/styled'
 import Image from 'next/image'
 import Link from 'next/link'
 import { LPE } from '../../../types/lpe.types'
+import { lsdUtils } from '../../../utils/lsd.utils'
 import { getPostLink } from '../../../utils/route.utils'
 import EpisodeStats from '../Episode.Stats'
 import EpisodeChannels from './Episode.Channels'
@@ -37,7 +38,7 @@ const EpisodeHeader = ({
         coverImage={coverImage}
       />
       <EpisodeStats date={date} duration={duration} />
-      <EpisodeTitle variant="h1" genericFontFamily="serif" component="h1">
+      <EpisodeTitle variant="h2" genericFontFamily="serif" component="h1">
         {title}
       </EpisodeTitle>
       {show && (
@@ -75,10 +76,10 @@ const CustomTypography = styled(Typography)`
 
 const EpisodeTitle = styled(Typography)`
   margin-bottom: 16px;
-  @media (max-width: 768px) {
+
+  ${(props) => lsdUtils.breakpoint(props.theme, 'sm', 'down')} {
     margin-bottom: 8px;
-    font-size: var(--lsd-h4-fontSize) !important;
-    line-height: var(--lsd-h4-lineHeight) !important;
+    ${lsdUtils.typography('h4')}
   }
 `