From 24c2a74f3ffccfa396feb718878becda26c50857 Mon Sep 17 00:00:00 2001
From: Aroy-Art <39088602+Aroy-Art@users.noreply.github.com>
Date: Tue, 27 Jul 2021 19:02:58 +0200
Subject: [PATCH] Added masonry styling for porfolio

---
 assets/css/style.css | 47 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 47 insertions(+)

diff --git a/assets/css/style.css b/assets/css/style.css
index 13a2a01..baba005 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -961,6 +961,53 @@ a:hover {
     margin-right: -8px;
 }
 
+.wrapper { 
+  max-width: 1280px;
+  margin-right: auto;
+  margin-left: auto;
+  padding: 1.5em;
+}
+
+
+.masonry-wrapper {
+  padding: 1.5em;
+  max-width: auto;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.masonry {
+  display: grid;
+  grid-template-columns: repeat(1, minmax(100px,1fr));
+  grid-gap: 10px;
+  grid-auto-rows: 0;
+}
+
+@media only screen and (max-width: 1023px) and (min-width: 768px) {
+  .masonry {
+    grid-template-columns: repeat(2, minmax(100px,1fr));
+  }
+}
+@media only screen and (min-width: 1024px) {
+  .masonry {
+    grid-template-columns: repeat(4, minmax(100px,1fr));
+  }
+}
+.masonry-item, .masonry-content {
+  border-radius: 4px;
+  overflow: hidden;
+  width: 100%;
+  height: auto;
+}
+.masonry-item {
+  filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, .6));
+  transition: filter .25s ease-in-out;
+}
+.masonry-item:hover {
+  filter: drop-shadow(0px 5px 5px rgba(0, 56, 56, 0.774));
+}
+
+
 /*==================================================================
     Social sharing buttons from Sharingbuttons.io
 ==================================================================*/