diff --git a/stylelint.config.js b/stylelint.config.js
index 2227808a..ce1a5d7e 100644
--- a/stylelint.config.js
+++ b/stylelint.config.js
@@ -15,5 +15,6 @@ export default stylelintConfig({
     'declaration-block-no-redundant-longhand-properties': [true, {
       ignoreShorthands: ['inset'],
     }],
+    'media-feature-range-notation': null,
   },
 })
diff --git a/theme/src/client/components/BlogAside.vue b/theme/src/client/components/BlogAside.vue
index 0f03879e..3b9f786e 100644
--- a/theme/src/client/components/BlogAside.vue
+++ b/theme/src/client/components/BlogAside.vue
@@ -35,10 +35,11 @@ const { hasBlogExtract, tags, archives } = useBlogExtract()
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .blog-aside-wrapper {
   position: sticky;
   top: calc(var(--vp-nav-height) + 2rem);
+  display: none;
   width: 270px;
   padding: 1rem 0;
   margin-top: 2rem;
@@ -46,22 +47,22 @@ const { hasBlogExtract, tags, archives } = useBlogExtract()
   margin-left: 2rem;
   text-align: center;
   border-left: solid 1px var(--vp-c-divider);
-
-  img {
-    width: 50%;
-    margin: auto;
-  }
-
-  h3 {
-    margin-top: 1.5rem;
-    font-size: 16px;
-    font-weight: 600;
-  }
 }
 
-@media (width <= 768px) {
+.blog-aside-wrapper img {
+  width: 50%;
+  margin: auto;
+}
+
+.blog-aside-wrapper h3 {
+  margin-top: 1.5rem;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+@media (width >= 768px) {
   .blog-aside-wrapper {
-    display: none;
+    display: block;
   }
 }
 
diff --git a/theme/src/client/styles/code.scss b/theme/src/client/styles/code.scss
index 1af415c7..43e0fcab 100644
--- a/theme/src/client/styles/code.scss
+++ b/theme/src/client/styles/code.scss
@@ -208,7 +208,7 @@ div[class*="language-"] {
 }
 
 // narrow mobile
-@media (width <= 419px) {
+@media (max-width: 419px) {
   .plume-content {
     div[class*="language-"] {
       margin: 0.85rem -1.5rem;
diff --git a/theme/src/client/styles/content.scss b/theme/src/client/styles/content.scss
index 8ac8e934..12a292ba 100644
--- a/theme/src/client/styles/content.scss
+++ b/theme/src/client/styles/content.scss
@@ -66,7 +66,7 @@
   opacity: 1;
 }
 
-@media (width >= 768px) {
+@media (min-width: 768px) {
   .plume-content h1 {
     font-size: 32px;
     line-height: 40px;
diff --git a/theme/src/client/styles/md-enhance.scss b/theme/src/client/styles/md-enhance.scss
index d676d233..b5816cb4 100644
--- a/theme/src/client/styles/md-enhance.scss
+++ b/theme/src/client/styles/md-enhance.scss
@@ -1,10 +1,4 @@
 .plume-content {
-  @media (width <= 419px) {
-    .vp-code-demo {
-      margin: 8px -12px;
-    }
-  }
-
   .hint-container {
     padding: 16px 16px 8px;
     font-size: var(--vp-custom-block-font-size);
@@ -193,6 +187,13 @@
     }
   }
 
+  /* stylelint-disable-next-line order/order */
+  @media (max-width: 419px) {
+    .vp-code-demo {
+      margin: 8px -12px;
+    }
+  }
+
   .task-list-container {
     padding-left: 0;