feat: better mobile breaks and wraps

Author: lfilho

src/components/cv/css/base.css

@@ -68,7 +68,7 @@ h2 {
 
 h3 {
     border-bottom: 0.1rem solid #ccc;
-    margin: 1rem 0;
+    margin: 0.7rem auto;
 }
 
 h2,

src/components/cv/sections/education/index.jsx

@@ -23,10 +23,10 @@ export default class Education extends Component {
         const academyCourses = education.academyCourses.map((entry, i) => {
             const info = isVerbose
                 ? entry.info.map((info, i) => (
-                    <>
-                        <span> {info}</span>
-                    </>
-                ))
+                      <>
+                          <span> {info}</span>
+                      </>
+                  ))
                 : null;
 
             const date = isVerbose ? (
@@ -40,7 +40,7 @@ export default class Education extends Component {
                 <li className='academy-course' key={i}>
                     <span>{entry.title}</span>
 
-                    <span className='separator-highlight'> @ </span>
+                    <span className='separator-highlight'> @&nbsp;</span>
                     <span>
                         {entry.school} – {entry.location}
                     </span>

src/components/cv/sections/education/style.css

@@ -4,11 +4,11 @@ h2#education {
 .flex-container {
     display: flex;
     flex-wrap: wrap;
-    gap: 1.5rem;
+    gap: 1rem;
 }
 .education section {
-    flex: 1 0 auto;
+    flex: 1 1 auto;
 }
 .education section:last-child {
-    flex-basis: 25%;
+    flex-basis: 33%;
 }

src/components/cv/sections/experience/index.jsx

@@ -42,11 +42,11 @@ export default class Experience extends Component {
 
             return (
                 <div className='xp' key={i}>
-                    <h3>
+                    <h3 className='grid-container'>
                         <div className='job-data'>
                             <FontAwesomeIcon icon={faLaptopCode} fixedWidth />
                             <span dangerouslySetInnerHTML={{ __html: positions }} />
-                            <span className='separator-highlight'> @ </span>
+                            <span className='separator-highlight'> @&nbsp;</span>
                             <span className='org'>{entry.company}</span>
                         </div>
                         <div className='period'>

src/components/cv/sections/experience/style.css

@@ -18,6 +18,22 @@
     grid-gap: 1rem;
 }
 
+.xp .period {
+    text-align: right;
+}
+
+@media (max-width: 895px) {
+    .xp .grid-container {
+        grid-template-columns: none;
+        grid-auto-flow: row;
+        grid-gap: 0.1rem;
+    }
+    .xp .period {
+        text-align: left;
+        margin-left: 0;
+    }
+}
+
 .xp article {
     margin: 0.5rem auto;
 }
@@ -30,17 +46,13 @@
 .separator-highlight {
     color: var(--primary-blue);
     font-weight: bold;
-    margin: 0 0.3rem;
+    margin: 0 0.1rem;
 }
 .xp .job-data,
 .xp .period {
     display: inline-block;
-}
-
-.xp .period {
-    float: right;
-    text-align: right;
-    margin-left: 0.2rem;
+    text-indent: -1.5rem;
+    padding-left: 1.5rem;
 }
 
 .volunteer.xp .period {