More space

.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,6 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="CssInvalidFunction" enabled="false" level="ERROR" enabled_by_default="false" />
+  </profile>
+</component>

src/components/ProjectGrid.scss

@@ -1,6 +1,6 @@
 @import "~include-media/dist/_include-media.scss";
 
-$breakpoints: (x-small: 430px, small: 660px, medium: 1000px, large: 1300px, x-large: 1560px, xx-large: 1900px);
+$breakpoints: (x-small: 520px, small: 760px, medium: 1100px, large: 1400px, x-large: 1560px, xx-large: 2000px);
 
 // Override Sass min()
 @function min($numbers...) {
@@ -76,8 +76,7 @@ $breakpoints: (x-small: 430px, small: 660px, medium: 1000px, large: 1300px, x-la
 
 #project-grid {
 
-  //padding: 10px;
+  margin: auto;
-
   @include media("<=x-small") {
     .GridSizer, .OneWide, .FourByOne, .Medium {
       width: 100%;
@@ -86,7 +85,7 @@ $breakpoints: (x-small: 430px, small: 660px, medium: 1000px, large: 1300px, x-la
 
   @include media(">x-small", "<small") {
     .GridSizer, .OneWide, .Medium {
-      width: 49%;
+      width: 49.5%;
     }
     .FourByOne {
       width: 100%;
@@ -95,10 +94,10 @@ $breakpoints: (x-small: 430px, small: 660px, medium: 1000px, large: 1300px, x-la
 
   @include media(">=small", "<medium") {
     .GridSizer, .OneWide, .Medium {
-      width: 33%;
+      width: 33.3%;
     }
     .FourByOne {
-      width: 66%;
+      width: 66.6%;
     }
   }
 
@@ -116,16 +115,13 @@ $breakpoints: (x-small: 430px, small: 660px, medium: 1000px, large: 1300px, x-la
 
   @include media(">=large", "<x-large") {
     .GridSizer, .OneWide {
-      max-width: 300px;
       width: 19.9%;
     }
     .Medium {
-      max-width: 600px;
       width: 39.8%;
     }
     .FourByOne {
       width: 59.5%;
-      max-width: 900px;
     }
   }
 
@@ -155,7 +151,7 @@ $breakpoints: (x-small: 430px, small: 660px, medium: 1000px, large: 1300px, x-la
 }
 
 .GridElement {
-  padding: 5px;
+  padding: 10px;
 
 
   .GridElementInternal {

src/components/ProjectGrid.tsx

@@ -307,7 +307,6 @@ export function ProjectGrid() {
             }
             link={"https://github.com/JakeCover/ScoreSaverExtention"}
           />
-
           <SmallElement
               title={"Assorted Discord Bots"}
               org={"Random Projects"}
@@ -326,9 +325,10 @@ export function ProjectGrid() {
             org={"CodeDay, Random Projects"}
             text={
               `I've setup and used a stack consisting of Nomad, Consul, and Vault along with Traefik both at CodeDay,
-              where it runs almost every service we have, as well as at home, where I use it to run a number of
+              where it runs almost every service we have, as well as at home, where I use it to run over 25 services on
-              assorted services on a few old machines. I strongly recommend it, it's very powerful and not all that
+              a cluster of old machines. I strongly recommend it as it's a very easy way utilize old hardware, even when
-              complex to get started with at any scale, from one personal server to large corporate backends.`
+              each machine may not be that powerful powerful and not all that complex to get started with at any scale,
+              from one personal server to large corporate backends.`
             }
           />
           <SmallElement