style image attribution

web/src/components/blocks/imageSliderBlock.module.scss

@@ -16,8 +16,12 @@
     justify-content: center;
     position: relative;
 
+    >div {
+      height: 100%;
+      width: 100%;
+    }
+
     img {
-      display: block;
       height: 100%;
       width: 100%;
       object-fit: contain;

web/src/components/general/Image.tsx

@@ -13,8 +13,10 @@ export function ImageFigure(props: ImageProps) {
     <figure
       className={`${styles.image} ${imageFormat ? styles[imageFormat] : ""}`}
     >
-      <NextImage {...nextImageProps} />
-      {attribution && <div className={styles.attribution}>{attribution}</div>}
+      <div className={styles.imageWrapper}>
+        <NextImage {...nextImageProps} />
+        {attribution && <div className={styles.attribution}>{attribution}</div>}
+      </div>
       {caption && <figcaption>{caption}</figcaption>}
     </figure>
   );

web/src/components/general/image.module.scss

@@ -2,6 +2,13 @@
   width: 100%;
   margin: 0;
 
+  .imageWrapper {
+    position: relative;
+    display: inline-block;
+    max-width: 100%;
+    margin: 0 auto;
+  }
+
   img {
     display: block;
     max-width: 100%;
@@ -22,7 +29,7 @@
     width: 100vw;
     margin: 2rem calc(var(--spacing-sitepadding-inline)*-1);
 
-    img {
+    .imageWrapper, img {
       width: 100%;
     }
 
@@ -34,7 +41,7 @@
   &.fullwidth {
     margin: 2rem 0;
 
-    img {
+    .imageWrapper, img {
       width: 100%;
     }
   }
@@ -44,10 +51,6 @@
     margin: 2rem auto;
     text-align: center;
 
-    img {
-      margin: auto;
-    }
-
     figcaption {
       text-align: left;
     }
@@ -55,5 +58,13 @@
 }
 
 .attribution {
-  border: 1px dotted mediumpurple;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  display: inline-block;
+  padding: .1rem .2rem;
+  font-size: .6rem;
+  background: var(--color-black);
+  color: var(--color-betongGray);
+  opacity: .4;
 }