Refactor responsive image queries in event and publication pages

- Remove fixed height from responsiveImage parameters for better adaptability.
- Add sizes attribute to banner images for improved responsiveness on different screen widths.

Author: sjoerdbeentjes

src/pages/events/[slug]/_eventPage.query.graphql

@@ -10,7 +10,7 @@ query EventPage($locale: SiteLocale = nl, $slug: String!) {
     endDate
     location
     image {
-      responsiveImage(imgixParams: { fit: crop, h: 416, auto: format }) {
+      responsiveImage(imgixParams: { fit: crop, auto: format }) {
         alt
         base64
         bgColor
@@ -33,7 +33,10 @@ query EventPage($locale: SiteLocale = nl, $slug: String!) {
         title
         slug
         banner {
-          responsiveImage(imgixParams: { fit: crop, h: 416, auto: format }) {
+          responsiveImage(
+            imgixParams: { fit: crop, auto: format }
+            sizes: "(min-width: 890px) 80vw, 100vw"
+          ) {
             alt
             base64
             bgColor

src/pages/publicaties/[slug]/_publicationPage.query.graphql

@@ -15,7 +15,10 @@ query PublicationPage($locale: SiteLocale!, $slug: String!) {
       name
     }
     banner {
-      responsiveImage(imgixParams: { fit: crop, h: 416, auto: format }) {
+      responsiveImage(
+        imgixParams: { fit: crop, auto: format }
+        sizes: "(min-width: 890px) 80vw, 100vw"
+      ) {
         base64
         height
         width