Add rounding and spacing at the bottom of images

docs/docs/getting-started/getting-started.mdx

@@ -21,7 +21,7 @@ Then select OpenSCAD. Note that [CadQuery](https://cadquery.readthedocs.io/en/la
 
 You should now see the OpenSCAD IDE (integrated development environment)
 
-<Image img={ide} style={{backgroundSize: 'contain'}} />
+<Image img={ide} className="mb-8 bg-contain rounded-md overflow-hidden" />
 
 Here we should see the default code in the editor on the left-hand-side, the editor is where we design our CAD parts and we'll cover that more soon. You will also see the result will show up on the right-hand-side (along with the console which gives us extra information). You can click and drag inside the viewer to change the perspective, though the image will only update once you let go of the mouse.
 
@@ -31,10 +31,10 @@ You can also move the object with with right-click and drag, and scrolling will
 
 For that we'll need to learn about the OpenSCAD language. For now, try replacing all of the existing code with `cube([10,10,10]);` and then hit `ctrl + s` to tell CadHub to render a new image. You should see a cube appear!
 
-<Image img={cube} style={{backgroundSize: 'contain'}} />
+<Image img={cube} className="mb-8 bg-contain rounded-md overflow-hidden" />
 
 Don't worry if you don't understand the specifics of what happen here, we'll give you the whole run down next in our introductory tutorial, where you'll learn the basics of OpenSCAD by making a hinge.
 
-<Image img={hinge} style={{backgroundSize: 'contain'}} />
+<Image img={hinge} className="mb-8 bg-contain rounded-md overflow-hidden" />
 
 Already familiar with OpenSCAD? no worries, you can skip ahead to learn more about how to host a OpenSCAD project on CadHub