Fixed lightbox misalignment

1 files changed, 8 insertions, 8 deletions

diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss
index 568265e..a5f077f 100644
--- a/src/objects/_lightbox.scss
+++ b/src/objects/_lightbox.scss
@@ -51,7 +51,7 @@
         grid-template-rows:    auto minmax(0, 1fr) auto auto;
         grid-template-columns: auto minmax(0, 1fr) auto;
         grid-template-areas:
-            'header     header     close'
+            'header     header     header'
             'prev       content    next'
             'thumbnails thumbnails thumbnails'
             'footer     footer     footer';
@@ -60,8 +60,10 @@
         overflow:              hidden;
 
         @include iro.bem-elem('header') {
-            grid-area: header;
-            padding:   fn.dim(--pad) fn.dim(--pad) 0;
+            grid-area:   header;
+            display:     flex;
+            align-items: flex-start;
+            padding:     fn.dim(--pad) fn.dim(--pad) 0;
         }
 
         @include iro.bem-elem('img') {
@@ -108,11 +110,9 @@
         }
 
         @include iro.bem-elem('close-btn') {
-            grid-area:    close;
-            align-self:   start;
-            margin-top:   calc(.5 * fn.dim(--pad));
-            margin-right: calc(.5 * fn.dim(--pad));
-            font-size:    fn.dim(--close-button --font-size);
+            flex:      0 0 auto;
+            margin:    calc(-.5 * fn.dim(--pad)) calc(-.5 * fn.dim(--pad)) 0 auto;
+            font-size: fn.dim(--close-button --font-size);
         }
 
         @include iro.bem-elem('nav-btn') {