From 636a0f04eabb5795dd355616a06c63b22fc0dd7e Mon Sep 17 00:00:00 2001
From: Devin Haska <2636402+wonderfulfrog@users.noreply.github.com>
Date: Fri, 24 Jan 2025 12:59:29 -0800
Subject: [PATCH] fix: image border-radius

---
 src/css/blocks/media-display.css | 5 ++++-
 src/css/global/global-styles.css | 3 ++-
 src/css/utilities/image.css      | 4 ++++
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/css/blocks/media-display.css b/src/css/blocks/media-display.css
index f3bf2f3..3e6d68c 100644
--- a/src/css/blocks/media-display.css
+++ b/src/css/blocks/media-display.css
@@ -1,10 +1,13 @@
 .media-image {
   --aspect-ratio: 0.8;
 
+  border: 1px solid var(--color-shadow);
+  border-radius: var(--spacing-0\.5);
+  overflow: hidden;
+
   source,
   img {
     aspect-ratio: var(--aspect-ratio);
-    border: 1px solid var(--color-shadow);
     height: auto;
     object-fit: cover;
   }
diff --git a/src/css/global/global-styles.css b/src/css/global/global-styles.css
index 93b34f6..9c58aa8 100644
--- a/src/css/global/global-styles.css
+++ b/src/css/global/global-styles.css
@@ -140,6 +140,8 @@ picture {
   flex-direction: column;
   align-items: center;
   margin-inline: 0;
+  border-radius: var(--spacing-0\.5);
+  overflow: hidden;
 }
 
 figure figcaption {
@@ -152,7 +154,6 @@ figure figcaption {
 
 picture source,
 picture img {
-  border-radius: var(--spacing-0\.5);
   height: auto;
 }
 
diff --git a/src/css/utilities/image.css b/src/css/utilities/image.css
index 0407de8..cde6df8 100644
--- a/src/css/utilities/image.css
+++ b/src/css/utilities/image.css
@@ -1,7 +1,11 @@
 .image-shrink {
   max-width: 50%;
+  border-radius: var(--spacing-0\.5);
+  overflow: hidden;
 }
 
 .image-tiny {
   max-width: 25%;
+  border-radius: var(--spacing-0\.5);
+  overflow: hidden;
 }