fix: style tweaks

Author: luiskcs89

src/pages/app-our-work-single/app-our-work-single.scss

@@ -97,19 +97,36 @@
           margin-left: 50px;
         }
 
+        &:first-child {
+          position: absolute;
+          right: 175px;
+
+          @include media-breakpoint-down(md) {
+            position: initial;
+            right: initial;
+          }
+
+          @include media-breakpoint-down(sm) {
+            position: initial;
+            right: initial;
+          }
+        }
+
         &:last-child {
           position: absolute;
           top: 200px;
-          left: 125px;
+          right: 50px;
 
           @include media-breakpoint-down(md) {
             top: 100px;
             left: 100px;
+            right: initial;
           }
 
           @include media-breakpoint-down(sm) {
             top: 80px;
             left: 80px;
+            right: initial;
           }
         }
       }
@@ -159,7 +176,11 @@
       }
 
       img {
-        margin: 10px 20px 10px 0;
+        margin: 10px 40px 10px 0;
+
+        @include media-breakpoint-down(sm) {
+          margin: 10px 20px 10px 0;
+        }
       }
     }
 
@@ -287,6 +308,10 @@
           top: 30px;
           width: 100%;
 
+          @include media-breakpoint-down(md) {
+            width: 50%;
+          }
+
           @include media-breakpoint-down(sm) {
             content: none;
           }
@@ -305,7 +330,7 @@
 
     .more-projects-items {
       display: flex;
-      justify-content: space-around;
+      justify-content: space-evenly;
       margin-top: 120px;
       margin-bottom: 160px;
 
@@ -342,6 +367,11 @@
           text-align: center;
           margin-top: 36px;
           margin-bottom: 0;
+
+          &.sm {
+            margin-bottom: 36px;
+            margin-top: 0;
+          }
         }
 
         .images-col {
@@ -372,4 +402,24 @@
       }
     }
   }
+
+  .carousel-indicators {
+    bottom: 0;
+    position: initial;
+    @include media-breakpoint-down(sm) {
+      position: initial;
+    }
+  }
+
+  .carousel-indicators li {
+    border-radius: 100%;
+    background-color: #d8d8d8;
+    height: 21px;
+    margin: 0.5rem;
+    width: 21px;
+  }
+
+  .carousel-indicators .active {
+    background-color: $gray-dark;
+  }
 }

src/pages/app-our-work-single/app-our-work-single.tsx

@@ -141,6 +141,7 @@ export class AppOurWorkSingle {
     return otherProjects.map(project => {
       return (
         <div class="more-project-single">
+          <p class="d-sm-block d-md-none sm">{project.header.title}</p>
           <div class="images-col">
             <img src={project.otherProjectImgs.image1} />
             <img src={project.otherProjectImgs.image2} />
@@ -153,7 +154,7 @@ export class AppOurWorkSingle {
               <img src="/assets/graphic-google-googleplaystore.png" alt="download on play store" />
             </a>
           </div>
-          <p>{project.header.title}</p>
+          <p class="d-none d-md-block">{project.header.title}</p>
           <div class="other-button">
             <stencil-route-link url={`/our-work-single/${project.key}`} exact={true}>
               <button>

src/pages/app-our-work/app-our-work.scss

@@ -9,6 +9,7 @@
       display: flex;
       flex-direction: column;
       justify-content: center;
+      background-position: center;
       min-height: 520px;
 
       @include media-breakpoint-down(md) {