gallery, fixes, etc.

assets/scss/_common.scss

@@ -456,4 +456,101 @@ details[open] summary {
 
 .fb-tile-icon {
   font-size: 96px;
-}
+}
+
+.img-slider{
+  position: relative;
+  margin: 10px;
+  width: 95%;
+  height: 500px;
+  background: #1D212B;
+}
+
+.img-slider .is-slide{
+  z-index: 1;
+  position: absolute;
+  width: 100%;
+  clip-path: circle(0% at 0 50%);
+}
+
+.img-slider .is-slide.active{
+  clip-path: circle(150% at 0 50%);
+  transition: 2s;
+  transition-property: clip-path;
+}
+
+.img-slider .is-slide img{
+  z-index: 1;
+  width: 100%;
+  border-radius: 5px;
+}
+
+.img-slider .is-navigation{
+  z-index: 2;
+  position: absolute;
+  display: flex;
+  bottom: 20px;
+  left: 50%;
+  border-radius: 10px;
+  transform: translateX(-50%);
+  background-color: #1a1a37;
+}
+
+.img-slider .is-navigation .is-btn{
+  background: rgba(255, 255, 255, 0.5);
+  width: 12px;
+  height: 12px;
+  margin: 10px;
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+.img-slider .is-navigation .is-btn.active{
+  background: #2696E9;
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
+}
+
+@media (max-width: 820px){
+  .img-slider{
+    width: 600px;
+    height: 375px;
+  }
+
+  .img-slider .is-navigation{
+    bottom: 25px;
+  }
+
+  .img-slider .is-navigation .is-btn{
+    width: 10px;
+    height: 10px;
+    margin: 8px;
+  }
+}
+
+@media (max-width: 620px){
+  .img-slider{
+    width: 400px;
+    height: 250px;
+  }
+
+  .img-slider .is-navigation{
+    bottom: 15px;
+  }
+
+  .img-slider .is-navigation .is-btn{
+    width: 8px;
+    height: 8px;
+    margin: 6px;
+  }
+}
+
+@media (max-width: 420px){
+  .img-slider{
+    width: 320px;
+    height: 200px;
+  }
+
+  .img-slider .is-navigation{
+    bottom: 10px;
+  }
+}