File: D:/HostingSpaces/Lacom/lacom.nl/resources/assets/sass/site/partials/_referenceBlock.sass
#reference-block
position: absolute
+flex(flex-start, center)
right: 0
bottom: 0
width: column(6, 12)
height: calc(100vw / 12 * 2)
background-color: $lightBrown
//+respond-to-width-beyond(1680)
// height: 240px
+respond-to-width-beyond(1440)
width: column(5, 12)
height: 240px
+respond-to-width(1250)
width: column(8, 12)
height: calc(100vw / 12 * 2.5)
.content
height: 100%
width: column(3, 5)
padding: 30px 20px 10px 25px
.quote
display: block
width: 100%
height: calc(100% - 70px)
margin: 0
color: white
font-size: 1.6rem
line-height: 1.2
font-weight: bold()
.person
display: block
width: 100%
height: 70px
text-align: right
p
margin: 0
color: rgba(white, 0.5)
font-size: 0.8rem
line-height: 1.2
font-weight: semibold()
span
display: block
color: white
.linkedin
display: block
margin-top: 10px
margin-left: auto
+sprite(442px 45px, 20px, 20px)
opacity: 1
transition: opacity 0.3s
&:hover
opacity: 0.6
figure
position: absolute
right: 0
top: 0
width: column(2, 5)
height: 100%
span
position: absolute
top: 0
left: 0
width: 100%
height: 100%
background:
size: cover
position: center
+respond-to-width(1000)
position: relative
width: column(10, 14)
margin-left: column(2, 14)
height: 240px
.content
width: calc(100% - 240px)
figure
width: 240px
+respond-to-width(700)
height: auto
width: 100%
margin-left: auto
margin-right: auto
padding: 30px 20px 20px
figure
width: 100px
height: 100px
left: 0
bottom: 0
right: auto
top: auto
.content
height: auto
width: 100%
padding: 0
.quote
height: auto
.person
height: auto
margin-top: 45px
padding-left: 100px
text-align: left
.linkedin
margin-left: 0