adding grid

1 files changed, 28 insertions, 0 deletions

diff --git a/animism-align/frontend/app/views/viewer/player/components.utility/media.css b/animism-align/frontend/app/views/viewer/player/components.utility/media.css
index 1519c40..28cc841 100644
--- a/animism-align/frontend/app/views/viewer/player/components.utility/media.css
+++ b/animism-align/frontend/app/views/viewer/player/components.utility/media.css
@@ -1,6 +1,7 @@
 /* carousel */
 
 .carousel-container {
+  margin-top: 0.5rem;
   padding: 1rem;
 }
 .carousel-item {
@@ -17,6 +18,7 @@
   overflow-x: scroll;
   width: 100%;
   padding: 1rem;
+  margin-bottom: 1.5rem;
 }
 .gallery-scroll {
   display: flex;
@@ -34,6 +36,7 @@
   height: 25rem;
 }
 .gallery-image img {
+  display: block;
   max-height: 25rem;
 }
 .gallery-caption {
@@ -58,6 +61,31 @@
   background: #000;
 }
 
+/* grid */
+
+.grid-container {
+  margin: 0 auto 1.5rem auto;
+  width: 45rem;
+  display: flex;
+  flex-flow: row wrap;
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+.grid-item {
+  width: 22rem;
+  margin-bottom: 0.5rem;
+}
+.grid-item:nth-child(odd) {
+  margin-right: 1rem;
+}
+.grid-item img {
+  display: block;
+  width: 22rem;
+}
+.grid-caption {
+  margin-top: 0.5rem;
+  color: #888;
+}
 
 /* vitrine */