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/_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