File: D:/HostingSpaces/Lacom/lacom.nl/resources/assets/sass/site/partials/_otherRelativeModelsRow.sass
.other-relative-models-row
position: relative
z-index: 2
padding-bottom: calc(100vw / 12 * 1.5)
+respond-to-width-beyond(1440)
padding-bottom: 180px
.models-placeholder
padding: 0 column(1, 12)
+flex(space-between, flex-start)
.model
width: column(3, 10)
border-bottom: 1px solid $black
&:nth-child(4)
display: none
a
text-decoration: none
.image-placeholder
display: block
width: 100%
figure
position: relative
background-color: rgba($black, 0.075)
width: 100%
padding-bottom: 60%
height: 0
overflow: hidden
span
position: absolute
left: 0
top: 0
height: 100%
width: 100%
background-size: cover
background-position: center
transform: scale3d(1,1,1)
transform-origin: center
transition: transform 0.5s
h4
+flex(space-between, center)
height: 60px
margin: 0
padding: 0 30px
font-size: 0.9rem
line-height: 1.2
font-weight: medium()
color: $black
.text
display: inline-block
width: calc(100% - 30px)
.arrow
display: inline-block
+sprite(470px 43px, 19px, 13px)
transform: translate3d(0,0,0)
transition: transform 0.3s
+respond-to-width(400)
padding: 0 15px
a:hover
.image-placeholder
figure
span
transform: scale3d(1.05, 1.05, 1)
h4
.arrow
transform: translate3d(8px, 0, 0)
+respond-to-width(1450)
.models-placeholder
padding: 0
+respond-to-width(1200)
.models-placeholder
+flex-rows
.model
width: calc(50% - 20px)
&:nth-child(3), &:nth-child(4)
display: block
margin-top: 40px
+respond-to-width(700)
.models-placeholder
display: block
.model
width: calc(100% - 40px)
max-width: 400px
margin-left: auto
margin-right: auto
+ .model
margin-top: 40px
&:nth-child(4)
display: none