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;
+}
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
new file mode 100644
index 0000000..5b47434
--- /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: map-get($breakpoints, "sm")) {
+  .flex-grid-template {
+    --grid-col: 2;
+  }
+}
+
+@media only screen and (max-width: map-get($breakpoints, "xs")) {
+  .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