fixed styling issues

src/static/sass/base/_base.scss

@@ -1,67 +1,147 @@
 /* GLOBAL RESET */
-:global(html), :global(body), :global(div), :global(span), :global(applet), :global(object), :global(iframe),
+:global(html),
-:global(h1), :global(h2), :global(h3), :global(h4), :global(h5), :global(h6), :global(p), :global(blockquote), :global(pre),
+:global(body),
-:global(a), :global(abbr), :global(acronym), :global(address), :global(big), :global(cite), :global(code),
+:global(div),
-:global(del), :global(dfn), :global(em), :global(img), :global(ins), :global(kbd), :global(q), :global(s), :global(samp),
+:global(span),
-:global(small), :global(strike), :global(strong), :global(sub), :global(sup), :global(tt), :global(var),
+:global(applet),
-:global(b), :global(u), :global(i), :global(center),
+:global(object),
-:global(dl), :global(dt), :global(dd), :global(ol), :global(ul), :global(li),
+:global(iframe),
-:global(fieldset), :global(form), :global(label), :global(legend),
+:global(h1),
-:global(table), :global(caption), :global(tbody), :global(tfoot), :global(thead), :global(tr), :global(th), :global(td),
+:global(h2),
-:global(article), :global(aside), :global(canvas), :global(details), :global(embed),
+:global(h3),
-:global(figure), :global(figcaption), :global(footer), :global(header), :global(hgroup),
+:global(h4),
-:global(menu), :global(nav), :global(output), :global(ruby), :global(section), :global(summary),
+:global(h5),
-:global(time), :global(mark), :global(audio), :global(video) {
+:global(h6),
-	margin: 0;
+:global(p),
-	padding: 0;
+:global(blockquote),
-	border: 0;
+:global(pre),
-   vertical-align: baseline;
+:global(a),
-   box-sizing: inherit;
+:global(abbr),
+:global(acronym),
+:global(address),
+:global(big),
+:global(cite),
+:global(code),
+:global(del),
+:global(dfn),
+:global(em),
+:global(img),
+:global(ins),
+:global(kbd),
+:global(q),
+:global(s),
+:global(samp),
+:global(small),
+:global(strike),
+:global(strong),
+:global(sub),
+:global(sup),
+:global(tt),
+:global(var),
+:global(b),
+:global(u),
+:global(i),
+:global(center),
+:global(dl),
+:global(dt),
+:global(dd),
+:global(ol),
+:global(ul),
+:global(li),
+:global(fieldset),
+:global(form),
+:global(label),
+:global(legend),
+:global(table),
+:global(caption),
+:global(tbody),
+:global(tfoot),
+:global(thead),
+:global(tr),
+:global(th),
+:global(td),
+:global(article),
+:global(aside),
+:global(canvas),
+:global(details),
+:global(embed),
+:global(figure),
+:global(figcaption),
+:global(footer),
+:global(header),
+:global(hgroup),
+:global(menu),
+:global(nav),
+:global(output),
+:global(ruby),
+:global(section),
+:global(summary),
+:global(time),
+:global(mark),
+:global(audio),
+:global(video) {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  vertical-align: baseline;
+  box-sizing: inherit;
 }
 
 /* HTML5 display-role reset for older browsers */
-:global(article), :global(aside), :global(details), :global(figcaption), :global(figure),
+:global(article),
-:global(footer), :global(header), :global(hgroup), :global(menu), :global(nav), :global(section) {
+:global(aside),
-	display: block;
+:global(details),
+:global(figcaption),
+:global(figure),
+:global(footer),
+:global(header),
+:global(hgroup),
+:global(menu),
+:global(nav),
+:global(section) {
+  display: block;
 }
 :global(body) {
-	line-height: 1;
+  line-height: 1;
 }
-:global(ol), :global(ul) {
+:global(ol),
-	list-style: none;
+:global(ul) {
+  list-style: none;
 }
-:global(blockquote), :global(q) {
+:global(blockquote),
-	quotes: none;
+:global(q) {
+  quotes: none;
 }
-:global(blockquote:before), :global(blockquote:after),
+:global(blockquote:before),
-:global(q:before), :global(q:after) {
+:global(blockquote:after),
-	content: '';
+:global(q:before),
-	content: none;
+:global(q:after) {
+  content: '';
+  content: none;
 }
 :global(table) {
-	border-collapse: collapse;
+  border-collapse: collapse;
-	border-spacing: 0;
+  border-spacing: 0;
 }
 
 body {
-	font-family: 'Hind', sans-serif;
+  font-family: 'Hind', sans-serif;
-	box-sizing: border-box;
+  box-sizing: border-box;
-	background-color: $color-background;
+  background-color: $color-background;
 }
 
 html {
-   // this defines what 1rem is --> font root size 
+  // this defines what 1rem is --> font root size
-	 font-size: 62.5%; // 10/16, 1rem = 10px; 
+  font-size: 62.5%; // 10/16, 1rem = 10px;
 
-	 @include responsive(tab_port) {
+  @include responsive(tab_port) {
-		 font-size: 50%; 
+    font-size: 50%;
-	 }
+  }
 }
 
 // GRID AREA
 .container {
-
+  display: grid;
-	display: grid;      
+  grid-template-rows: min-content min-content min-content min-content;
-	grid-template-rows: min-content min-content min-content min-content; 
+  grid-template-columns: 0 repeat(10, 1fr);
-	grid-template-columns:  4% repeat(10, 1fr) 4%;
 }

src/static/sass/components/_movieShowcase.scss

@@ -3,17 +3,25 @@
   top: 0 !important;
   height: 2rem !important;
   text-align: right !important;
-  padding-right: 4rem !important;
+  //   padding-right: 24rem !important;
+  //   margin-right: 12rem !important;
+  //   right: 3rem;
+  //   position: relative;
 }
 
 .swiper-pagination-bullet {
   background-color: rgb(255, 255, 255) !important;
 }
 
+.swiper-horizontal > .swiper-pagination-bullets,
+.swiper-pagination-bullets.swiper-pagination-horizontal {
+  width: 97.5% !important;
+}
+
 .swiper-container-horizontal > .swiper-pagination-bullets {
   bottom: 0 !important;
   left: 0 !important;
-  width: 100% !important;
+  //   width: 10% !important;
 }
 
 div.swiper-button-prev,
@@ -32,10 +40,11 @@ div.swiper-button-next {
 }
 
 .swiper-wrapper:hover .swiper-slide {
+  z-index: 10000;
   opacity: 0.3 !important;
 
   &:hover {
-    transform: scale(1.3) !important;
+    transform: scale(1.4) !important;
     opacity: 1 !important;
 
     @include responsive(tab_port) {
@@ -50,7 +59,8 @@ div.swiper-button-next {
   color: #fff;
 
   &__heading {
-    padding-top: 2rem;
+    margin-bottom: 0;
+    padding-left: 4rem;
   }
 
   &__container::-webkit-scrollbar {
@@ -63,7 +73,7 @@ div.swiper-button-next {
     }
 
     &--movie:hover ~ &--movie {
-      transform: translate3d(5rem, 0, 0);
+      transform: translate3d(6.5rem, 0, 0);
 
       @include responsive(tab_port) {
         transform: translate3d(3rem, 0, 0);

src/static/sass/layout/_navigation.scss

@@ -16,11 +16,11 @@
 
   &__container {
     background-color: transparent;
-    margin-left: 3.8rem;
     display: flex;
     height: 6.7rem;
     justify-content: flex-start;
     align-items: center;
+    padding-left: 2rem;
 
     @include responsive(phone) {
       margin-left: 1rem;
@@ -99,8 +99,8 @@
     }
 
     &--logo {
-      margin-top: 1rem;
+      margin-top: 2rem;
-      height: 5rem;
+      height: 6rem;
       padding-right: 1rem;
 
       @include responsive(tab_port) {
@@ -110,7 +110,7 @@
 
     &-link {
       font-weight: 500;
-      font-size: 1.5rem;
+      font-size: 1.4rem;
       color: rgb(221, 221, 221);
       text-decoration: none;
       margin-right: 2rem;