fix(about): invalid p tag descendant

src/components/styles/About.styled.ts

@@ -54,6 +54,7 @@ export const StyledAbout = styled.section`
 
     border-radius: 1em;
     background-color: ${({ theme }) => theme.colors['600']};
+  }
 
   .stat-item-icon {
     position: absolute;
@@ -66,11 +67,10 @@ export const StyledAbout = styled.section`
     border-radius: 50%;
   }
 
-    p {
+  .stat-item-text {
     font-size: 1.25em;
     line-height: 1.5em;
   }
-  }
 
   @media screen and (max-width: ${deviceSize.md}) {
     .about-grid {

src/sections/AboutSection.tsx

@@ -67,7 +67,7 @@ function AboutSection() {
 
           <h2>{t('about.brief-1-title')}</h2>
 
-          <p>{t('about.brief-1-content')}</p>
+          <div className="stat-item-text">{t('about.brief-1-content')}</div>
         </div>
 
         <div className="stat-item">
@@ -77,7 +77,7 @@ function AboutSection() {
 
           <h2>{t('about.brief-2-title')}</h2>
 
-          <p>{t('about.brief-2-content')}</p>
+          <div className="stat-item-text">{t('about.brief-2-content')}</div>
         </div>
 
         <div className="stat-item">
@@ -87,7 +87,7 @@ function AboutSection() {
 
           <h2>{t('about.brief-3-title')}</h2>
 
-          <p>{t('about.brief-3-content')}</p>
+          <div className="stat-item-text">{t('about.brief-3-content')}</div>
         </div>
 
         <div className="stat-item">
@@ -97,14 +97,14 @@ function AboutSection() {
 
           <h2>{t('about.brief-4-title')}</h2>
 
-          <p>
+          <div className="stat-item-text">
             <div>
               <FaVuejs size={30} color="seagreen" /> Vue
             </div>
             <div>
               <SiNestjs size={30} color="#fc466b" /> NestJS
             </div>
-          </p>
+          </div>
         </div>
       </div>
     </StyledAbout>