diff --git a/dist/css/app.css b/dist/css/app.css
new file mode 100644
index 0000000..87d3f1f
--- /dev/null
+++ b/dist/css/app.css
@@ -0,0 +1 @@
+.meta-MetaWindow{position:fixed}.meta-MetaWindow .meta-error,.meta-MetaWindow .meta-spinner,.meta-MetaWindow .meta-spinner_embed{align-items:center;display:none;justify-content:center;text-align:center;z-index:2}.meta-MetaWindow .meta-spinner,.meta-MetaWindow .meta-spinner_embed{bottom:0;color:#fff;font-size:2rem;font-weight:700;left:0;position:absolute;right:0;text-transform:uppercase;top:0}.meta-MetaWindow .meta-error{color:#f44336;font-size:1.5em;font-weight:700}.meta-MetaWindow .meta-spinner_embed{display:flex}.meta-MetaWindow-overlay{align-items:center;background:rgba(0,0,0,.8);bottom:0;display:none;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:98}.meta-MetaWindow-overlay__loading .meta-spinner,.meta-MetaWindow-overlay__open{display:flex}.meta-MetaWindow-overlay__error .meta-content{justify-content:center}.meta-MetaWindow-overlay__error .meta-error{display:flex}.meta-MetaWindow .meta-nav{background:none;border:0;color:#fff;font-size:2rem;text-shadow:#000 0 0 .25em;z-index:2}.meta-MetaWindow .meta-nav:focus,.meta-MetaWindow .meta-nav:hover{color:#fff}.meta-MetaWindow .meta-nav:hover{background:none;color:#eceff1;text-decoration:none;text-shadow:none}.meta-MetaWindow .meta-nav-arrow{align-items:center;bottom:0;display:flex;font-size:2.5rem;justify-content:center;padding:.25rem .5rem;position:absolute;top:auto;z-index:2}.meta-MetaWindow .meta-nav-arrow:focus .fa,.meta-MetaWindow .meta-nav-arrow:focus .fab,.meta-MetaWindow .meta-nav-arrow:focus .far,.meta-MetaWindow .meta-nav-arrow:focus .fas,.meta-MetaWindow .meta-nav-arrow:hover .fa,.meta-MetaWindow .meta-nav-arrow:hover .fab,.meta-MetaWindow .meta-nav-arrow:hover .far,.meta-MetaWindow .meta-nav-arrow:hover .fas{transform:scale(1.5)}@media(min-width:992px){.meta-MetaWindow .meta-nav-arrow{bottom:0;top:0}}.meta-MetaWindow .meta-nav-arrow__next{right:0}.meta-MetaWindow .meta-nav-arrow__prev{left:0}@media(min-width:992px){.meta-MetaWindow .meta-nav-arrow__next{right:-3rem}.meta-MetaWindow .meta-nav-arrow__prev{left:-3rem}}.meta-MetaWindow .meta-close{position:absolute;right:0;top:-3rem;width:1.25em}.meta-MetaWindow .meta-close:hover .fa,.meta-MetaWindow .meta-close:hover .fab,.meta-MetaWindow .meta-close:hover .far,.meta-MetaWindow .meta-close:hover .fas{transform:rotate(-180deg)}@media(min-width:992px){.meta-MetaWindow .meta-close{right:-3rem;top:-3rem}}.meta-MetaWindow .meta-content{display:flex;flex-direction:column;height:80%;position:relative;width:100%;z-index:1}@media(min-width:992px){.meta-MetaWindow .meta-content{height:90%;height:calc(90% - 3rem);width:90%;width:calc(90% - 3rem)}}.meta-MetaWindow .meta-wrap{margin:0 auto;max-height:100%;max-width:100%;overflow:auto;width:100%;word-break:break-word}.meta-MetaWindow .meta-wrap img{max-height:100%;max-width:100%;object-fit:cover}.meta-MetaWindow__text .meta-content{background:#fff;color:#000;padding:1rem 0 1rem 1rem}.meta-MetaWindow__text .meta-wrap{padding-right:1rem}.meta-MetaWindow__image .meta-wrap,.meta-MetaWindow__image .typography,.meta-MetaWindow__video .meta-wrap,.meta-MetaWindow__video .typography{align-items:center;display:flex;flex-direction:column;justify-content:center;max-height:100%;max-width:100%;min-height:100%;overflow:hidden}.meta-MetaWindow__image .meta-wrap img,.meta-MetaWindow__image .typography img,.meta-MetaWindow__video .meta-wrap img,.meta-MetaWindow__video .typography img{margin:0}.meta-MetaWindow__embed:before,.meta-MetaWindow__video:before{content:"";display:block;padding-top:56.25%;position:relative;width:100%}.meta-MetaWindow__embed a[rel="nofollow noreferrer noopener"],.meta-MetaWindow__video a[rel="nofollow noreferrer noopener"]{color:#fff;font-size:1.2rem;font-weight:700}.meta-MetaWindow__embed a[rel="nofollow noreferrer noopener"]:before,.meta-MetaWindow__video a[rel="nofollow noreferrer noopener"]:before{content:"Unable to load. Please follow the provided link: ";display:block}.meta-MetaWindow__embed iframe,.meta-MetaWindow__video iframe{height:100%;left:0;position:absolute;top:0;width:100%}.visually-hidden,.visually-hidden-focusable:not(:focus):not(:focus-within){clip:rect(0,0,0,0)!important;border:0!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}
\ No newline at end of file
diff --git a/src/scss/test-build.scss b/src/scss/test-build.scss
new file mode 100755
index 0000000..c7cc86c
--- /dev/null
+++ b/src/scss/test-build.scss
@@ -0,0 +1,12 @@
+.visually-hidden,
+.visually-hidden-focusable:not(:focus):not(:focus-within) {
+    position: absolute !important;
+    width: 1px !important;
+    height: 1px !important;
+    padding: 0 !important;
+    margin: -1px !important;
+    overflow: hidden !important;
+    clip: rect(0, 0, 0, 0) !important;
+    white-space: nowrap !important;
+    border: 0 !important;
+}
diff --git a/src/scss/window.scss b/src/scss/window.scss
new file mode 100755
index 0000000..c374fbb
--- /dev/null
+++ b/src/scss/window.scss
@@ -0,0 +1,252 @@
+@import '_variables';
+
+$module_name: 'meta-MetaWindow';
+
+.#{$module_name} {
+    position: fixed;
+
+    // lightbox inner elements
+    .meta-spinner_embed,
+    .meta-spinner,
+    .meta-error {
+        display: none;
+        align-items: center;
+        justify-content: center;
+        z-index: 2;
+        text-align: center;
+    }
+
+    .meta-spinner_embed,
+    .meta-spinner {
+        @include spinner_style();
+
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+    }
+
+    .meta-error {
+        color: $clr-red;
+        font-weight: bold;
+        font-size: 1.5em;
+    }
+
+    .meta-spinner_embed {
+        display: flex;
+    }
+
+    &-overlay {
+        background: $meta-overlay-bg;
+        display: none;
+        position: fixed;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        align-items: center;
+        justify-content: center;
+        z-index: 98;
+
+        // meta states
+        &__open {
+            display: flex;
+        }
+
+        &__loading {
+            .meta-spinner {
+                display: flex;
+            }
+        }
+
+        &__error {
+            .meta-content {
+                justify-content: center;
+            }
+
+            .meta-error {
+                display: flex;
+            }
+        }
+    }
+
+    // navs
+    .meta-nav {
+        font-size: $meta-nav-size;
+        color: $meta-nav-color;
+        text-shadow: $meta-nav-hover-shadow 0 0 0.25em;
+        border: 0;
+        background: none;
+        z-index: 2;
+
+        @include hover-focus() {
+            color: $meta-nav-color;
+        }
+
+        &:hover {
+            color: $meta-nav-hover-color;
+            background: $meta-nav-hover-bg;
+            text-shadow: none;
+            text-decoration: none;
+        }
+
+    }
+
+    .meta-nav-arrow {
+        position: absolute;
+        bottom: 0;
+        top: auto;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: $meta-nav-arrows-size;
+        padding: $meta-nav-padding;
+        z-index: 2;
+
+        @include hover-focus() {
+
+            .fa,
+            .fas,
+            .far,
+            .fab {
+                transform: $meta-nav-hover-transform;
+            }
+        }
+
+        @media (min-width: map-get($grid-breakpoints, 'lg')) {
+            top: 0;
+            bottom: 0;
+        }
+
+        &__next {
+            right: 0;
+        }
+
+        &__prev {
+            left: 0;
+        }
+
+        @media (min-width: map-get($grid-breakpoints, 'lg')) {
+            &__next {
+                right: -($meta-nav-arrows-size + 0.5);
+            }
+
+            &__prev {
+                left: -($meta-nav-arrows-size + 0.5);
+            }
+        }
+    }
+
+    .meta-close {
+        position: absolute;
+        top: -3rem;
+        right: 0;
+        width: 1.25em;
+
+        &:hover {
+
+            .fa,
+            .fas,
+            .far,
+            .fab {
+                transform: $meta-nav-close-hover-transform;
+            }
+        }
+
+        @media (min-width: map-get($grid-breakpoints, 'lg')) {
+            top: -($meta-nav-arrows-size + 0.5);
+            right: -($meta-nav-arrows-size + 0.5);
+        }
+    }
+
+    .meta-content {
+        position: relative;
+        width: 100%;
+        height: 80%;
+        display: flex;
+        flex-direction: column;
+        z-index: 1;
+
+        @media (min-width: map-get($grid-breakpoints, 'lg')) {
+            width: 90%;
+            height: 90%;
+            width: calc(90% - 3rem);
+            height: calc(90% - 3rem);
+        }
+    }
+
+    .meta-wrap {
+        max-height: 100%;
+        max-width: 100%;
+        width: 100%;
+        overflow: auto;
+        word-break: break-word;
+        margin: 0 auto;
+
+        img {
+            object-fit: cover;
+            max-width: 100%;
+            max-height: 100%;
+        }
+    }
+
+    // Lightbox types
+
+    &__text {
+        .meta-content {
+            background: $meta-text-wrapper-bg;
+            color: $meta-text-wrapper-color;
+            padding: $meta-text-wrapper-padding-height $meta-text-wrapper-padding-width;
+            padding-right: 0;
+        }
+
+        .meta-wrap {
+            padding-right: $meta-text-wrapper-padding-width;
+        }
+    }
+
+    &__image,
+    &__video {
+
+        .typography,
+        .meta-wrap {
+            overflow: hidden;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
+            max-height: 100%;
+            max-width: 100%;
+            min-height: 100%;
+
+            img {
+                margin: 0;
+            }
+        }
+    }
+
+    &__video,
+    &__embed {
+        @include responsive-ratio($meta-video-width, $meta-video-height, true);
+
+        a[rel='nofollow noreferrer noopener'] {
+            color: $meta-embed-loading-failed-color;
+            font-size: $meta-embed-loading-failed-size;
+            font-weight: $meta-embed-loading-failed-weight;
+
+            &:before {
+                content: 'Unable to load. Please follow the provided link: ';
+                display: block;
+            }
+        }
+
+        iframe {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+        }
+    }
+}