File: D:/HostingSpaces/SBogers101/cranendonckactief.nl/wwwroot/css/partials/home/_headerImage.sass
.header-image
position: relative
width: 100%
img
width: 100%
figcaption
position: absolute
left: -20px
bottom: 10%
font-size: 2.4rem
font-weight: semi-bold()
color: white
line-height: 1
margin-left: column(1, 12)
span
display: inline-block
background: linear-gradient(90deg, $darkGreenGradient)
padding: 12px 20px
margin-bottom: 2px
+respond-to-width(750)
font-size: 1.8rem
+respond-to-width(600)
margin-top: 20px
margin-left: 0
position: relative
left: 0
bottom: 0
.show-scroll
position: absolute
left: calc(50% - 55px)
bottom: 0
+flex(center, center)
width: 110px
height: 55px
cursor: pointer
+respond-to-width(600)
display: none
.arrow
position: relative
top: 5px
z-index: 2
display: inline-block
width: 8px
transform: translate3d(0,0,0)
transition: transform 0.3s
svg
width: 100%
&:after
position: absolute
left: 0
bottom: 0
content: ''
width: 0
height: 0
border-style: solid
border-width: 0 55px 55px 55px
border-color: transparent transparent $lightGray transparent
&:hover
.arrow
transform: translate3d(0,3px,0)
+respond-to-width(900)
width: 90px
height: 45px
left: calc(50% - 45px)
&:after
border-width: 0 45px 45px 45px