Now uses adaptive sizes, it's somewhat better, somewhat worse.

Might switch back to static sizes w/ media queries and just add media query based column numbers

css/colors.css

@@ -0,0 +1,3 @@
+
+
+/*# sourceMappingURL=colors.css.map */

css/footer.css

@@ -1,60 +1,47 @@
 @import url("https://fonts.googleapis.com/css2?family=Fira+Code&family=Montserrat:wght@400;600;700&display=swap");
-[class*="col-"] {
+.site-footer {
+  overflow: hidden;
+  background-color: #f1f1f1;
+  padding: 15px 10px;
+  font-family: "Fira Code", monospace;
+  border-radius: 3px;
+  font-size: small;
+  /* For desktop: */ }
+  .site-footer h6 {
+    font-size: medium;
+    margin-top: 0px;
+    margin-bottom: 0px; }
+  .site-footer [class*="col-"] {
     float: left;
     padding: 15px 15px 0px;
     position: relative; }
-
+  .site-footer .col-1 {
-/* For desktop: */
-.col-1 {
     width: 8.33%; }
-
+  .site-footer .col-2 {
-.col-2 {
     width: 16.66%; }
-
+  .site-footer .col-3 {
-.col-3 {
     width: 25%; }
-
+  .site-footer .col-4 {
-.col-4 {
     width: 33.33%; }
-
+  .site-footer .col-5 {
-.col-5 {
     width: 41.66%; }
-
+  .site-footer .col-6 {
-.col-6 {
     width: 50%; }
-
+  .site-footer .col-7 {
-.col-7 {
     width: 58.33%; }
-
+  .site-footer .col-8 {
-.col-8 {
     width: 66.66%; }
-
+  .site-footer .col-9 {
-.col-9 {
     width: 75%; }
-
+  .site-footer .col-10 {
-.col-10 {
     width: 83.33%; }
-
+  .site-footer .col-11 {
-.col-11 {
     width: 91.66%; }
-
+  .site-footer .col-12 {
-.col-12 {
     width: 100%; }
-
   @media (max-width: 767px) {
-  [class*="col-"] {
+    .site-footer [class*="col-"] {
       width: 95%; } }
-.site-footer {
-  overflow: hidden;
-  background-color: #f1f1f1;
-  padding: 15px 10px;
-  font-family: "Fira Code", monospace;
-  border-radius: 3px;
-  font-size: small; }
-  .site-footer h6 {
-    font-size: medium;
-    margin-top: 0px;
-    margin-bottom: 0px; }
 
 .footer-grid {
   box-sizing: border-box;

css/masonry.css

@@ -1,15 +1,48 @@
+/* Rules for the grid icons and stuff */
+.grid {
+  transition: 0.2s all;
+  position: relative; }
+
+.grid-item-padding {
+  padding: 5px;
+  box-sizing: border-box;
+  height: fit-content; }
+
 .grid-item {
   background-color: #eaeaea;
   border-radius: 3px;
-  width: 240px;
-  margin-bottom: 10px;
   padding: 5px;
+  width: 100%;
   box-sizing: border-box;
-  height: 200px;
+  transition: 0.25s ease-in-out;
-  transition: 0.18s ease-in-out;
   overflow: hidden;
   position: relative; }
+  .grid-item img {
+    width: inherit; }
+  .grid-item img::after {
+    content: "";
+    display: block;
+    padding-bottom: 100%; }
+
+@media (min-width: 992px) {
+  .grid-sizer, .grid-item--std {
+    width: 25%; }
+
+  .grid-item--wide {
+    width: 50%; } }
+@media (min-width: 768px) and (max-width: 991px) {
+  .grid-item--std, .grid-sizer {
+    width: 50%; }
+
+  .grid-item--wide {
+    width: 100%; } }
+@media (max-width: 767px) {
+  .grid-item--std, .grid-sizer {
+    width: 100%; }
 
+  .grid-item--wide {
+    width: 100%; } }
+/* Rules for the overlay */
 .service-wrapper-inner {
   height: 100%;
   width: 90%;
@@ -34,10 +67,10 @@
   z-index: 0;
   transition: 0.2s ease; }
   .service-overlay.notitle {
-    clip-path: polygon(0 0, 100% calc(100% - 2vw), 100% 100%, 0 100%);
+    clip-path: polygon(0 0, 100% 90%, 100% 100%, 0 100%);
     height: 200%; }
   .service-overlay.title {
-    clip-path: polygon(0 0, 100% calc(100% - 18.5vw), 100% 100%, 0 100%); }
+    clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 100%); }
 
 .grid-item:hover .service-wrapper-inner {
   top: -10%;
@@ -51,36 +84,18 @@
     clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
   .grid-item:hover .service-overlay.notitle {
     top: -20%;
-    clip-path: polygon(0 0, calc(100% - 15vw) 0, 100% 100%, 0 100%);
+    clip-path: polygon(0 0, 65% 0, 100% 100%, 0 100%);
     left: -20%; }
 
-.grid {
+img {
-  margin: 0 auto;
+  transition: 0.25s; }
-  transition: 0.2s all; }
-
-.grid-item--tall3 {
-  height: 300px; }
-
-.grid-item--tall4 {
-  height: 400px; }
 
-.grid-item--width2 {
+.blur-me img {
-  background-color: #81d4fa;
+  filter: grayscale(0%) blur(0px) brightness(100%);
-  width: 490px; }
-
-.grid-item--image {
-  width: fit-content;
-  height: fit-content; }
-
-@media (max-width: 575px) {
-  .grid-item--width2 {
-    width: 100%; } }
-.blur-me {
-  filter: grayscale(0%) blur(0.5px) brightness(100%);
   opacity: 1;
   box-shadow: none; }
 
-.unblur-me {
+.unblur-me img {
   filter: grayscale(0%) blur(0px) brightness(100%);
   opacity: 1;
   box-shadow: none; }

images/distest.svg

@@ -1 +1 @@
-<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 3371.4 3853.02"><defs><style>.cls-1{fill:none;}.cls-2{clip-path:url(#clip-path);}.cls-3{clip-path:url(#clip-path-2);}</style><clipPath id="clip-path" transform="translate(-484.32 -164.33)"><rect id="SVGID" class="cls-1" x="182.67" y="121.07" width="1999.33" height="3484.89"/></clipPath><clipPath id="clip-path-2" transform="translate(-484.32 -164.33)"><rect id="SVGID-2" data-name="SVGID" class="cls-1" x="2181.58" y="164.33" width="1685.7" height="3858.67"/></clipPath></defs><g class="cls-2"><path d="M3147.2,3468.08V825.27a93.39,93.39,0,0,0-1.89-18.69,91.51,91.51,0,0,0-3.47-11.44c-.68-2-1.1-4.19-1.93-6.19a89.93,89.93,0,0,0-6.38-11.93c-.83-1.4-1.4-2.91-2.34-4.27a95.53,95.53,0,0,0-11.78-14.34L2553.32,192.32A95.53,95.53,0,0,0,2539,180.54c-1.36-.91-2.87-1.48-4.27-2.34a96,96,0,0,0-11.93-6.38c-2-.83-4.12-1.21-6.19-1.93a91.51,91.51,0,0,0-11.44-3.47,95.74,95.74,0,0,0-18.65-1.85H598.78A94.37,94.37,0,0,0,504.39,259V3468.08a94.38,94.38,0,0,0,94.39,94.38h2454A94.38,94.38,0,0,0,3147.2,3468.08ZM2580.88,486.84l244,244h-244Zm377.55,2886.85H693.16V353.34h1699V825.27a94.37,94.37,0,0,0,94.39,94.38h471.93Z" transform="translate(-484.32 -164.33)"/><path d="M1475.89,1136.06l-310.8,310.8-122-122A94.37,94.37,0,0,0,909.61,1458.3l188.77,188.77a94.35,94.35,0,0,0,133.46,0l377.55-377.55a94.4,94.4,0,0,0-133.5-133.5Z" transform="translate(-484.32 -164.33)"/><path d="M1475.89,1891.15l-310.8,310.79-122-122a94.37,94.37,0,1,0-133.46,133.46l188.77,188.78a94.34,94.34,0,0,0,133.46,0l377.55-377.54a94.4,94.4,0,0,0-133.5-133.5Z" transform="translate(-484.32 -164.33)"/><path d="M1475.89,2646.24,1165.09,2957l-122-122a94.37,94.37,0,1,0-133.46,133.46l188.77,188.77a94.32,94.32,0,0,0,133.46,0l377.55-377.54a94.4,94.4,0,0,0-133.5-133.5Z" transform="translate(-484.32 -164.33)"/><path d="M1825.8,1202.81a94.37,94.37,0,0,0,94.38,94.39h755.09a94.39,94.39,0,1,0,0-188.77H1920.18A94.36,94.36,0,0,0,1825.8,1202.81Z" transform="translate(-484.32 -164.33)"/><path d="M1920.18,1674.74h377.55a94.39,94.39,0,0,0,0-188.77H1920.18a94.39,94.39,0,0,0,0,188.77Z" transform="translate(-484.32 -164.33)"/><path d="M2675.27,1863.51H1920.18a94.39,94.39,0,0,0,0,188.78h755.09a94.39,94.39,0,0,0,0-188.78Z" transform="translate(-484.32 -164.33)"/><path d="M1920.18,2429.83h377.55a94.39,94.39,0,0,0,0-188.77H1920.18a94.39,94.39,0,0,0,0,188.77Z" transform="translate(-484.32 -164.33)"/><path d="M2675.27,2618.6H1920.18a94.39,94.39,0,0,0,0,188.77h755.09a94.39,94.39,0,1,0,0-188.77Z" transform="translate(-484.32 -164.33)"/><path d="M2297.73,2996.15H1920.18a94.39,94.39,0,0,0,0,188.77h377.55a94.39,94.39,0,0,0,0-188.77Z" transform="translate(-484.32 -164.33)"/></g><g class="cls-3"><path d="M3460.79,164.33H879.26c-217.7,0-394.94,177.24-394.94,396.86V3165.84c0,219.62,177.24,396.86,394.94,396.86H3063.92l-102.1-356.41,246.59,229.26,233.11,215.77,414.2,366V561.19C3855.72,341.57,3678.48,164.33,3460.79,164.33Zm-743.64,2516s-69.35-82.84-127.15-156.05c252.38-71.28,348.7-229.26,348.7-229.26-79,52-154.12,88.62-221.55,113.67-96.32,40.45-188.8,67.43-279.34,82.84-184.95,34.68-354.48,25-499-1.93-109.81-21.19-204.21-52-283.2-82.84-44.31-17.34-92.47-38.53-140.63-65.5-5.78-3.85-11.56-5.78-17.34-9.63a26.89,26.89,0,0,1-7.71-5.78c-34.67-19.27-53.94-32.75-53.94-32.75s92.47,154.12,337.14,227.33c-57.79,73.2-129.08,159.9-129.08,159.9-425.75-13.49-587.58-292.83-587.58-292.83,0-620.34,277.42-1123.16,277.42-1123.16,277.41-208.06,541.35-202.28,541.35-202.28l19.26,23.11c-346.77,100.18-506.67,252.38-506.67,252.38s42.38-23.12,113.66-55.87c206.14-90.55,369.89-115.59,437.32-121.37,11.56-1.93,21.19-3.85,32.75-3.85a1629.78,1629.78,0,0,1,389.16-3.86c183,21.19,379.52,75.14,579.88,184.95,0,0-152.2-144.49-479.7-244.67l27-30.82s263.93-5.78,541.35,202.28c0,0,277.41,502.82,277.41,1123.16C3306.66,2387.53,3142.91,2666.87,2717.15,2680.36Zm-895.83-899.68c-109.81,0-196.5,96.32-196.5,213.84s88.62,213.84,196.5,213.84c109.81,0,196.51-96.32,196.51-213.84,1.92-117.52-86.7-213.84-196.51-213.84m703.18,0c-109.81,0-196.5,96.32-196.5,213.84s88.62,213.84,196.5,213.84c109.81,0,196.5-96.32,196.5-213.84s-86.69-213.84-196.5-213.84" transform="translate(-484.32 -164.33)"/></g></svg>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 3371.4 3853.02"><defs><style>.cls-1{fill:none;}.cls-2{clip-path:url(#clip-path);}.cls-3{clip-path:url(#clip-path-2);}</style><clipPath id="clip-path" transform="translate(-482.32 -164.33)"><rect id="SVGID" class="cls-1" x="182.67" y="121.07" width="1999.33" height="3484.89"/></clipPath><clipPath id="clip-path-2" transform="translate(-482.32 -164.33)"><rect id="SVGID-2" data-name="SVGID" class="cls-1" x="2179.58" y="164.33" width="1685.7" height="3858.67"/></clipPath></defs><g class="cls-2"><path d="M3147.2,3468.08V825.27a93.39,93.39,0,0,0-1.89-18.69,91.51,91.51,0,0,0-3.47-11.44c-.68-2-1.1-4.19-1.93-6.19a89.93,89.93,0,0,0-6.38-11.93c-.83-1.4-1.4-2.91-2.34-4.27a95.53,95.53,0,0,0-11.78-14.34L2553.32,192.32A95.53,95.53,0,0,0,2539,180.54c-1.36-.91-2.87-1.48-4.27-2.34a96,96,0,0,0-11.93-6.38c-2-.83-4.12-1.21-6.19-1.93a91.51,91.51,0,0,0-11.44-3.47,95.74,95.74,0,0,0-18.65-1.85H598.78A94.37,94.37,0,0,0,504.39,259V3468.08a94.38,94.38,0,0,0,94.39,94.38h2454A94.38,94.38,0,0,0,3147.2,3468.08ZM2580.88,486.84l244,244h-244Zm377.55,2886.85H693.16V353.34h1699V825.27a94.37,94.37,0,0,0,94.39,94.38h471.93Z" transform="translate(-482.32 -164.33)"/><path d="M1475.89,1136.06l-310.8,310.8-122-122A94.37,94.37,0,0,0,909.61,1458.3l188.77,188.77a94.35,94.35,0,0,0,133.46,0l377.55-377.55a94.4,94.4,0,0,0-133.5-133.5Z" transform="translate(-482.32 -164.33)"/><path d="M1475.89,1891.15l-310.8,310.79-122-122a94.37,94.37,0,1,0-133.46,133.46l188.77,188.78a94.34,94.34,0,0,0,133.46,0l377.55-377.54a94.4,94.4,0,0,0-133.5-133.5Z" transform="translate(-482.32 -164.33)"/><path d="M1475.89,2646.24,1165.09,2957l-122-122a94.37,94.37,0,1,0-133.46,133.46l188.77,188.77a94.32,94.32,0,0,0,133.46,0l377.55-377.54a94.4,94.4,0,0,0-133.5-133.5Z" transform="translate(-482.32 -164.33)"/><path d="M1825.8,1202.81a94.37,94.37,0,0,0,94.38,94.39h755.09a94.39,94.39,0,1,0,0-188.77H1920.18A94.36,94.36,0,0,0,1825.8,1202.81Z" transform="translate(-482.32 -164.33)"/><path d="M1920.18,1674.74h377.55a94.39,94.39,0,0,0,0-188.77H1920.18a94.39,94.39,0,0,0,0,188.77Z" transform="translate(-482.32 -164.33)"/><path d="M2675.27,1863.51H1920.18a94.39,94.39,0,0,0,0,188.78h755.09a94.39,94.39,0,0,0,0-188.78Z" transform="translate(-482.32 -164.33)"/><path d="M1920.18,2429.83h377.55a94.39,94.39,0,0,0,0-188.77H1920.18a94.39,94.39,0,0,0,0,188.77Z" transform="translate(-482.32 -164.33)"/><path d="M2675.27,2618.6H1920.18a94.39,94.39,0,0,0,0,188.77h755.09a94.39,94.39,0,1,0,0-188.77Z" transform="translate(-482.32 -164.33)"/><path d="M2297.73,2996.15H1920.18a94.39,94.39,0,0,0,0,188.77h377.55a94.39,94.39,0,0,0,0-188.77Z" transform="translate(-482.32 -164.33)"/></g><g class="cls-3"><path d="M3458.79,164.33H877.26c-217.7,0-394.94,177.24-394.94,396.86V3165.84c0,219.62,177.24,396.86,394.94,396.86H3061.92l-102.1-356.41,246.59,229.26,233.11,215.77,414.2,366V561.19C3853.72,341.57,3676.48,164.33,3458.79,164.33Zm-743.64,2516s-69.35-82.84-127.15-156.05c252.38-71.28,348.7-229.26,348.7-229.26-79,52-154.12,88.62-221.55,113.67-96.32,40.45-188.8,67.43-279.34,82.84-184.95,34.68-354.48,25-499-1.93-109.81-21.19-204.21-52-283.2-82.84-44.31-17.34-92.47-38.53-140.63-65.5-5.78-3.85-11.56-5.78-17.34-9.63a26.89,26.89,0,0,1-7.71-5.78c-34.67-19.27-53.94-32.75-53.94-32.75s92.47,154.12,337.14,227.33c-57.79,73.2-129.08,159.9-129.08,159.9-425.75-13.49-587.58-292.83-587.58-292.83,0-620.34,277.42-1123.16,277.42-1123.16,277.41-208.06,541.35-202.28,541.35-202.28l19.26,23.11c-346.77,100.18-506.67,252.38-506.67,252.38s42.38-23.12,113.66-55.87c206.14-90.55,369.89-115.59,437.32-121.37,11.56-1.93,21.19-3.85,32.75-3.85a1629.78,1629.78,0,0,1,389.16-3.86c183,21.19,379.52,75.14,579.88,184.95,0,0-152.2-144.49-479.7-244.67l27-30.82s263.93-5.78,541.35,202.28c0,0,277.41,502.82,277.41,1123.16C3304.66,2387.53,3140.91,2666.87,2715.15,2680.36Zm-895.83-899.68c-109.81,0-196.5,96.32-196.5,213.84s88.62,213.84,196.5,213.84c109.81,0,196.51-96.32,196.51-213.84,1.92-117.52-86.7-213.84-196.51-213.84m703.18,0c-109.81,0-196.5,96.32-196.5,213.84s88.62,213.84,196.5,213.84c109.81,0,196.5-96.32,196.5-213.84s-86.69-213.84-196.5-213.84" transform="translate(-482.32 -164.33)"/></g></svg>

index.html

@@ -24,27 +24,17 @@
 </header>
 <div class="page">
     <div class="grid">
-        <!--Distest-->
+        <div class="grid-sizer"></div>
-        <div class="grid-item grid-item--image">
-            <img class="grid-img" src="images/distest.svg" alt="CodeDay SD Logo" width="230" height="230">
-            <div class="service-wrapper-inner title">
-                <h2>Distest</h2>
-                <div class="description">
-                    <p>
-                        One of my favorite Python projects, a tool to write automated integration tests for discord bots.
-                    </p>
-                </div>
-            </div>
-            <div class="service-overlay title"></div>
-        </div>
         <!--CodeDay-->
-        <div class="grid-item grid-item--image">
+        <div class="grid-item-padding grid-item--std">
-            <img class="grid-img" src="images/codedaysd.png" alt="CodeDay SD Logo" width="230" height="230">
+            <div class="grid-item">
+                <img class="grid-img" src="images/codedaysd.png" alt="CodeDay SD Logo">
                 <div class="service-wrapper-inner title">
                     <h2>CodeDay</h2>
                     <div class="description">
                         <p>
-                        CodeDay, an event by SRND, is a beginner-friendly 24 hour event for students that challenges attendees to create a game or an app.<br>
+                            CodeDay, an event by SRND, is a beginner-friendly 24 hour event for students that challenges
+                            attendees to create a game or an app.<br>
                             I served as the Regional Manager for CodeDay San Diego for one year.
                         </p>
                     </div>
@@ -52,42 +42,70 @@
                 <div class="service-overlay title"></div>
 
             </div>
+        </div>
         <!--SRND-->
-        <div class="grid-item grid-item--image">
+        <div class="grid-item-padding grid-item--std">
-            <img src="images/codeday-notext-color.svg" alt="Redish Heart, SRND Logo" width="230" height="230">
+            <div class="grid-item">
+                <img src="images/codeday-notext-color.svg" alt="Redish Heart, SRND Logo">
                 <div class="service-wrapper-inner title">
                     <h2>SRND</h2>
                     <div class="description">
-                    <p>SRND is an educational nonprofit that works to provide CS education to high school and college students and to increase diversity in tech.</p>
+                        <p>SRND is an educational nonprofit that works to provide CS education to high school and
+                            college students and to increase diversity in tech.</p>
+                    </div>
+                </div>
+                <div class="service-overlay title"></div>
+            </div>
+        </div>
+        <!--Distest-->
+        <div class="grid-item-padding grid-item--std">
+            <div class="grid-item">
+                <img class="grid-img" src="images/distest.svg" alt="CodeDay SD Logo">
+                <div class="service-wrapper-inner title">
+                    <h2>Distest</h2>
+                    <div class="description">
+                        <p>
+                            One of my favorite Python projects, a tool to write automated integration tests for discord
+                            bots.
+                        </p>
                     </div>
                 </div>
                 <div class="service-overlay title"></div>
             </div>
+        </div>
         <!--ScoreSaver Installer-->
-        <div class="grid-item grid-item--image">
+        <div class="grid-item-padding grid-item--std">
-            <img src="images/scoresaver.svg" alt="Red to Blue Gradient w/ White Download Icon" width="230" height="230">
+            <div class="grid-item">
+                <img src="images/scoresaver.svg" alt="Red to Blue Gradient w/ White Download Icon">
                 <div class="service-wrapper-inner title">
                     <h2>ScoreSaver</h2>
                     <div class="description">
-                    <p>SRND is an educational nonprofit that works to provide CS education to high school and college students and to increase diversity in tech.</p>
+                        <p>SRND is an educational nonprofit that works to provide CS education to high school and
+                            college students and to increase diversity in tech.</p>
                     </div>
                 </div>
                 <div class="service-overlay title"></div>
             </div>
+        </div>
         <!--Foresight-->
-        <div class="grid-item grid-item--image">
+        <div class="grid-item-padding grid-item--wide">
-            <img src="images/foresightsports.png" alt="ForeSight Sports Logo0" width="480">
+            <div class="grid-item">
+                <img src="images/foresightsports.png" alt="ForeSight Sports Logo0">
                 <div class="service-wrapper-inner notitle">
                     <div class="description">
-                    <p>SRND is an educational nonprofit that works to provide CS education to high school and college students and to increase diversity in tech.</p>
+                        <p>SRND is an educational nonprofit that works to provide CS education to high school and
+                            college students and to increase diversity in tech.</p>
                     </div>
                 </div>
                 <div class="service-overlay notitle"></div>
             </div>
+        </div>
         <!--ReplyBot-->
+        <div class="grid-item-padding">
             <div class="grid-item grid-item--tall3">ReplyBot</div>
         </div>
     </div>
+</div>
 
 <!-- Site footer -->
 <footer class="site-footer">

sass/footer.sass

@@ -1,6 +1,5 @@
 @import "breakpoint-helpers"
 @import "colors"
-@import "grid-helpers"
 @import url('https://fonts.googleapis.com/css2?family=Fira+Code&family=Montserrat:wght@400;600;700&display=swap')
 
 .site-footer
@@ -16,6 +15,53 @@
     margin-top: 0px
     margin-bottom: 0px
 
+  [class*="col-"]
+    float: left
+    padding: 15px 15px 0px
+    position: relative
+
+  /* For desktop: */
+  .col-1
+    width: 8.33%
+
+  .col-2
+    width: 16.66%
+
+  .col-3
+    width: 25%
+
+  .col-4
+    width: 33.33%
+
+  .col-5
+    width: 41.66%
+
+  .col-6
+    width: 50%
+
+  .col-7
+    width: 58.33%
+
+  .col-8
+    width: 66.66%
+
+  .col-9
+    width: 75%
+
+  .col-10
+    width: 83.33%
+
+  .col-11
+    width: 91.66%
+
+  .col-12
+    width: 100%
+
+
+  @include respond-below(sm)
+    [class*="col-"]
+      width: 95%
+
 
 .footer-grid
   box-sizing: border-box

sass/grid-helpers.sass

@@ -1,48 +0,0 @@
-@import "breakpoint-helpers"
-
-[class*="col-"]
-  float: left
-  padding: 15px 15px 0px
-  position: relative
-
-/* For desktop: */
-.col-1
-  width: 8.33%
-
-.col-2
-  width: 16.66%
-
-.col-3
-  width: 25%
-
-.col-4
-  width: 33.33%
-
-.col-5
-  width: 41.66%
-
-.col-6
-  width: 50%
-
-.col-7
-  width: 58.33%
-
-.col-8
-  width: 66.66%
-
-.col-9
-  width: 75%
-
-.col-10
-  width: 83.33%
-
-.col-11
-  width: 91.66%
-
-.col-12
-  width: 100%
-
-
-@include respond-below(sm)
-  [class*="col-"]
-    width: 95%

sass/masonry.sass

@@ -1,21 +1,53 @@
 @import "breakpoint-helpers"
 @import "colors"
 
+/* Rules for the grid icons and stuff
+.grid
+  transition: .2s all
+  position: relative
+
+.grid-item-padding
+  padding: 5px
+  box-sizing: border-box
+  height: fit-content
+
 .grid-item
   background-color: $colorblind-item
   border-radius: 3px
-  width: 240px
-  margin-bottom: 10px
   padding: 5px
+  width: 100%
   box-sizing: border-box
-  height: 200px
+  transition: 0.25s ease-in-out
-  //box-shadow: 0 2px 3px 0px rgba(0,0,0,0.25)
-  transition: 0.18s ease-in-out
-  //animation: FadeIn 0.22s
   overflow: hidden
   position: relative
 
+  img
+    width: inherit
+
+  img::after
+    content: ""
+    display: block
+    padding-bottom: 100%
+
+
+@include respond-above(md)
+  .grid-sizer, .grid-item--std
+    width: 25%
+  .grid-item--wide
+    width: 50%
+@include respond-between(sm, md)
+  .grid-item--std, .grid-sizer
+    width: 50%
+  .grid-item--wide
+    width: 100%
+@include respond-below(sm)
+  .grid-item--std, .grid-sizer
+    width: 100%
+  .grid-item--wide
+    width: 100%
+
 
+/* Rules for the overlay
 .service-wrapper-inner
   height: 100%
   width: 90%
@@ -43,11 +75,11 @@
   transition: 0.2s ease
 
   &.notitle
-    clip-path: polygon(0 0, 100% calc(100% - 2vw), 100% 100%, 0 100%)
+    clip-path: polygon(0 0, 100% 90%, 100% 100%, 0 100%)
     height: 200%
 
   &.title
-    clip-path: polygon(0 0, 100% calc(100% - 18.5vw), 100% 100%, 0 100%)
+    clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 100%)
 
 
 .grid-item:hover
@@ -67,41 +99,22 @@
 
     &.notitle
       top: -20%
-      clip-path: polygon(0 0, calc(100% - 15vw) 0, 100% 100%, 0 100%)
+      clip-path: polygon(0 0, 65% 0, 100% 100%, 0 100%)
       left: -20%
 
-
+img
-.grid
+  transition: 0.25s
-  margin: 0 auto
-  transition: .2s all
-
-.grid-item--tall3
-  height: 300px
-
-.grid-item--tall4
-  height: 400px
-
-.grid-item--width2
-  background-color: #81d4fa
-  width: 490px
-
-.grid-item--image
-  width: fit-content
-  height: fit-content
-
-@include respond-below(xs)
-  .grid-item--width2
-    width: 100%
-
 
 .blur-me
-  filter: grayscale(0%) blur(0.5px) brightness(100%)
+  img
+    filter: grayscale(0%) blur(0px) brightness(100%)
     opacity: 1
     //transform: scale(.995)
     box-shadow: none
 
 
 .unblur-me
+  img
     filter: grayscale(0%) blur(0px) brightness(100%)
     opacity: 1
     //transform: scale(.995)

scripts/masonry_conf.js

@@ -1,8 +1,7 @@
 var elem = document.querySelector('.grid');
 var msnry = new Masonry( elem, {
     // options
-    itemSelector: '.grid-item',
+    itemSelector: '.grid-item-padding',
-    columnWidth: 240,
+    columnWidth: '.grid-sizer',
-    gutter: 10,
+    percentPosition: true
-    fitWidth: true
 });