feat: revamp image styles

sass/css/mods.css

···
   text-align: center;
 }
 
-.center img {
+.center .img-container {
   display: block;
   margin: 1rem auto;
 }
···
   max-width: 100%;
   height: auto;
   margin: 0;
+  padding: 0;
 }
 
 .badge-row a {
···
 .img-group {
   display: flex;
   flex-direction: row;
-  gap: 0.5rem;
+  gap: 1rem;
   max-width: 100%;
+  justify-content: center;
 }
 
-.img-group img {
+.img-group .img-container {
   flex: 1;
   min-width: 0;
-  max-width: 100%;
+  background-color: var(--accent);
+  border-bottom: 4px solid var(--bg-light);
+  border-radius: 7px 7px 10px 10px;
+  padding: 0.35rem;
+  margin: 1rem 0;
+}
+
+.img-group img {
+  width: 100%;
   height: auto;
   object-fit: contain;
+  border-radius: 0.35rem;
 }
 
 :root {

sass/css/suCSS.css

···
 video,
 iframe[src^="https://www.youtube-nocookie.com"],
 iframe[src^="https://www.youtube.com"] {
-  max-width: 90%;
+  max-width: 100%;
+  height: auto;
+  border-radius: 0.35rem;
+}
+
+.img-container {
+  background-color: var(--accent);
+  border-bottom: 4px solid var(--bg-light);
+  border-radius: 7px 7px 10px 10px;
+  padding: 0.35rem;
   margin: 1rem;
-  height: auto;
-  border: dashed 2px var(--accent);
-  border-radius: 15px;
-  opacity: 0.95;
+  display: inline-block;
+  max-width: 90%;
 }
 
 figure {

templates/shortcodes/img.html

···
 <figure {% if class %}class="{{class}}" {% else %}class="center" {% endif %}>
-    <img src="{{id}}" {% if alt %}alt="{{alt}}" {% endif %} />
+    <div class="img-container">
+        <img src="{{id}}" {% if alt %}alt="{{alt}}" {% endif %} />
+    </div>
     {% if caption %}
     <figcaption>{{caption | markdown | safe}}</figcaption>
     {% endif %}

templates/shortcodes/imgs.html

···
     {% set images = id | split(pat=",") %}
     {% set alts = alt | default(value="") | split(pat=",") %}
     {% for image in images %}
-        <img src="{{image | trim}}" {% if alts[loop.index0] %}alt="{{alts[loop.index0] | trim}}" {% endif %} />
+        <div class="img-container">
+            <img src="{{image | trim}}" {% if alts[loop.index0] %}alt="{{alts[loop.index0] | trim}}" {% endif %} />
+        </div>
     {% endfor %}
     </div>
     {% if caption %}