add new services pages

components/HeaderLogo.module.css

@@ -29,6 +29,7 @@
 .middle {
   opacity: var(--header-logo-opacity);
   transition: opacity 0.5s ease-in 0.75s;
+  min-width: max-content;
 }
 
 .bottom {

components/Nav.js

@@ -59,6 +59,21 @@ export default function Nav() {
                 <a className={styles.link}>Services</a>
               </Link>
               <ul className={styles.sublist}>
+                <li className={styles.listitem}>
+                  <Link href="/services/extensions" passHref>
+                    <a className={styles.link}>Extensions</a>
+                  </Link>
+                </li>
+                <li className={styles.listitem}>
+                  <Link href="/services/loft-conversions" passHref>
+                    <a className={styles.link}>Loft conversions</a>
+                  </Link>
+                </li>
+                <li className={styles.listitem}>
+                  <Link href="/services/garage-conversions" passHref>
+                    <a className={styles.link}>Garage conversions</a>
+                  </Link>
+                </li>
                 <li className={styles.listitem}>
                   <Link href="/services/bathrooms" passHref>
                     <a className={styles.link}>Bathrooms</a>

components/Nav.module.css

@@ -115,6 +115,7 @@
   margin: 0 0 0 var(--spacing-sm);
   padding: 0;
   list-style: none;
+  min-width: max-content;
 }
 
 .link {