diff --git a/exampleSite/content/docs/shortcodes/index.md b/exampleSite/content/docs/shortcodes/index.md
index b652c217..70a3f7ee 100644
--- a/exampleSite/content/docs/shortcodes/index.md
+++ b/exampleSite/content/docs/shortcodes/index.md
@@ -124,13 +124,13 @@ Call to action
 
 ## Carousel
 
-`carousel` is used to showcase multiple images in an interactive and visually appealing way. This allows a user to slide through multiple images while only taking up the vertical space of a single one. All images are displayed using the full width of the parent component and using one of the predefined aspect ratios of `16:9`, `21:9` or `32:9`.
+`carousel` is used to showcase multiple images in an interactive and visually appealing way. This allows a user to slide through multiple images while only taking up the vertical space of a single one. All images are displayed using the full width of the parent component and the aspect ratio you set with a default of `16:9`.
 
 <!-- prettier-ignore-start -->
 | Parameter | Description |
 | --- | --- |
 | `images` | **Required.** A regex string to match image names or URLs. |
-| `aspectRatio` | **Optional.** The aspect ratio for the carousel. Either `16-9`, `21-9` or `32-9`. It is set to `16-9` by default. |
+| `aspectRatio` | **Optional.** The aspect ratio for the carousel. It is set to `16-9` by default. |
 | `interval` | **Optional.** The interval for the auto-scrooling, specified in milliseconds. Defaults to `2000` (2s) |
 <!-- prettier-ignore-end -->
 
diff --git a/layouts/shortcodes/carousel.html b/layouts/shortcodes/carousel.html
index 9cc02cfe..41a014ea 100644
--- a/layouts/shortcodes/carousel.html
+++ b/layouts/shortcodes/carousel.html
@@ -1,5 +1,7 @@
 {{ $id := delimit (slice "carousel" (partial "functions/uid.html" .) (now.UnixNano)) "-" }}
-{{ $aspect := default "16-9" (.Get "aspectRatio") }}
+{{ $aspect := (split (.Get "aspectRatio") "-") }}
+{{ $aspectx := default "16" (index $aspect  0) }}
+{{ $aspecty := default "9" (index $aspect  1) }}
 {{ $interval := default "2000" (.Get "interval") }}
 
 {{ $page := .Page.Resources }}
@@ -47,10 +49,12 @@
         data-twe-carousel-item
         style="transition-duration: {{ $interval }}ms;"
         {{ if eq $index 0 }}data-twe-carousel-active{{ end }}>
-        <div class="ratio-{{ $aspect }} single_hero_background">
+        <div
+          class="single_hero_background"
+          style="aspect-ratio: {{ $aspectx }} / {{ $aspecty }};">
           <img
             src="{{ $image.RelPermalink }}"
-            class="block absolute top-0 object-cover w-full h-full nozoom"
+            class="block absolute top-0 object-cover w-full h-full not-prose nozoom"
             alt="carousel image {{ add $index 1 }}">
         </div>
       </div>