HEX
Server: Microsoft-IIS/8.5
System: Windows NT YDAWBH120 6.3 build 9600 (Windows Server 2012 R2 Standard Edition) AMD64
User: tentjecom_web (0)
PHP: 7.4.14
Disabled: NONE
Upload Files
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