GalleryExample

StyleSheets/ExampleStructure.css

@@ -12,6 +12,12 @@
     border:none;
     background-color: transparent;
 }
+.hidden{
+    display: none !important;
+}
+.FlexWrap{
+    flex-wrap: wrap;
+}
 body{
     max-width: 100vw;
     overflow-x:hidden;
@@ -231,3 +237,33 @@ body{
         align-content: center;
     }
 }
+
+/*Gallery Stuff*/
+.GalleryImageGridContainer:hover{
+    filter: drop-shadow(#28947f -1.5vh 1.5vh);
+    cursor: pointer;
+    transform: translate(0.25vh,-0.25vh) scale(1.01);
+}
+.GalleryImageGridContainer.Wide{
+    width:18rem;
+    height: 14rem;
+}
+.GalleryImageGridContainer{
+    margin: 1vh;
+    width: 14rem;
+    height: 14rem;
+    transition: 0.25s;
+}
+
+@media only screen and (max-aspect-ratio: 12/9) {
+    .GalleryImageGridContainer.Wide{
+        width:8rem !important;
+        height: 6rem !important;
+    }
+    .GalleryImageGridContainer{
+        margin: 1rem;
+        width: 6rem !important;
+        height: 6rem !important;
+        transition: 0.25s;
+    }
+}