Carousel: Create a bigger hover/click area for controls

src/style/organisms/_carousel.scss

@@ -29,7 +29,7 @@
         &__images {
             position: relative;
             height: 0;
-            padding-bottom: calc(100% / 1.5);
+            padding-bottom: calc(100% / 1.5); // Ratio 3.2
 
             // Photo
             &--photo {
@@ -118,25 +118,35 @@
         display: none;
 
         @include breakpoint (sm) {
+            position: absolute;
+            z-index: 11;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
             display: flex;
             justify-content: space-between;
-            pointer-events: none;
-            position: absolute;
-            top: 50%;
-            transform: translateY(-50%);
-            width: 100%;
-            z-index: 11;
+        }
 
-            .dir-left {
-                transform: translateX(-50%);
+        // Hover and clicking area
+        &--area {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 12%;
+            height: 100%;
+            cursor: pointer;
+
+            &.prev {
+                margin-left: -6%;
             }
-            .dir-right {
-                transform: translateX(50%);
+            &.next {
+                margin-right: -6%;
             }
         }
 
-        a {
-            box-shadow: 0 2px 21px rgba(#000, 0.15);
+        button {
+            box-shadow: 0 2px 20px rgba(#000, 0.15);
         }
     }