diff --git a/assets/scss/_globals.scss b/assets/scss/_globals.scss
index d3b2b0a..66985a5 100644
--- a/assets/scss/_globals.scss
+++ b/assets/scss/_globals.scss
@@ -19,3 +19,6 @@ $site-menu__header-height: 3rem;
 
 $gallery-featured-width: 20rem;
 $gallery-featured-width--compact: 12rem;
+
+$gallery-thumbs-height: 8rem;
+$gallery-thumbs-height--compact: 6rem;
diff --git a/components/GalleryFeatured.vue b/components/GalleryFeatured.vue
index 3b75e2f..9353de8 100644
--- a/components/GalleryFeatured.vue
+++ b/components/GalleryFeatured.vue
@@ -23,9 +23,7 @@ export default {
 
 <style lang="scss" scoped>
 .featured-image {
-  height: 0;
   width: 100%;
-  padding-top: 100%;
   background-size: cover;
   background-position: center center;
   overflow: hidden;
@@ -62,6 +60,12 @@ export default {
     transition: opacity .3s; // TEMP
     padding: 8px;
   }
+
+  .featured-image {
+    height: 0;
+    padding-top: 100%;
+  }
+
 }
 
 </style>
diff --git a/components/GalleryThumbs.vue b/components/GalleryThumbs.vue
index 00377f1..be166ce 100644
--- a/components/GalleryThumbs.vue
+++ b/components/GalleryThumbs.vue
@@ -283,8 +283,6 @@ export default {
 }
 
 @media (min-width: $bp__layout) {
-  $thumbs-height: 8rem;
-
   .mobile-only {
     display: none;
   }
@@ -298,9 +296,9 @@ export default {
   }
 
   .thumb-container {
-    height: $thumbs-height;
-    width: $thumbs-height * 1.6;
-    flex: 0 0 $thumbs-height * 1.6;
+    height: $gallery-thumbs-height--compact;
+    width: $gallery-thumbs-height--compact * 1.6;
+    flex: 0 0 $gallery-thumbs-height--compact * 1.6;
   }
 
   .gallery__thumbs {
@@ -309,18 +307,13 @@ export default {
 
   .gallery-thumbs__list {
     position: relative;
-    height: $thumbs-height;
-    flex: 0 0 $thumbs-height;
+    height: $gallery-thumbs-height--compact;
+    flex: 0 0 $gallery-thumbs-height--compact;
     bottom: 8px;
 
     overflow: hidden;
 
     transition: opacity .3s; // TEMP
-    /* opacity: .3; */
-
-    /* &:hover { */
-    /*   opacity: 1; */
-    /* } */
   }
 
   .gallery-thumbs__row-container {
@@ -351,8 +344,8 @@ export default {
   .thumb-nav {
     position: absolute;
     top: 1rem;
-    width: $thumbs-height - 2rem;
-    height: $thumbs-height - 2rem;
+    width: $gallery-thumbs-height--compact - 2rem;
+    height: $gallery-thumbs-height--compact - 2rem;
 
     transition: opacity .5s;
     opacity: 0;
@@ -375,4 +368,26 @@ export default {
   }
 }
 
+@media (min-width: $bp__gallery-compact) {
+  .gallery-thumbs__list {
+    height: $gallery-thumbs-height;
+    flex: 0 0 $gallery-thumbs-height;
+  }
+  
+  .thumb-container {
+    height: $gallery-thumbs-height;
+    width: $gallery-thumbs-height * 1.6;
+    flex: 0 0 $gallery-thumbs-height * 1.6;
+  }
+
+  .gallery-thumbs__list {
+    height: $gallery-thumbs-height;
+    flex: 0 0 $gallery-thumbs-height;
+  }
+
+  .thumb-nav {
+    width: $gallery-thumbs-height - 2rem;
+    height: $gallery-thumbs-height - 2rem;
+  }
+}
 </style>