Fix cropping in image gallery grid. Fix responsive issues on landing page.

src/styles/_cards.sass

@@ -11,12 +11,17 @@
 		.card-image
 			background-color: #ccc
 			border-radius: 0
-			height: 203px
+			height: 160px
-			max-height: 203px
+			max-height: 160px
-			min-height: 203px
+			min-height: 160px
-			margin: 5px auto 10px auto
+			margin: 5px auto 0
 			overflow: hidden
 			width: 100%
+			+media-breakpoint-up(sm)
+				margin-bottom: 10px
+				height: 203px
+				max-height: 203px
+				min-height: 203px
 			img
 				height: 100%
 				object-fit: cover

src/styles/_gallery.sass

@@ -1,9 +1,53 @@
 .gallery
-  h2
+  .cta-arrow
-    margin-bottom: 40px
+    margin-top: 20px
   .container
     max-width: 1190px
-    .col-sm-3
+    padding: 0
-      padding: 0 20px 40px
+    +media-breakpoint-up(sm)
+      padding-right: 15px
+      padding-left: 15px
+  .thumbnail
+    float: left
+    position: relative
+    width: 32.8%
+    padding-bottom: 32.9%
+    margin: 0.4%
+    overflow: hidden
+    // Fixes Thumbnail Spacing
+    &:nth-of-type(1),
+    &:nth-of-type(2),
+    &:nth-of-type(3)
+      margin-top: 0
+    &:nth-of-type(1),
+    &:nth-of-type(4),
+    &:nth-of-type(7)
+      margin-left: 0
+    &:nth-of-type(3),
+    &:nth-of-type(6)
+      margin-right: 0
+    +media-breakpoint-up(sm)
+      width: 22.4%
+      padding-bottom: 22.4%
+      margin: 1.73%
+      &:nth-of-type(4)
+        margin-top: 0
+      &:nth-of-type(1),
+      &:nth-of-type(5)
+        margin-left: 0
+      &:nth-of-type(4),
+      &:nth-of-type(7)
+        margin-left: 1.73%
+      &:nth-of-type(3),
+      &:nth-of-type(6)
+        margin-right: 1.73%
+      &:nth-of-type(4),
+      &:nth-of-type(8)
+        margin-right: 0
+  .thumbnail-container
+    position: absolute
+    width: 100%
+    height: 100%
     img
-      width: 100%
+      width: 300%
+      transform: translate(-20%, -10%)

src/styles/_navbar-secondary.sass

@@ -5,9 +5,11 @@
 	overflow-y: hidden
 .navbar-secondary
 	max-width: 700px
-	margin-bottom: 56px
+	margin-bottom: 40px
 	padding-left: 0
 	border-bottom: 1px solid $gray
+	+media-breakpoint-up(sm)
+		margin-bottom: 56px
 	.nav
 		display: flex
 		flex-wrap: nowrap

src/styles/project-landing.sass

@@ -10,17 +10,21 @@
 @import ../styles/footer
 
 .cta-arrow
-  padding-left: 11px
+  img
+    padding-left: 11px
 .node-details-title
   &.container
     max-width: 730px
 section
-  margin-top: 152px
+  margin-top: 104px
+  +media-breakpoint-up(sm)
+    margin-top: 152px
   &:first-child
     margin-top: 0
-.node-extra
   h2
-    margin-bottom: 40px
+    margin-bottom: 24px
+    +media-breakpoint-up(sm)
+      margin-bottom: 40px
 .container.card-container
   margin-top: 0
   .card

src/templates/projects/landing.pug

@@ -154,43 +154,43 @@ header
 		//- a.btn(href="{{ url_for('projects.view_node', project_url=project.url, node_id=featured_node_id) }}") See more
 		//- | {% endif %}
 		.container
-			.row
+			.thumbnail.expand-image-links
-				.col-4.col-sm-3
+				.thumbnail-container
 					a(href="#")
