2 files changed, 20 insertions, 11 deletions
diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/index.js b/animism-align/frontend/app/views/viewer/player/components.inline/index.js
index 5d6d08f..6ce1bbe 100644
--- a/animism-align/frontend/app/views/viewer/player/components.inline/index.js
+++ b/animism-align/frontend/app/views/viewer/player/components.inline/index.js
@@ -17,6 +17,7 @@ import {
 import {
   InlineCarousel,
   InlineGallery,
+  InlineGrid,
   InlineVitrine,
 } from './inline.gallery'
 
@@ -32,10 +33,13 @@ export const inlineComponents = {
   section_heading: React.memo(SectionHeading),
   heading_text: React.memo(HeadingText),
   header: React.memo(SectionHeading),
+  intro: React.memo(Intro),
+
   video: React.memo(MediaVideo),
   image: React.memo(MediaImage),
-  intro: React.memo(Intro),
+
   vitrine: InlineVitrine,
   gallery: InlineGallery,
+  grid: InlineGrid,
   carousel: InlineCarousel,
 }
diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/inline.gallery.js b/animism-align/frontend/app/views/viewer/player/components.inline/inline.gallery.js
index 277a237..5852ff1 100644
--- a/animism-align/frontend/app/views/viewer/player/components.inline/inline.gallery.js
+++ b/animism-align/frontend/app/views/viewer/player/components.inline/inline.gallery.js
@@ -1,7 +1,7 @@
 import React from 'react'
 
 import { CURTAIN_COLOR_LOOKUP } from 'app/constants'
-import { MediaCitation, Vitrine, Gallery, Carousel } from '../components.utility'
+import { MediaCitation, Vitrine, Gallery, Carousel, Grid } from '../components.utility'
 
 export const InlineVitrine = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => {
   const annotation = paragraph.annotations[0]
@@ -26,20 +26,12 @@ export const InlineVitrine = ({ paragraph, media, currentParagraph, currentAnnot
 export const InlineGallery = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => {
   const annotation = paragraph.annotations[0]
   const item = media.lookup[annotation.settings.media_id]
-  const color = CURTAIN_COLOR_LOOKUP[annotation.settings.color] || CURTAIN_COLOR_LOOKUP.white
-  const style = {
-    backgroundColor: color.backgroundColor,
-    color: color.textColor,
-  }
 
   return (
     <div
       className='inline-element media gallery'
     >
-      <div style={style} className='gallery-container'>
-        <Gallery media={item} />
-      </div>
-      <MediaCitation media={item} />
+      <Gallery media={item} annotation={annotation} />
     </div>
   )
 }
@@ -64,3 +56,16 @@ export const InlineCarousel = ({ paragraph, media, currentParagraph, currentAnno
     </div>
   )
 }
+
+export const InlineGrid = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => {
+  const annotation = paragraph.annotations[0]
+  const item = media.lookup[annotation.settings.media_id]
+
+  return (
+    <div
+      className='inline-element media grid'
+    >
+      <Grid media={item} annotation={annotation} />
+    </div>
+  )
+}