diff --git a/projects/core/src/lib/components/gallery.component.ts b/projects/core/src/lib/components/gallery.component.ts
index 7c5f9e4c..2600c1fb 100644
--- a/projects/core/src/lib/components/gallery.component.ts
+++ b/projects/core/src/lib/components/gallery.component.ts
@@ -18,6 +18,7 @@ import { IframeItem, ImageItem, VideoItem, YoutubeItem } from './templates';
 @Component({
   selector: 'gallery',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  styleUrls: ['../styles/gallery.scss'],
   template: `
     <gallery-core [state]="galleryRef.state$ | async"
                   [config]="galleryRef.config$ | async"
diff --git a/projects/core/src/lib/styles/core.scss b/projects/core/src/lib/styles/core.scss
index 3c01bb92..572223c4 100644
--- a/projects/core/src/lib/styles/core.scss
+++ b/projects/core/src/lib/styles/core.scss
@@ -1,60 +1,67 @@
-gallery {
-  position: relative;
-  z-index: 1;
-  overflow: hidden;
-  display: block;
-  height: 500px;
-  background-color: black;
-  * {
-    box-sizing: border-box;
+::ng-deep {
+  gallery {
+    position: relative;
+    z-index: 1;
+    overflow: hidden;
+    display: block;
+    height: 500px;
+    background-color: black;
+    * {
+      box-sizing: border-box;
+    }
   }
-}
 
-gallery, gallery-core {
-  position: relative;
-  overflow: hidden;
-}
-
-gallery-core, .g-box, .g-slider {
-  display: flex;
-  height: 100%;
-  width: 100%;
-}
+  gallery,
+  gallery-core {
+    position: relative;
+    overflow: hidden;
+  }
 
-gallery[fluid] {
-  transform: translateX(-50vw);
-  width: 100vw;
-  left: 50%;
-  &[fluid='false'] {
-    transform: none;
-    width: initial;
-    left: initial;
+  gallery-core,
+  .g-box,
+  .g-slider {
+    display: flex;
+    height: 100%;
+    width: 100%;
   }
-}
 
-.g-no-transition {
-  transition: unset !important;
-}
+  gallery[fluid] {
+    transform: translateX(-50vw);
+    width: 100vw;
+    left: 50%;
+    &[fluid='false'] {
+      transform: none;
+      width: initial;
+      left: initial;
+    }
+  }
 
-.g-box, gallery-slider {
-  overflow: hidden;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  order: 1;
-  height: 100%;
-}
+  .g-no-transition {
+    transition: unset !important;
+  }
 
-gallery-nav, .g-btn-close {
-  svg {
-    width: 100%;
+  .g-box,
+  gallery-slider {
+    overflow: hidden;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    order: 1;
     height: 100%;
-    filter: drop-shadow(0px 0px 1px black);
-    transition: opacity linear 0.2s;
-    opacity: 0.6;
-    &:hover {
-      opacity: 1;
+  }
+
+  gallery-nav,
+  .g-btn-close {
+    svg {
+      width: 100%;
+      height: 100%;
+      filter: drop-shadow(0px 0px 1px black);
+      transition: opacity linear 0.2s;
+      opacity: 0.6;
+      &:hover {
+        opacity: 1;
+      }
     }
   }
 }
diff --git a/projects/core/src/lib/styles/counter.scss b/projects/core/src/lib/styles/counter.scss
index 42ff993a..416cd194 100644
--- a/projects/core/src/lib/styles/counter.scss
+++ b/projects/core/src/lib/styles/counter.scss
@@ -1,13 +1,15 @@
-.g-counter {
-  z-index: 50;
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%) perspective(1px);
-  bottom: 0;
-  font-size: 10px;
-  padding: 4px 10px;
-  color: white;
-  background-color: rgba(0, 0, 0, 0.5);
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
+::ng-deep {
+  .g-counter {
+    z-index: 50;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%) perspective(1px);
+    bottom: 0;
+    font-size: 10px;
+    padding: 4px 10px;
+    color: white;
+    background-color: rgba(0, 0, 0, 0.5);
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+  }
 }
diff --git a/projects/core/src/lib/styles/dots.scss b/projects/core/src/lib/styles/dots.scss
index 0946c4bd..660b428e 100644
--- a/projects/core/src/lib/styles/dots.scss
+++ b/projects/core/src/lib/styles/dots.scss
@@ -1,32 +1,33 @@
-gallery-dots {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-}
+::ng-deep {
+  gallery-dots {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+  }
 
-.g-dot {
-  cursor: pointer;
-  display: flex;
-  justify-content: center;
-  z-index: 20;
-}
+  .g-dot {
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    z-index: 20;
+  }
 
-.g-dot-active .g-dot-inner {
-  opacity: 1;
-  transform: scale(1.6);
-}
+  .g-dot-active .g-dot-inner {
+    opacity: 1;
+    transform: scale(1.6);
+  }
 
-.g-dot-inner {
-  background-color: white;
-  margin: 20px 15px;
-  opacity: 0.6;
-  width: 10px;
-  height: 5px;
-  border-radius: 1px;
-  box-shadow: 0 0 1px black;
-  transition: all ease 0.2s;
+  .g-dot-inner {
+    background-color: white;
+    margin: 20px 15px;
+    opacity: 0.6;
+    width: 10px;
+    height: 5px;
+    border-radius: 1px;
+    box-shadow: 0 0 1px black;
+    transition: all ease 0.2s;
+  }
 }
-
diff --git a/projects/core/src/lib/styles/navigations.scss b/projects/core/src/lib/styles/navigations.scss
index 9c857aba..7b3f736f 100644
--- a/projects/core/src/lib/styles/navigations.scss
+++ b/projects/core/src/lib/styles/navigations.scss
@@ -1,28 +1,31 @@
-.g-nav-next, .g-nav-prev {
-  position: absolute;
-  top: 50%;
-  width: 30px;
-  height: 40px;
-  cursor: pointer;
-  z-index: 999;
-}
-
-.g-nav-next {
-  right: 0.5em;
-  transform: translateY(-50%) perspective(1px);
-}
-
-.g-nav-prev {
-  left: 0.5em;
-  transform: translateY(-50%) perspective(1px) scale(-1, -1); //invert icon horizontally
-}
+::ng-deep {
+  .g-nav-next,
+  .g-nav-prev {
+    position: absolute;
+    top: 50%;
+    width: 30px;
+    height: 40px;
+    cursor: pointer;
+    z-index: 999;
+  }
 
-@media only screen and (max-width: 480px) {
   .g-nav-next {
-    right: 0.2em;
+    right: 0.5em;
+    transform: translateY(-50%) perspective(1px);
   }
 
   .g-nav-prev {
-    left: 0.2em;
+    left: 0.5em;
+    transform: translateY(-50%) perspective(1px) scale(-1, -1); //invert icon horizontally
+  }
+
+  @media only screen and (max-width: 480px) {
+    .g-nav-next {
+      right: 0.2em;
+    }
+
+    .g-nav-prev {
+      left: 0.2em;
+    }
   }
 }
diff --git a/projects/core/src/lib/styles/slider.scss b/projects/core/src/lib/styles/slider.scss
index 5864dbf9..af2a4c70 100644
--- a/projects/core/src/lib/styles/slider.scss
+++ b/projects/core/src/lib/styles/slider.scss
@@ -1,20 +1,22 @@
-.g-items-container {
-  height: 100%;
-}
-
-.g-slider {
-  position: absolute;
-  transition: transform 400ms cubic-bezier(0.5, 0, 0.5, 1);
-}
+::ng-deep {
+  .g-items-container {
+    height: 100%;
+  }
 
-gallery-core[slidingDirection='horizontal'] {
   .g-slider {
-    flex-direction: row;
+    position: absolute;
+    transition: transform 400ms cubic-bezier(0.5, 0, 0.5, 1);
   }
-}
 
-gallery-core[slidingDirection='vertical'] {
-  .g-slider {
-    flex-direction: column;
+  gallery-core[slidingDirection='horizontal'] {
+    .g-slider {
+      flex-direction: row;
+    }
+  }
+
+  gallery-core[slidingDirection='vertical'] {
+    .g-slider {
+      flex-direction: column;
+    }
   }
 }
diff --git a/projects/core/src/lib/styles/templates.scss b/projects/core/src/lib/styles/templates.scss
index 7fa4ed70..66588d0b 100644
--- a/projects/core/src/lib/styles/templates.scss
+++ b/projects/core/src/lib/styles/templates.scss
@@ -1,70 +1,73 @@
-gallery[gallerize] {
+::ng-deep {
+  gallery[gallerize] {
+    gallery-item {
+      cursor: pointer;
+    }
+  }
+  
+  gallery-item, gallery-thumb {
+    position: relative;
+    height: 100%;
+    width: 100%;
+    display: block;
+    overflow: hidden;
+  }
+  
   gallery-item {
+    z-index: 10;
+    video {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+    }
+    iframe {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+    }
+  }
+  
+  gallery-thumb {
+    opacity: 0.5;
     cursor: pointer;
+    transition: opacity 300ms cubic-bezier(0.5, 0, 0.5, 1);
+    &.g-active-thumb {
+      opacity: 1;
+    }
   }
-}
-
-gallery-item, gallery-thumb {
-  position: relative;
-  height: 100%;
-  width: 100%;
-  display: block;
-  overflow: hidden;
-}
-
-gallery-item {
-  z-index: 10;
-  video {
-    position: absolute;
+  
+  .g-image-item {
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
     width: 100%;
     height: 100%;
   }
-  iframe {
+  
+  .g-template {
     position: absolute;
-    width: 100%;
-    height: 100%;
+    z-index: 10;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
-}
-
-gallery-thumb {
-  opacity: 0.5;
-  cursor: pointer;
-  transition: opacity 300ms cubic-bezier(0.5, 0, 0.5, 1);
-  &.g-active-thumb {
-    opacity: 1;
+  
+  .g-loading {
+    position: absolute;
+    transform: translate3d(-50%, -50%, 0);
+    left: 50%;
+    top: 50%;
+    width: 80px;
+    height: 80px;
+  }
+  
+  gallery-core[imageSize='contain'] gallery-slider .g-image-item {
+    background-size: contain;
   }
 }
 
-.g-image-item {
-  background-position: center center;
-  background-repeat: no-repeat;
-  background-size: cover;
-  width: 100%;
-  height: 100%;
-}
-
-.g-template {
-  position: absolute;
-  z-index: 10;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  color: white;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.g-loading {
-  position: absolute;
-  transform: translate3d(-50%, -50%, 0);
-  left: 50%;
-  top: 50%;
-  width: 80px;
-  height: 80px;
-}
-
-gallery-core[imageSize='contain'] gallery-slider .g-image-item {
-  background-size: contain;
-}
diff --git a/projects/core/src/lib/styles/thumbnails.scss b/projects/core/src/lib/styles/thumbnails.scss
index 904ac1e9..19e6af1b 100644
--- a/projects/core/src/lib/styles/thumbnails.scss
+++ b/projects/core/src/lib/styles/thumbnails.scss
@@ -1,97 +1,99 @@
-gallery-thumbs {
-  display: block;
-  z-index: 1;
-  overflow: unset;
-}
-
-.g-thumbs-container {
-  position: relative;
-  z-index: 206;
-  width: 100%;
-  height: 100%;
-  left: 0;
-  top: 0;
-  display: flex;
-  overflow: unset;
-}
-
-gallery-core[disableThumb='true'] {
-  gallery-thumb {
-    cursor: default;
+::ng-deep {
+  gallery-thumbs {
+    display: block;
+    z-index: 1;
+    overflow: unset;
   }
-}
 
-gallery-core[thumbPosition='top'],
-gallery-core[thumbPosition='bottom'] {
-  gallery-thumbs .g-slider {
-    flex-direction: row;
+  .g-thumbs-container {
+    position: relative;
+    z-index: 206;
+    width: 100%;
+    height: 100%;
+    left: 0;
     top: 0;
-    left: 50%;
+    display: flex;
+    overflow: unset;
   }
-  gallery-thumb {
-    padding: 1px 0 1px 1px;
+
+  gallery-core[disableThumb='true'] {
+    gallery-thumb {
+      cursor: default;
+    }
   }
-}
 
-gallery-core[thumbPosition='left'],
-gallery-core[thumbPosition='right'] {
-  gallery-thumbs {
-    .g-slider {
-      flex-direction: column;
-      top: 50%;
-      left: 0;
+  gallery-core[thumbPosition='top'],
+  gallery-core[thumbPosition='bottom'] {
+    gallery-thumbs .g-slider {
+      flex-direction: row;
+      top: 0;
+      left: 50%;
+    }
+    gallery-thumb {
+      padding: 1px 0 1px 1px;
     }
   }
-  gallery-thumb {
-    padding: 0 1px 1px 1px;
+
+  gallery-core[thumbPosition='left'],
+  gallery-core[thumbPosition='right'] {
+    gallery-thumbs {
+      .g-slider {
+        flex-direction: column;
+        top: 50%;
+        left: 0;
+      }
+    }
+    gallery-thumb {
+      padding: 0 1px 1px 1px;
+    }
   }
-}
 
-gallery-core[thumbPosition='top'] {
-  flex-direction: column;
-}
+  gallery-core[thumbPosition='top'] {
+    flex-direction: column;
+  }
 
-gallery-core[thumbPosition='left'] {
-  flex-direction: row;
-}
+  gallery-core[thumbPosition='left'] {
+    flex-direction: row;
+  }
 
-gallery-core[thumbPosition='right'] {
-  flex-direction: row-reverse;
-}
+  gallery-core[thumbPosition='right'] {
+    flex-direction: row-reverse;
+  }
 
-gallery-core[thumbPosition='bottom'] {
-  flex-direction: column-reverse;
-}
+  gallery-core[thumbPosition='bottom'] {
+    flex-direction: column-reverse;
+  }
 
-$loading-color: #fff !default;
-$placeholder-ng: #ced4da !default;
+  $loading-color: #fff !default;
+  $placeholder-ng: #ced4da !default;
 
-.g-thumb-loading {
-  position: relative;
-  overflow: hidden;
-  height: 100%;
-  background-color: $placeholder-ng;
+  .g-thumb-loading {
+    position: relative;
+    overflow: hidden;
+    height: 100%;
+    background-color: $placeholder-ng;
 
-  &::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 50%;
-    z-index: 1;
-    width: 500%;
-    margin-left: -250%;
-    animation: phAnimation .8s linear infinite;
-    background: linear-gradient(to right, rgba($loading-color, 0) 46%, rgba($loading-color, .35) 50%, rgba($loading-color, 0) 54%) 50% 50%;
+    &::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 50%;
+      z-index: 1;
+      width: 500%;
+      margin-left: -250%;
+      animation: phAnimation .8s linear infinite;
+      background: linear-gradient(to right, rgba($loading-color, 0) 46%, rgba($loading-color, .35) 50%, rgba($loading-color, 0) 54%) 50% 50%;
+    }
   }
-}
 
-@keyframes phAnimation {
-  0% {
-    transform: translate3d(-30%, 0, 0);
-  }
-  100% {
-    transform: translate3d(30%, 0, 0);
+  @keyframes phAnimation {
+    0% {
+      transform: translate3d(-30%, 0, 0);
+    }
+    100% {
+      transform: translate3d(30%, 0, 0);
+    }
   }
-}
+}
\ No newline at end of file