-						//- img(src="../../../static/assets/img/landing-page/gallery/hero-gallery-thumbnail-8.jpg")
+						img(src="../../../static/assets/img/landing-page/gallery/hero-gallery-thumbnail-1.jpg")
-						img(src="http://placehold.it/260x260")
+			.thumbnail.expand-image-links
-				.col-4.col-sm-3
+				.thumbnail-container
 					a(href="#")
-						//- img(src="../../../static/assets/img/landing-page/gallery/hero-gallery-thumbnail-7.jpg")
+						img(src="../../../static/assets/img/landing-page/gallery/hero-gallery-thumbnail-2.jpg")
-						img(src="http://placehold.it/260x260")
+			.thumbnail.expand-image-links
-				.col-4.col-sm-3
+				.thumbnail-container
 					a(href="#")
-						//- img(src="../../../static/assets/img/landing-page/gallery/hero-gallery-thumbnail-6.png")
+						img(src="../../../static/assets/img/landing-page/gallery/hero-gallery-thumbnail-3.png")
-						img(src="http://placehold.it/260x260")
+			.thumbnail.expand-image-links
-				.col-4.col-sm-3
+				.thumbnail-container
 					a(href="#")
-						//- img(src="../../../static/assets/img/landing-page/gallery/hero-gallery-thumbnail-5.png")
+						img(src="../../../static/assets/img/landing-page/gallery/hero-gallery-thumbnail-4.png")
-						img(src="http://placehold.it/260x260")
+			.thumbnail.expand-image-links
-				.col-4.col-sm-3
+				.thumbnail-container
 					a(href="#")
-						//- img(src="../../../static/assets/img/landing-page/gallery/hero-gallery-thumbnail-4.png")
+						img(src="../../../static/assets/img/landing-page/gallery/hero-gallery-thumbnail-5.png")
-						img(src="http://placehold.it/260x260")
+			.thumbnail.expand-image-links
-				.col-4.col-sm-3
+				.thumbnail-container
 					a(href="#")
-						//- img(src="../../../static/assets/img/landing-page/gallery/hero-gallery-thumbnail-3.png")
+						img(src="../../../static/assets/img/landing-page/gallery/hero-gallery-thumbnail-6.png")
-						img(src="http://placehold.it/260x260")
+			.thumbnail.expand-image-links
-				.col-4.col-sm-3
+				.thumbnail-container
 					a(href="#")
-						//- img(src="../../../static/assets/img/landing-page/gallery/hero-gallery-thumbnail-2.jpg")
+						img(src="../../../static/assets/img/landing-page/gallery/hero-gallery-thumbnail-7.jpg")
-						img(src="http://placehold.it/260x260")
+			.thumbnail.expand-image-links
-				.col-4.col-sm-3
+				.thumbnail-container
 					a(href="#")
-						//- img(src="../../../static/assets/img/landing-page/gallery/hero-gallery-thumbnail-1.jpg")
+						img(src="../../../static/assets/img/landing-page/gallery/hero-gallery-thumbnail-8.jpg")
-						img(src="http://placehold.it/260x260")
+			.clearfix
-		p.text-center
+			p.cta-arrow.text-center
-			a(href="#")
+				a(href="#")
-				| See Hero Gallery 
+					| See Hero Gallery 
-				img.cta-arrow(src="../../static/assets/img/icons/icon-cta-arrow.svg")
+					img(src="../../static/assets/img/icons/icon-cta-arrow.svg")
 						
 
 
@@ -238,10 +238,11 @@ header
 							h4.card-title
 								a(href="#") Title
 							p.card-text Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur porro similique dolorum id quos dolore!
-		p.text-center
+			.clearfix
-			a(href="#")
+			p.cta-arrow.text-center
-				| See All Updates
+				a(href="#")
-				img.cta-arrow(src="../../static/assets/img/icons/icon-cta-arrow.svg")
+					| See All Updates
+					img(src="../../static/assets/img/icons/icon-cta-arrow.svg")
 		//- | {% if activity_stream %}
 		//- .node-updates
 		//- 	ul.node-updates-list