diff --git a/src/resources/css/extends/grid.css b/src/resources/css/extends/grid.css
index 416bb87..75a0fdc 100644
--- a/src/resources/css/extends/grid.css
+++ b/src/resources/css/extends/grid.css
@@ -1,3 +1,24 @@
 .auto-cols-max-fr {
     grid-template-column: max-content 1fr;
 }
+
+.hexagon-container {
+    --s: 150px; /* control the size */
+    --g: 10px; /* control the gap */
+    display: grid;
+    margin: calc(var(--s) + var(--g));
+}
+
+.hexagon-container > .hexagon {
+    grid-area: 1/1;
+    width: var(--s);
+    aspect-ratio: 1.15;
+    object-fit: cover;
+    clip-path: polygon(25% 0%, 75% 0%, 100% 50%,75% 100%,25% 100%,0 50%);
+    /*transform: translate(var(--_x,0),var(--_y,0)) scale(var(--_t,1));*/
+}
+
+.hexagon-container > .hexagon:hover {
+    --_t: 1.2;
+    z-index: 1;
+}