diff --git a/template/overall_header.html b/template/overall_header.html
index a3e479c..1f1b1cb 100755
--- a/template/overall_header.html
+++ b/template/overall_header.html
@@ -48,9 +48,6 @@
})(document);
-
-
-
+
+
+
+
+
diff --git a/theme/css/mdui-custom.css b/theme/css/mdui-custom.css
index 6054161..af0230a 100644
--- a/theme/css/mdui-custom.css
+++ b/theme/css/mdui-custom.css
@@ -367,3 +367,61 @@ dl.bg-y-15-percent {
}
}
+.image-gallery {
+ /* Mobile first */
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+}
+
+.image-gallery .column {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+}
+
+.image-item img {
+ width: 100%;
+ border-radius: 5px;
+ height: 100%;
+ object-fit: cover;
+}
+
+@media only screen and (min-width: 768px) {
+ .image-gallery {
+ flex-direction: row;
+ }
+}
+
+/* overlay styles */
+
+.image-item {
+ position: relative;
+ cursor: pointer;
+}
+
+.overlay {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ background: rgba(57, 57, 57, 0.502);
+ top: 0;
+ left: 0;
+ transform: scale(0);
+ transition: all 0.2s 0.1s ease-in-out;
+ color: #fff;
+ /* center overlay content */
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+/* hover */
+.image-item:hover .overlay {
+ transform: scale(1);
+}
+
+/* mdui-typo */
+.mdui-typo code, .mdui-typo kbd, .mdui-typo pre, .mdui-typo pre tt, .mdui-typo samp {
+ font-family: 'LXGW WenKai Screen',Consolas,Courier,'Courier New',monospace;
+}