From 0310338e37654743d6c7e1ea8210eb3ad67e1a65 Mon Sep 17 00:00:00 2001
From: vupham <vuquangpham2909@gmail.com>
Date: Wed, 16 Nov 2022 16:59:32 +0700
Subject: [PATCH 1/3] :zap: add extra for atomic css (flex-grid-template &
 image-object-fit)

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

diff --git a/scss/extra.scss b/scss/extra.scss
new file mode 100644
index 0000000..83430dc
--- /dev/null
+++ b/scss/extra.scss
@@ -0,0 +1,58 @@
+@import 'helpers';
+
+/**
+ * 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: 767px) {
+  .flex-grid-template {
+    --grid-col: 2;
+  }
+}
+
+@media only screen and (max-width: 480px) {
+  .flex-grid-template {
+    --grid-col: 1;
+  }
+}
+
+/**
+ * Background object fit
+ */
+@mixin img-object-fit {
+  object-position: center center;
+  height: 100%;
+  width: 100%;
+  min-height: 100%;
+  min-width: 100%;
+  max-height: 100%;
+  max-width: 100%;
+  display: block;
+}
+
+.img-wrapper-cover > img {
+  @include img-object-fit;
+  object-fit: cover;
+}
+
+.img-wrapper-contain > img {
+  @include img-object-fit;
+  object-fit: contain;
+}
\ No newline at end of file

From a02c1d20c7e45c3b570998c34091d2ffdfaaa695 Mon Sep 17 00:00:00 2001
From: vupham <vuquangpham2909@gmail.com>
Date: Wed, 16 Nov 2022 17:23:14 +0700
Subject: [PATCH 2/3] :zap: use SCSS to make flex-grid-template be flexbile
 base on breakpoints

---
 scss/_config.scss | 3 ++-
 scss/_defs.scss   | 3 ++-
 scss/extra.scss   | 4 ++--
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/scss/_config.scss b/scss/_config.scss
index c55646a..5518c73 100644
--- a/scss/_config.scss
+++ b/scss/_config.scss
@@ -35,7 +35,8 @@
 //$breakpoints: (
 //        "lg": 1280px,
 //        "md": 1024px,
-//        "sm": 480px,
+//        "sm": 768px,
+//        "xs": 480px,
 //);
 
 // vertical spacing
diff --git a/scss/_defs.scss b/scss/_defs.scss
index abda61b..76afe86 100644
--- a/scss/_defs.scss
+++ b/scss/_defs.scss
@@ -30,7 +30,8 @@ $variables: ();
 $breakpoints: (
         "lg": 1180px,
         "md": 1024px,
-        "sm": 480px,
+        "sm": 768px,
+        "xs": 480px,
 );
 
 // font sizes
diff --git a/scss/extra.scss b/scss/extra.scss
index 83430dc..5b47434 100644
--- a/scss/extra.scss
+++ b/scss/extra.scss
@@ -21,13 +21,13 @@
   width: calc(100% / var(--grid-col) - var(--grid-space-each));
 }
 
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: map-get($breakpoints, "sm")) {
   .flex-grid-template {
     --grid-col: 2;
   }
 }
 
-@media only screen and (max-width: 480px) {
+@media only screen and (max-width: map-get($breakpoints, "xs")) {
   .flex-grid-template {
     --grid-col: 1;
   }

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 3/3] :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;
+}