just use medium size

resources/js/views/Article.vue

@@ -101,7 +101,8 @@ const handleLoad = async () => {
                 ).format("yyyy/MM/dd HH:mm:ss");
 
                 backgroundImageUrl.value = mediaGetVariantUrl(
-                    article.value.hero
+                    article.value.hero,
+                    "medium"
                 );
                 applicationStore.setDynamicTitle(article.value.title);
             } else {

resources/js/views/Event.vue

@@ -3,7 +3,10 @@
         <div
             class="workshop-image"
             :style="{
-                backgroundImage: `url('${mediaGetVariantUrl(event.hero)}')`,
+                backgroundImage: `url('${mediaGetVariantUrl(
+                    event.hero,
+                    'medium'
+                )}')`,
             }"></div>
         <SMContainer>
             <SMContainer class="workshop-page">