File: D:/HostingSpaces/Lacom/lacom.nl/resources/assets/sass/site/partials/about/_employeesRow.sass
.employees-row-divider
height: calc(100vw / 12 * 2)
+respond-to-width-beyond(1440)
height: 240px
.employees-row
position: relative
z-index: 3
padding: calc(100vw / 12) 0 calc(100vw / 12 * 1.5)
background-color: white
+respond-to-width-beyond(1440)
padding: 120px 0 180px
.employees-grid
width: column(10, 12)
margin-left: column(1, 12)
+flex(space-between, flex-start)
+flex-rows
+respond-to-width(1300)
width: 100%
margin-left: 0
.employee
width: 22.5%
max-width: 250px
margin-bottom: 25px
figure
position: relative
width: 100%
.image-placeholder
width: 100%
height: 0
padding-bottom: 100%
span
position: absolute
left: 0
top: 0
width: 100%
height: 100%
background:
size: cover
position: center
&.small
display: none
+respond-to-width(700)
&.medium
display: none
&.small
display: block
p
margin: 15px 0 0
font-size: 0.8rem
line-height: 1.2
font-weight: semibold()
color: rgba($lightGrey, 0.5)
span
display: block
color: $lightGrey
+respond-to-width(1000)
width: 30%
+respond-to-width(600)
width: calc(50% - 20px)
@supports (display: flex)
+respond-to-width-beyond(500)
display: grid
grid-template-columns: 1fr 1fr 1fr 1fr
grid-gap: calc(100vw / 12 / 3) calc(100vw / 12 / 3 * 2)
+prefixer(justify-content, normal, webkit moz ms)
+prefixer(align-items, stretch, webkit moz ms)
.employee
width: 100% !important
margin-bottom: 0
+respond-to-width-beyond(1440)
grid-gap: 40px 80px
+respond-to-width(1000)
grid-template-columns: 1fr 1fr 1fr
grid-gap: calc(100vw / 12 / 2) calc(100vw / 12 / 3 * 2)
+respond-to-width(600)
grid-template-columns: 1fr 1fr
grid-gap: calc(100vw / 12 / 3 * 2) calc(100vw / 12 / 3 * 2)
+respond-to-width(700)
padding: 80px 0 120px
.grid-row
width: 100%
.employees-grid
width: calc(100% - 80px)
margin-left: 40px
+respond-to-width(500)
.grid-row
.employees-grid
display: block
.employee
width: 100%
max-width: 240px
margin-left: auto
margin-right: auto