diff --git a/package.json b/package.json
index bc76a650f..a6b8859f7 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
     "dev:debug": "node --inspect scripts/dev.js",
     "build": "node scripts/build.js",
     "postinstall": "node scripts/linkDependencies.js && lerna link",
-    "lint": "prettier --write --parser typescript 'packages/**/*.ts'",
+    "lint": "prettier --write --parser typescript \"packages/**/*.ts\"",
     "test": "jest",
     "test:e2e": "jest --e2e=true --runInBand",
     "test:cypress": "cypress run",
diff --git a/packages/commons/interfaces/models/content/cms/CmsPage.ts b/packages/commons/interfaces/models/content/cms/CmsPage.ts
index 71b9e078c..2c9c29e7e 100644
--- a/packages/commons/interfaces/models/content/cms/CmsPage.ts
+++ b/packages/commons/interfaces/models/content/cms/CmsPage.ts
@@ -88,19 +88,31 @@ export interface CmsBlock {
   slots: CmsSlot[];
 }
 
+/**
+ * @alpha
+ */
 export enum SectionType {
   DEFAULT = "default",
 }
 
+/**
+ * @alpha
+ */
 export enum SizingMode {
   BOXED = "boxed",
 }
 
+/**
+ * @alpha
+ */
 export enum MobileBehavior {
   BOXED = "boxed",
   WRAP = "wrap",
 }
 
+/**
+ * @alpha
+ */
 export enum BackgroundMediaMode {
   COVER = "cover",
 }
diff --git a/packages/default-theme/cms/blocks/CmsBlockCategoryNavigation.vue b/packages/default-theme/cms/blocks/CmsBlockCategoryNavigation.vue
index 61ebedf23..c4817e503 100644
--- a/packages/default-theme/cms/blocks/CmsBlockCategoryNavigation.vue
+++ b/packages/default-theme/cms/blocks/CmsBlockCategoryNavigation.vue
@@ -32,9 +32,4 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../settings.scss';
-
-.cms-block-category-navigation {
-  @include desktop-size;
-}
 </style>
