feat: style for wide mdx images

apps/www/styles/index.css

@@ -251,9 +251,34 @@ table {
 *
 */
 .next-image--dynamic-fill {
+  display: block;
   width: 100%;
+  border-radius: 6px;
+  overflow: hidden;
   grid-column: 1 / -1;
 }
+.next-image--dynamic-fill.wide {
+  @apply my-0 max-w-none -mx-8 w-[calc(100%_+_4rem)];
+}
+@media (min-width: 560px) {
+  .next-image--dynamic-fill.wide {
+    width: calc(100% + 6rem);
+    margin: 0 -3rem;
+  }
+}
+@media (min-width: 1280px) {
+  .next-image--dynamic-fill.wide {
+    width: calc(100% + 10rem);
+    margin: 0 -5rem;
+  }
+}
+@media (min-width: 1535px) {
+  .next-image--dynamic-fill.wide {
+    width: calc(100% + 14rem);
+    margin: 0 -7rem;
+  }
+}
+
 .next-image--dynamic-fill > span {
   position: relative !important;
 }