feat: add dropshadow prop to figure component

src/components/Figure.vue

@@ -5,7 +5,12 @@
       :class="{ 'figure__border--polaroid': polaroidBorder }"
     >
       <template v-if="!nsfw || $root.nsfw">
-        <div class="figure__image"><slot name="img"></slot></div>
+        <div
+          class="figure__image"
+          :class="{ 'figure__image--dropshadow': dropshadow }"
+        >
+          <slot name="img"></slot>
+        </div>
       </template>
 
       <template v-else>
@@ -47,6 +52,7 @@ import NsfwSwitch from "@/components/NsfwSwitch.vue";
 export default {
   props: {
     polaroidBorder: Boolean,
+    dropshadow: Boolean,
     nsfw: Boolean,
     id: String,
   },
@@ -66,7 +72,6 @@ export default {
   justify-content: center;
 
   margin: 1em auto;
-  padding: 0 1em;
   text-align: center;
 
   &__border {
@@ -104,6 +109,10 @@ export default {
       max-width: 100%;
       max-height: 35em;
     }
+
+    &--dropshadow {
+      filter: drop-shadow(0.5em 0.25em 0.375em #000);
+    }
   }
 
   &__meta {
@@ -125,7 +134,7 @@ export default {
     max-height: 70em;
     position: relative;
 
-    background-color: $bg-color-light;
+    background-color: $bg-color-lighter;
     overflow: hidden;
 
     @include mq-desktop {

src/views/Anatomy.vue

@@ -17,7 +17,7 @@
   <prose>
     <h2>Anatomy</h2>
 
-    <ref-figure>
+    <ref-figure dropshadow>
       <template #img>
         <img
           v-if="$root.nsfw"
@@ -104,7 +104,7 @@
     </p>
 
     <h3>Head</h3>
-    <ref-figure>
+    <ref-figure dropshadow>
       <template #img>
         <img
           src="@/assets/refs/sebin-ref-expressions.png"
@@ -353,7 +353,7 @@
 
     <template v-if="$root.nsfw">
       <h3>Penis</h3>
-      <ref-figure>
+      <ref-figure dropshadow>
         <template #img>
           <img
             src="@/assets/refs/sebin-ref-penis.png"