diff --git a/packages/default-theme/cms/blocks/CmsBlockCenterText.vue b/packages/default-theme/cms/blocks/CmsBlockCenterText.vue
new file mode 100644
index 000000000..bfc0bbec1
--- /dev/null
+++ b/packages/default-theme/cms/blocks/CmsBlockCenterText.vue
@@ -0,0 +1,64 @@
+<template>
+  <article class="cms-block-center-text">
+    <CmsGenericElement :content="getLeftContent" class="cms-block-center-text__image"/>
+    <CmsGenericElement :content="getCenterContent" class="cms-block-center-text__text"/>
+    <CmsGenericElement :content="getRightContent" class="cms-block-center-text__image"/>
+  </article>
+</template>
+
+<script>
+import CmsGenericElement from 'sw-cms/CmsGenericElement'
+
+export default {
+  name: 'CmsBlockCenterText',
+  components: {
+    CmsGenericElement
+  },
+  props: {
+    content: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  computed: {
+    getSlots() {
+      return this.content.slots || []
+    },
+    getLeftContent() {
+      return this.getSlots.find(({slot}) => slot === 'left')
+    },
+    getCenterContent() {
+      return this.getSlots.find(({slot}) => slot === 'center')
+    },
+    getRightContent() {
+      return this.getSlots.find(({slot}) => slot === 'right')
+    },
+  }
+};
+</script>
+
+<style lang="scss">
+@import '~@storefront-ui/vue/styles.scss';
+
+.cms-block-center-text {
+  display: flex;
+  flex-direction: column;
+
+  &__image, &__text {
+    margin: var(--spacer-sm);
+    flex: 1;
+    & img {
+      height: 340px;
+      object-fit: cover;
+      width: 100%;
+    }
+  }
+
+  @include for-desktop {
+    flex-direction: row;
+    justify-content: space-around;
+    align-items: center;
+  }
+}
+
+</style>
diff --git a/packages/default-theme/cms/blocks/CmsBlockDefault.vue b/packages/default-theme/cms/blocks/CmsBlockDefault.vue
index 02e8f6f74..e3ee92a71 100644
--- a/packages/default-theme/cms/blocks/CmsBlockDefault.vue
+++ b/packages/default-theme/cms/blocks/CmsBlockDefault.vue
@@ -35,6 +35,6 @@ export default {
 @import '../settings.scss';
 
 .cms-block-default {
-  @include desktop-size;
+  @include sizing-mode-boxed;
 }
 </style>
diff --git a/packages/default-theme/cms/blocks/CmsBlockImageBubbleRow.vue b/packages/default-theme/cms/blocks/CmsBlockImageBubbleRow.vue
index 2009dacc3..8ba3b8827 100644
--- a/packages/default-theme/cms/blocks/CmsBlockImageBubbleRow.vue
+++ b/packages/default-theme/cms/blocks/CmsBlockImageBubbleRow.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="cms-block-image-bubble-row">
+  <article class="cms-block-image-bubble-row">
     <CmsGenericElement
       :content="getLeftContent"
       class="cms-block-image-bubble-row__image"
@@ -12,17 +12,17 @@
       :content="getRightContent"
       class="cms-block-image-bubble-row__image"
     />
-  </div>
+  </article>
 </template>
 
 <script>
 import CmsGenericElement from 'sw-cms/CmsGenericElement'
 
 export default {
+  name: 'CmsBlockImageBubbleRow',
   components: {
     CmsGenericElement,
   },
-  name: 'CmsBlockImageBubbleRow',
   props: {
     content: {
       type: Object,
@@ -34,13 +34,13 @@ export default {
       return this.content.slots || []
     },
     getLeftContent() {
-      return this.getSlots.find((element) => element.slot === 'left')
+      return this.getSlots.find(({slot}) => slot === 'left')
     },
     getCenterContent() {
-      return this.getSlots.find((element) => element.slot === 'center')
+      return this.getSlots.find(({slot}) => slot === 'center')
     },
     getRightContent() {
-      return this.getSlots.find((element) => element.slot === 'right')
+      return this.getSlots.find(({slot}) => slot === 'right')
     },
   },
 }
diff --git a/packages/default-theme/cms/blocks/CmsBlockImageCover.vue b/packages/default-theme/cms/blocks/CmsBlockImageCover.vue
index 93d93282c..736265e2b 100644
--- a/packages/default-theme/cms/blocks/CmsBlockImageCover.vue
+++ b/packages/default-theme/cms/blocks/CmsBlockImageCover.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="cms-block-image-cover">
+  <article class="cms-block-image-cover">
     <CmsGenericElement v-if="getContent" :content="getContent" />
-  </div>
+  </article>
 </template>
 
 <script>
@@ -30,7 +30,5 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../settings.scss';
-
 
 </style>
diff --git a/packages/default-theme/cms/blocks/CmsBlockImageFourColumn.vue b/packages/default-theme/cms/blocks/CmsBlockImageFourColumn.vue
new file mode 100644
index 000000000..6ba97372f
--- /dev/null
+++ b/packages/default-theme/cms/blocks/CmsBlockImageFourColumn.vue
@@ -0,0 +1,68 @@
+<template>
+  <article class="cms-block-image-four-column">
+    <CmsGenericElement :content="getLeftContent" class="cms-block-image-four-column__image"/>
+    <CmsGenericElement :content="getCenterLeftContent" class="cms-block-image-four-column__image"/>
+    <CmsGenericElement :content="getCenterRightContent" class="cms-block-image-four-column__image"/>
+    <CmsGenericElement :content="getRightContent" class="cms-block-image-four-column__image"/>
+  </article>
+</template>
+
+<script>
+import CmsGenericElement from 'sw-cms/CmsGenericElement'
+
+export default {
+  name: 'CmsBlockImageFourColumn',
+  components: {
+    CmsGenericElement,
+  },
+  props: {
+    content: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  computed: {
+    getSlots() {
+      return this.content.slots || []
+    },
+    getLeftContent() {
+      return this.getSlots.find(({slot}) => slot === 'left')
+    },
+    getCenterLeftContent() {
+      return this.getSlots.find(({slot}) => slot === 'center-left')
+    },
+    getCenterRightContent() {
+      return this.getSlots.find(({slot}) => slot === 'center-right')
+    },
+    getRightContent() {
+      return this.getSlots.find(({slot}) => slot === 'right')
+    },
+  }
+};
+</script>
+
+<style lang="scss">
+@import '~@storefront-ui/vue/styles.scss';
+
+.cms-block-image-four-column {
+  display: flex;
+  flex-direction: column;
+
+  &__image {
+    margin: var(--spacer-sm);
+    flex: 1;
+    & img {
+      height: 340px;
+      object-fit: cover;
+      width: 100%;
+    }
+  }
+
+  @include for-desktop {
+    flex-direction: row;
+    justify-content: space-around;
+    align-items: center;
+  }
+}
+
+</style>
diff --git a/packages/default-theme/cms/blocks/CmsBlockImageHighlightRow.vue b/packages/default-theme/cms/blocks/CmsBlockImageHighlightRow.vue
new file mode 100644
index 000000000..1de71abc1
--- /dev/null
+++ b/packages/default-theme/cms/blocks/CmsBlockImageHighlightRow.vue
@@ -0,0 +1,65 @@
+<template>
+  <article class="cms-block-image-highlight-row">
+    <CmsGenericElement :content="getLeftContent" class="cms-block-image-highlight-row__image"/>
+    <CmsGenericElement :content="getCenterContent" class="cms-block-image-highlight-row__image"/>
+    <CmsGenericElement :content="getRightContent" class="cms-block-image-highlight-row__image"/>
+  </article>
+</template>
+
+<script>
+import CmsGenericElement from 'sw-cms/CmsGenericElement'
+
+export default {
+  name: 'CmsBlockImageHighlightRow',
+  components: {
+    CmsGenericElement,
+  },
+  props: {
+    content: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  computed: {
+    getSlots() {
+      return this.content.slots || []
+    },
+    getLeftContent() {
+      return this.getSlots.find(({slot}) => slot === 'left')
+    },
+    getCenterContent() {
+      return this.getSlots.find(({slot}) => slot === 'center')
+    },
+    getRightContent() {
+      return this.getSlots.find(({slot}) => slot === 'right')
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import '~@storefront-ui/vue/styles.scss';
+
+.cms-block-image-highlight-row {
+  display: flex;
+  flex-direction: column;
+
+  &__image {
+    margin: var(--spacer-sm);
+    flex: 1;
+    border: 12px solid #fff;
+    & img {
+      height: 340px;
+      object-fit: cover;
+      width: 100%;
+    }
+  }
+
+  @include for-desktop {
+    flex-direction: row;
+    justify-content: space-around;
+    align-items: center;
+  }
+}
+
+</style>
diff --git a/packages/default-theme/cms/blocks/CmsBlockImageSimpleGrid.vue b/packages/default-theme/cms/blocks/CmsBlockImageSimpleGrid.vue
new file mode 100644
index 000000000..bbea6e78a
--- /dev/null
+++ b/packages/default-theme/cms/blocks/CmsBlockImageSimpleGrid.vue
@@ -0,0 +1,79 @@
+<template>
+  <article class="sw-image-simple-grid">
+    <section class="sw-image-simple-grid__left-images">
+      <CmsGenericElement :content="getLeftTopContent" class="sw-image-simple-grid__image"/>
+      <CmsGenericElement :content="getLeftBottomContent" class="sw-image-simple-grid__image"/>
+    </section>
+    <CmsGenericElement :content="getRightContent" class="sw-image-simple-grid__image sw-image-simple-grid__image--right"/>
+  </article>
+</template>
+
+<script>
+import CmsGenericElement from 'sw-cms/CmsGenericElement'
+
+export default {
+  name: 'CmsBlockImageSimpleGrid',
+  components: {
+    CmsGenericElement
+  },
+  props: {
+    content: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  computed: {
+    getSlots() {
+      return this.content.slots || []
+    },
+    getLeftTopContent() {
+      return this.getSlots.find(({slot}) => slot === 'left-top')
+    },
+    getLeftBottomContent() {
+      return this.getSlots.find(({slot}) => slot === 'left-bottom')
+    },
+    getRightContent() {
+      return this.getSlots.find(({slot}) => slot === 'right')
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import '~@storefront-ui/vue/styles.scss';
+
+.sw-image-simple-grid {
+  display: flex;
+  flex-direction: column;
+
+  &__left-images {
+    margin: var(--spacer-sm);
+  }
+
+  &__image {
+    margin: var(--spacer-sm);
+    img {
+      height: 340px;
+      object-fit: cover;
+    }
+  }
+  @include for-desktop {
+    justify-content: space-around;
+    align-items: center;
+    flex-direction: row;
+    
+    &__left-images {
+      display: flex;
+      flex-direction: column;
+    }
+    &__image {
+      &--right {
+        img {
+          height: 712px;
+        }
+      }
+    }
+  }
+}
+
+</style>
diff --git a/packages/default-theme/cms/blocks/CmsBlockImageTextCover.vue b/packages/default-theme/cms/blocks/CmsBlockImageTextCover.vue
new file mode 100644
index 000000000..c137aa7e8
--- /dev/null
+++ b/packages/default-theme/cms/blocks/CmsBlockImageTextCover.vue
@@ -0,0 +1,60 @@
+<template>
+  <article class="cms-block-image-text-cover">
+    <CmsGenericElement :content="getLeftContent" class="cms-block-image-text-cover__image"/>
+    <CmsGenericElement :content="getRightContent" class="cms-block-image-text-cover__text"/>
+  </article>
+</template>
+
+<script>
+import CmsGenericElement from 'sw-cms/CmsGenericElement'
+
+export default {
+  name: 'CmsBlockImageTextCover',
+  components: {
+    CmsGenericElement
+  },
+  props: {
+    content: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  computed: {
+    getSlots() {
+      return this.content.slots || []
+    },
+    getLeftContent() {
+      return this.getSlots.find(({slot}) => slot === 'left')
+    },
+    getRightContent() {
+      return this.getSlots.find(({slot}) => slot === 'right')
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import '~@storefront-ui/vue/styles.scss';
+
+.cms-block-image-text-cover {
+  display: flex;
+  flex-direction: column;
+
+  &__image, &__text {
+    margin: var(--spacer-sm);
+    flex: 1;
+    & img {
+      height: 340px;
+      object-fit: cover;
+      width: 100%;
+    }
+  }
+
+  @include for-desktop {
+    flex-direction: row;
+    justify-content: space-around;
+    align-items: center;
+  }
+}
+
+</style>
\ No newline at end of file
diff --git a/packages/default-theme/cms/blocks/CmsBlockImageThreeColumn.vue b/packages/default-theme/cms/blocks/CmsBlockImageThreeColumn.vue
new file mode 100644
index 000000000..dd0e3a198
--- /dev/null
+++ b/packages/default-theme/cms/blocks/CmsBlockImageThreeColumn.vue
@@ -0,0 +1,63 @@
+<template>
+  <article class="cms-block-image-three-column">
+    <CmsGenericElement :content="getLeftContent" class="cms-block-image-three-column__image"/>
+    <CmsGenericElement :content="getCenterContent" class="cms-block-image-three-column__image"/>
+    <CmsGenericElement :content="getRightContent" class="cms-block-image-three-column__image"/>
+  </article>
+</template>
+
+<script>
+import CmsGenericElement from 'sw-cms/CmsGenericElement'
+
+export default {
+  components: {
+    CmsGenericElement,
+  },
+  name: 'CmsBlockImageThreeColumn',
+  props: {
+    content: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  computed: {
+    getSlots() {
+      return this.content.slots || []
+    },
+    getLeftContent() {
+      return this.getSlots.find(({slot}) => slot === 'left')
+    },
+    getCenterContent() {
+      return this.getSlots.find(({slot}) => slot === 'center')
+    },
+    getRightContent() {
+      return this.getSlots.find(({slot}) => slot === 'right')
+    },
+  }
+};
+</script>
+
+<style lang="scss">
+@import '~@storefront-ui/vue/styles.scss';
+
+.cms-block-image-three-column {
+  display: flex;
+  flex-direction: column;
+
+  &__image {
+    margin: var(--spacer-sm);
+    flex: 1;
+    & img {
+      height: 340px;
+      object-fit: cover;
+    }
+  }
+
+  @include for-desktop {
+    flex-direction: row;
+    justify-content: space-around;
+    align-items: center;
+  }
+}
+
+</style>
diff --git a/packages/default-theme/cms/blocks/CmsBlockImageThreeCover.vue b/packages/default-theme/cms/blocks/CmsBlockImageThreeCover.vue
new file mode 100644
index 000000000..7c1479d84
--- /dev/null
+++ b/packages/default-theme/cms/blocks/CmsBlockImageThreeCover.vue
@@ -0,0 +1,62 @@
+<template>
+  <article class="cms-block-image-three-cover">
+    <CmsGenericElement :content="getLeftContent" class="cms-block-image-three-cover__image"/>
+    <CmsGenericElement :content="getCenterContent" class="cms-block-image-three-cover__image"/>
+    <CmsGenericElement :content="getRightContent" class="cms-block-image-three-cover__image"/>
+  </article>
+</template>
+
+<script>
+import CmsGenericElement from 'sw-cms/CmsGenericElement'
+
+export default {
+  name: 'CmsBlockImageThreeCover',
+  components: {
+    CmsGenericElement,
+  },
+  props: {
+    content: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  computed: {
+    getSlots() {
+      return this.content.slots || []
+    },
+    getLeftContent() {
+      return this.getSlots.find(({slot}) => slot === 'left')
+    },
+    getCenterContent() {
+      return this.getSlots.find(({slot}) => slot === 'center')
+    },
+    getRightContent() {
+      return this.getSlots.find(({slot}) => slot === 'right')
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import '~@storefront-ui/vue/styles.scss';
+
+.cms-block-image-three-cover {
+  display: flex;
+  flex-direction: column;
+
+  &__image {
+    flex: 1 1 0;
+    & img {
+      height: 340px;
+      object-fit: cover;
+    }
+  }
+
+  @include for-desktop {
+    flex-direction: row;
+    justify-content: space-around;
+    align-items: center;
+  }
+}
+
+</style>
diff --git a/packages/default-theme/cms/blocks/CmsBlockImageTwoColumn.vue b/packages/default-theme/cms/blocks/CmsBlockImageTwoColumn.vue
new file mode 100644
index 000000000..eac0cf4e2
--- /dev/null
+++ b/packages/default-theme/cms/blocks/CmsBlockImageTwoColumn.vue
@@ -0,0 +1,60 @@
+<template>
+  <article class="cms-block-image-two-column">
+    <CmsGenericElement :content="getLeftContent" class="cms-block-image-two-column__image"/>
+    <CmsGenericElement :content="getRightContent" class="cms-block-image-two-column__image"/>
+  </article>
+</template>
+
+<script>
+import CmsGenericElement from 'sw-cms/CmsGenericElement'
+
+export default {
+  name: 'CmsBlockImageTwoColumn',
+  components: {
+    CmsGenericElement,
+  },
+  props: {
+    content: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  computed: {
+    getSlots() {
+      return this.content.slots || []
+    },
+    getLeftContent() {
+      return this.getSlots.find(({slot}) => slot === 'left')
+    },
+    getRightContent() {
+      return this.getSlots.find(({slot}) => slot === 'right')
+    },
+  }
+};
+</script>
+
+<style lang="scss">
+@import '~@storefront-ui/vue/styles.scss';
+
+.cms-block-image-two-column {
+  display: flex;
+  flex-direction: column;
+
+  &__image {
+    margin: var(--spacer-sm);
+    flex: 1;
+    & img {
+      height: 340px;
+      object-fit: cover;
+      width: 100%;
+    }
+  }
+
+  @include for-desktop {
+    flex-direction: row;
+    justify-content: space-around;
+    align-items: center;
+  }
+}
+
+</style>
diff --git a/packages/default-theme/cms/blocks/CmsBlockTextOnImage.vue b/packages/default-theme/cms/blocks/CmsBlockTextOnImage.vue
index 5d835297b..1d8bc1239 100644
--- a/packages/default-theme/cms/blocks/CmsBlockTextOnImage.vue
+++ b/packages/default-theme/cms/blocks/CmsBlockTextOnImage.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="cms-block-text-on-image">
+  <article class="cms-block-text-on-image">
     <CmsGenericElement
       v-if="getContent"
       :content="getContent"
       class="cms-block-text-on-image__content"
     />
-  </div>
+  </article>
 </template>
 
 <script>
@@ -34,7 +34,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../settings.scss';
 
 .cms-block-text-on-image {
   &__content {
diff --git a/packages/default-theme/cms/cmsMap.json b/packages/default-theme/cms/cmsMap.json
index 1aa6616ab..3cd6bd420 100644
--- a/packages/default-theme/cms/cmsMap.json
+++ b/packages/default-theme/cms/cmsMap.json
@@ -11,7 +11,15 @@
     "image": "CmsBlockDefault",
     "image-cover": "CmsBlockImageCover",
     "category-navigation": "CmsBlockCategoryNavigation",
-    "image-bubble-row": "CmsBlockImageBubbleRow"
+    "image-bubble-row": "CmsBlockImageBubbleRow",
+    "center-text": "CmsBlockCenterText",
+    "image-four-column": "CmsBlockImageFourColumn",
+    "image-highlight-row": "CmsBlockImageHighlightRow",
+    "image-simple-grid": "CmsBlockImageSimpleGrid",
+    "image-text-cover": "CmsBlockImageTextCover",
+    "image-three-column": "CmsBlockImageThreeColumn",
+    "image-three-cover": "CmsBlockImageThreeCover",
+    "image-two-column": "CmsBlockImageTwoColumn"
   },
   "elements": {
     "product-box": "CmsElementProductCard",
diff --git a/packages/default-theme/cms/elements/CmsElementText.vue b/packages/default-theme/cms/elements/CmsElementText.vue
index 0d5eb1c17..e69f2db74 100644
--- a/packages/default-theme/cms/elements/CmsElementText.vue
+++ b/packages/default-theme/cms/elements/CmsElementText.vue
@@ -29,7 +29,7 @@ export default {
 @import '../settings.scss';
 
 .cms-element-text {
-  @include desktop-size;
+  @include sizing-mode-boxed;
   padding: var(--spacer-xl);
 }
 </style>
diff --git a/packages/default-theme/cms/sections/CmsSectionDefault.vue b/packages/default-theme/cms/sections/CmsSectionDefault.vue
index a42b35447..d6467a65c 100644
--- a/packages/default-theme/cms/sections/CmsSectionDefault.vue
+++ b/packages/default-theme/cms/sections/CmsSectionDefault.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="sw-default-section">
+  <div class="sw-default-section" :class="{ 'sw-default-section--boxed': isSizingModeBoxed }">
     <CmsGenericBlock
       v-for="cmsBlock in getBlocks"
       :key="cmsBlock.id"
@@ -26,10 +26,19 @@ export default {
     getBlocks() {
       return this.content.blocks || []
     },
-  },
+    isSizingModeBoxed() {
+      return this.content.sizingMode === 'boxed'
+    }
+  }
 }
 </script>
 
 <style lang="scss" scoped>
 @import '../settings.scss';
+
+.sw-default-section {
+  &--boxed {
+    @include sizing-mode-boxed;
+  }
+}
 </style>
diff --git a/packages/default-theme/cms/sections/CmsSectionSidebar.vue b/packages/default-theme/cms/sections/CmsSectionSidebar.vue
index 00341714d..38783c67d 100644
--- a/packages/default-theme/cms/sections/CmsSectionSidebar.vue
+++ b/packages/default-theme/cms/sections/CmsSectionSidebar.vue
@@ -54,7 +54,7 @@ export default {
   display: flex;
   flex-direction: column;
 
-  @include desktop-size;
+  @include sizing-mode-boxed;
 
   @include for-desktop() {
     flex-direction: row;
diff --git a/packages/default-theme/cms/settings.scss b/packages/default-theme/cms/settings.scss
index 5d4bd85f9..5ddcf61c1 100644
--- a/packages/default-theme/cms/settings.scss
+++ b/packages/default-theme/cms/settings.scss
@@ -1,6 +1,6 @@
 @import '~@storefront-ui/vue/styles.scss';
 
-@mixin desktop-size {
+@mixin sizing-mode-boxed {
   @include for-desktop {
     max-width: 1320px;
     margin: 0 auto;
diff --git a/scripts/updateDependencies.js b/scripts/updateDependencies.js
index 60cd5eb84..a5a24610d 100644
--- a/scripts/updateDependencies.js
+++ b/scripts/updateDependencies.js
@@ -11,15 +11,15 @@ async function run() {
   const packagesDirPath = path.join(rootDirPath, "packages");
   const list = fs
     .list(packagesDirPath)
-    .map((filename) => path.join(packagesDirPath, filename))
-    .filter((file) => fs.exists(file) === "dir");
+    .map(filename => path.join(packagesDirPath, filename))
+    .filter(file => fs.exists(file) === "dir");
   list.push(rootDirPath);
 
   try {
     for (let index = 0; index < list.length; index++) {
       await execa("ncu", ["-i"], {
         stdio: "inherit",
-        cwd: list[index],
+        cwd: list[index]
       });
     }
     // This case will be used in future with -u flag
@@ -34,7 +34,7 @@ async function run() {
 
     await execa("yarn", [], {
       stdio: "inherit",
-      cwd: rootDirPath,
+      cwd: rootDirPath
     });
   } catch (e) {
     console.error(