diff --git a/site/themes/default/assets/scss/components/gallery.scss b/site/themes/default/assets/scss/components/gallery.scss
new file mode 100644
index 00000000..32c00bc7
--- /dev/null
+++ b/site/themes/default/assets/scss/components/gallery.scss
@@ -0,0 +1,63 @@
+.gallery-grid-item-title {
+    position: absolute;
+    color: #fff;
+    padding: 14px 20px 8px;
+    background: rgba(0,0,0,1);
+    font-size: 20px;
+    width: 100%;
+    text-align: center;
+    bottom: 0;
+    margin: 0;
+}
+
+.gallery-grid-item-img {
+    cursor: pointer;
+}
+
+/* clear fix */
+.gallery-grid:after {
+    content: "";
+    display: block;
+    clear: both;
+}
+
+/* ---- .grid-item ---- */
+
+.gallery-grid-item,
+.gallery-grid-sizer {
+    width: 33.333%;
+}
+
+.gallery-grid-item {
+    float: left;
+    padding: 10px;
+
+    > a {
+        display: block;
+        position: relative;
+    }
+}
+
+.gallery-grid-item img {
+    display: block;
+    width: 100%;
+}
+
+.gallery-img-box-left-bottom {
+    margin-right: 20px;
+    margin-bottom: 20px;
+}
+
+@media (max-width: 1024px) {
+    .gallery-grid-item-title {
+        font-size: 12px;
+    }
+}
+
+@media (max-width: 812px) {
+    .gallery-grid-item {
+        display: block;
+        float: none;
+        width: 100%;
+    }
+}
diff --git a/site/themes/default/assets/scss/simple.scss b/site/themes/default/assets/scss/simple.scss
index 3ac24f57..00a50424 100755
--- a/site/themes/default/assets/scss/simple.scss
+++ b/site/themes/default/assets/scss/simple.scss
@@ -19,6 +19,7 @@
 // Discrete, complete chunks of UI
 @import "components/nav";
 @import "components/blog";
+@import "components/gallery";
 @import "components/footer";
 
 // Thumps