From 57892a4d5a2215dd4e06aeb0526e3cc1b363a284 Mon Sep 17 00:00:00 2001
From: vupham <vuquangpham2909@gmail.com>
Date: Wed, 16 Nov 2022 17:32:21 +0700
Subject: [PATCH] :zap: generate CSS file for new config

---
 css/extra.css | 55 +++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 css/extra.css

diff --git a/css/extra.css b/css/extra.css
new file mode 100644
index 0000000..11880bb
--- /dev/null
+++ b/css/extra.css
@@ -0,0 +1,55 @@
+/**
+ * Flex grid
+ */
+.flex-grid-template {
+  --grid-gap-x:30px;
+  --grid-gap-y:30px;
+  --grid-col:3;
+  /* calculate new width */
+  --grid-gap-x-total:calc(var(--grid-gap-x) * (var(--grid-col) - 1));
+  --grid-space-each:calc(var(--grid-gap-x-total) / var(--grid-col));
+  display:flex;
+  flex-wrap:wrap;
+  gap:var(--grid-gap-y) var(--grid-gap-x);
+}
+
+.flex-grid-template > * {
+  width:calc(100% / var(--grid-col) - var(--grid-space-each));
+}
+
+@media only screen and (max-width:768px) {
+  .flex-grid-template {
+    --grid-col:2;
+  }
+}
+@media only screen and (max-width:480px) {
+  .flex-grid-template {
+    --grid-col:1;
+  }
+}
+/**
+ * Background object fit
+ */
+.img-wrapper-cover > img {
+  object-position:center center;
+  height:100%;
+  width:100%;
+  min-height:100%;
+  min-width:100%;
+  max-height:100%;
+  max-width:100%;
+  display:block;
+  object-fit:cover;
+}
+
+.img-wrapper-contain > img {
+  object-position:center center;
+  height:100%;
+  width:100%;
+  min-height:100%;
+  min-width:100%;
+  max-height:100%;
+  max-width:100%;
+  display:block;
+  object-fit:contain;
+}