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/SBogers10/ridderstee.komma.pro/wwwroot/css/partials/posts/_postOverview.sass
/* Post overview
    ========================================================================== */
.post-overview, .relative-posts

  .placeholder
    display: grid
    grid-template-columns: 1fr 1fr 1fr
    grid-gap: 100px 20px
    margin: auto
    width: column(22, 24)

  article
    position: relative
    width: 100%
    max-width: 600px
    background-color: $lightGray05
    text-align: center

    a
      text-decoration: none

    figure
      position: relative
      width: 100%
      overflow: hidden

      .image-placeholder
        width: 100%
        padding-bottom: 66.67%
        height: 0
        position: relative

      span
        position: absolute
        left: 0
        top: 0
        width: 100%
        height: 100%
        transform: scale3d(1,1,1)
        transition: transform 0.8s
        background:
          size: cover
          position: center

    h3
      color: $brown
      font-size: 1.3rem
      line-height: 1.25
      +phenomena
      margin: 30px 10px

    .date
      position: absolute
      right: 0
      top: -30px
      font-size: 0.8rem
      line-height: 1.25
      color: $lightBlue

    .button
      margin-bottom: 30px

    &:hover
      figure
        span
          transform: scale3d(1.07, 1.07, 1)


  +respond-to-width(900)
    .placeholder
      display: block
      width: 100%

    article
      margin-bottom: 60px
      max-width: none
      margin-left: auto
      margin-right: auto

      &:last-of-type
        margin-bottom: 0

      a
        +flex(space-between, flex-start)

        figure
          width: 40%

        .content
          width: 60%
          text-align: left
          padding: 20px 35px

        h3
          text-align: left
          margin: 0 0 10px

        .date
          position: relative
          display: block
          top: 0
          width: 100%
          margin-bottom: 20px

        .button
          margin-bottom: 0

      +respond-to-width(550)
        max-width: 400px
        a
          display: block

          figure, .content
            width: 100%