Experiment immersive media render on large-size post

src/components/status.css

@@ -1349,6 +1349,26 @@ body:has(#modal-container .carousel) .status .media img:hover {
   background-color: var(--outline-color);
 }
 
+.status.large .media-large-container {
+  width: 100%;
+  max-width: 100%;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  column-gap: 8px;
+  flex-wrap: wrap;
+  text-align: center;
+
+  figure {
+    justify-content: center;
+
+    figcaption {
+      text-align: center;
+    }
+  }
+}
+
 @keyframes media-carousel-slide {
   0% {
     transform: translateX(calc(var(--dots-count, 1) * 2.5px));

src/components/status.jsx

@@ -1990,7 +1990,31 @@ function Status({
                       {showSpoilerMedia ? 'Show less' : 'Show media'}
                     </button>
                   )}
-                {!!mediaAttachments.length && (
+                {!!mediaAttachments.length &&
+                  (mediaAttachments.length > 1 &&
+                  (isSizeLarge || (withinContext && size === 'm')) ? (
+                    <div class="media-large-container">
+                      {mediaAttachments.map((media, i) => (
+                        <div key={media.id} class={`media-container media-eq1`}>
+                          <Media
+                            media={media}
+                            autoAnimate
+                            showCaption
+                            allowLongerCaption={!content}
+                            lang={language}
+                            to={`/${instance}/s/${id}?${
+                              withinContext ? 'media' : 'media-only'
+                            }=${i + 1}`}
+                            onClick={
+                              onMediaClick
+                                ? (e) => onMediaClick(e, i, media, status)
+                                : undefined
+                            }
+                          />
+                        </div>
+                      ))}
+                    </div>
+                  ) : (
                     <MultipleMediaFigure
                       lang={language}
                       enabled={showMultipleMediaCaptions}
@@ -2033,7 +2057,7 @@ function Status({
                         ))}
                       </div>
                     </MultipleMediaFigure>
-                )}
+                  ))}
                 {!!card &&
                   /^https/i.test(card?.url) &&
                   !sensitive &&