Calculate the first/last media boxes in the row on every resize

src/lib/components/MediaBoxWrapper.js

@@ -78,6 +78,29 @@ export function initializeMediaBox(mediaBoxContainer, childComponentElements) {
   }
 }
 
+/**
+ * @param {NodeListOf<HTMLElement>} mediaBoxesList
+ */
+export function calculateMediaBoxesPositions(mediaBoxesList) {
+  window.addEventListener('resize', () => {
+    /** @type {HTMLElement|null} */
+    let lastMediaBox = null,
+      /** @type {number|null} */
+      lastMediaBoxPosition = null;
+
+    for (let mediaBoxElement of mediaBoxesList) {
+      const yPosition = mediaBoxElement.getBoundingClientRect().y;
+      const isOnTheSameLine = yPosition === lastMediaBoxPosition;
+
+      mediaBoxElement.classList.toggle('media-box--first', !isOnTheSameLine);
+      lastMediaBox?.classList.toggle('media-box--last', !isOnTheSameLine);
+
+      lastMediaBox = mediaBoxElement;
+      lastMediaBoxPosition = yPosition;
+    }
+  })
+}
+
 /**
  * @typedef {Object} ImageURIs
  * @property {string} full