Chore: resize carrousel on small screens

src/css/main.css

@@ -17,7 +17,7 @@ body {
   margin: 0.5em;
 }
 
-.card{
+.card {
   padding: 10px;
   border: 1px solid darkblue;
   background-color: #ddddddcc;
@@ -27,7 +27,7 @@ body {
   display: inline-block;
 }
 
-.card>h1{
+.card>h1 {
   font-size: 2em;
 }
 
@@ -35,7 +35,7 @@ html {
   background-image: linear-gradient(-30deg, #C0E0FF6F 70%, #FFE0C04F);
 }
 
-.flex{
+.flex {
   display: flex;
   flex-direction: column;
 }
@@ -67,7 +67,7 @@ html {
   padding: 10px;
   /* border: 1px solid darkblue; */
   /* background-color: #80808040; */
-  background-image: linear-gradient(#00000000, #d0e08030, #d0e08030, #00000000 );
+  background-image: linear-gradient(#00000000, #d0e08030, #d0e08030, #00000000);
   /* box-shadow: 3px 3px 3px #30303090; */
   /* border-radius: 4px; */
   margin-top: 1em;
@@ -103,7 +103,7 @@ html {
   text-shadow: 0px 0px 4px white, 2px 2px 6px;
 }
 
-.content>p{
+.content>p {
   margin-left: 1em;
 }
 
@@ -111,13 +111,15 @@ html {
   margin-left: 0.2em;
 }
 
-.content>h2{
+.content>h2 {
   margin-top: 1.5em;
 }
+
 .content>h2 {
   margin-top: 0.2em;
 }
-.content>h3{
+
+.content>h3 {
   margin-left: 0.8em;
   margin-top: 0.5em;
   margin-bottom: 0.5em;
@@ -161,10 +163,15 @@ html.theme-dark {
   margin: 0 auto;
 }
 
-#image-carousel{
+#image-carousel {
   width: 50rem;
   margin: 0 auto;
-  /* background: #DD8888DD; */
+}
+
+@media only screen and (max-width: 600px) {
+  #image-carousel {
+    width: 25rem;
+  }
 }
 
 @media(orientation: portrait) {