docs: Make images responsive

docs/docs/guides/DEVICES.mdx

@@ -159,7 +159,7 @@ const device = getCameraDevice(devices, 'back', {
 This will try to find a [`CameraDevice`](/docs/api/interfaces/CameraDevice) that consists of all three physical Camera Devices, or the next best match (e.g. "Dual-Camera", or just a single wide-angle-camera) if not found. With the "Triple-Camera", we can now zoom out to a wider field of view:
 
 <div align="center">
-  <img src="/img/multi-camera.gif" width="55%" />
+  <img class="doc-image" src="/img/multi-camera.gif" />
 </div>
 
 If you want to do the filtering/sorting fully yourself, you can also just get all devices, then implement your own filter:

docs/docs/guides/HDR.mdx

@@ -13,8 +13,8 @@ import useBaseUrl from '@docusaurus/useBaseUrl'
 HDR ("High Dynamic Range") is a capture mode that captures colors in a much wider range, allowing for much better details and brighter colors.
 
 <div align="center">
-  <img src="/img/sdr_comparison.png" width="51%" />
+  <img class="doc-image" src="/img/sdr_comparison.png" />
-  <img src="/img/hdr_comparison.png" width="51%" />
+  <img class="doc-image" src="/img/hdr_comparison.png" />
 </div>
 
 ### Photo HDR
@@ -22,7 +22,7 @@ HDR ("High Dynamic Range") is a capture mode that captures colors in a much wide
 Photo HDR is accomplished by running three captures instead of one, an underexposed photo, a normal photo, and an overexposed photo. Then, these images are fused together to create darker darks and brighter brights.
 
 <div align="center">
-  <img src="/img/hdr_photo_demo.webp" width="65%" />
+  <img class="doc-image" src="/img/hdr_photo_demo.webp" />
 </div>
 
 ### Video HDR

docs/docs/guides/STABILIZATION.mdx

@@ -13,7 +13,7 @@ import useBaseUrl from '@docusaurus/useBaseUrl'
 Video Stabilization is an algorithm that stabilizes the recorded video to smoothen any jitters, shaking, or abrupt movements from the user's camera movement.
 
 <div align="center">
-  <img src="/img/action_mode_demo.gif" width="65%" />
+  <img class="doc-image" src="/img/action_mode_demo.gif" />
 </div>
 
 There are multiple different approaches to Video Stabilization, either software- or hardware-based. Video Stabilization always crops the image to a smaller view area so it has room to shift the image around, so expect a "zoomed-in" effect. Also, since Video Stabilization is a complex algorithm, enabling it will increase the time the Camera takes to initialize.

docs/docs/guides/ZOOMING.mdx

@@ -30,7 +30,7 @@ A Camera device has different minimum, maximum and neutral zoom values. Those va
 * The `neutralZoom` value is often `1`, but can be larger than `1` for devices with "fish-eye" (ultra-wide-angle) cameras. In those cases, the user expects to be at whatever zoom value `neutralZoom` is (e.g. `2`) per default, and if he tries to zoom out even more, he goes to `minZoom` (`1`), which switches over to the "fish-eye" (ultra-wide-angle) camera as seen in this GIF:
 
 <div align="center">
-  <img src="/img/multi-camera.gif" width="55%" />
+  <img class="doc-image" src="/img/multi-camera.gif" />
 </div>
 
 The Camera's `zoom` property expects values to be in the same "factor" scale as the `minZoom`, `neutralZoom` and `maxZoom` values - so if you pass `zoom={device.minZoom}` it is at the minimum available zoom, where as if you pass `zoom={device.maxZoom}` the maximum zoom value possible is zoomed in. It is recommended that you start at `device.neutralZoom` and let the user manually zoom out to the fish-eye camera on demand (if available).

docs/src/css/custom.css

@@ -19,15 +19,35 @@
   --docusaurus-highlighted-code-line-bg: rgb(61, 63, 67);
 }
 
-img {
+/* Images inside the docs that are centered/inside text */
+.doc-image {
   border-radius: 15px;
+  max-width: 55%;
+  max-height: 30vh;
+}
+@media (max-width: 600px) {
+  .doc-image {
+    max-width: 80%;
+    max-height: 50vh;
+  }
+}
+@media (min-width: 600px) and (max-width: 997px) {
+  .doc-image {
+    max-width: 55%;
+    max-height: 50vh;
+  }
+}
+@media (min-width: 997px) and (max-width: 1145px) {
+  .doc-image {
+    max-width: 80%;
+    max-height: 30vh;
+  }
 }
 
 /* align image to the right */
 .image-container {
   float: right;
 }
-
 /* mobile screen; align center */
 @media (max-width: 600px) {
   .image-container {
@@ -35,14 +55,12 @@ img {
       text-align: center;
   }
 }
-
 /* wider screen; align right again */
 @media (min-width: 600px) and (max-width: 997px) {
   .image-container {
     float: right;
   }
 }
-
 /* even wider screen but with sidebars; align center cuz we dont have enough space for right */
 @media (min-width: 997px) and (max-width: 1145px) {
   .image-container {