global.sass in slow-steps-0.4.0

- old
+ new

@@ -85,10 +85,11 @@
 
 .hero__image
   object-fit: cover
   object-position: center
   width: 100%
+  display: inherit
 
 .image__filter--mix
   @include image-filter--mix
 
 .hero__strap
@@ -204,11 +205,12 @@
   & > .svg--line
     stroke: $white
     stroke-width: 1
 
   & > .svg--text
-    font-size: $font-size * .8
+    font-size: $lg-font-size
+    font-weight: $heavy-font
 
 .svg__labels.hidden
 
   & > .svg--circle
     opacity: 0
@@ -232,11 +234,17 @@
     animation: trans-in-left .6s  ease-in-out
 
   & > .trans-right
     animation: trans-in-right .6s ease-in-out
 
+// This is digusting! We need to tweak the actual html so we can readilly access these elements.
+.svg__labels--red
+  & > svg > * > *
+    fill: $opd-coral
+    stroke: $opd-coral!important
 
+
 $svg-text-offset: 60px
 
 @keyframes trans-in-left
   0%
     transform: translateX(-$svg-text-offset)
@@ -339,25 +347,24 @@
         color: $opd-light-blue
 
 
 // This is basically a button and should to be centralised
 .action__call
-  bottom: 0
-  font-size: $font-size * .8
-  margin: -100px auto
+  font-size: $font-size
+  margin: 0 auto
   padding: 2rem
   position: relative
   text-decoration: none
   transition: .2s ease
 
   &:before
     border-radius: 3rem
     content: ''
     display: block
     height: 6rem
-    left: 0
+    left: -1rem
     position: absolute
-    top: 0
+    top: .5rem
     transition: .2s ease
     width: 6rem
 
   span
     font-weight: $heavy-font