/*==========================================================================
  Model grid view,

  used in blog categories, activities, travel categories and third party travels
  for addition css what those page css
  ========================================================================== */

.models
  display: grid
  grid-template-columns: 1fr 1fr 1fr
  grid-gap: 30px 30px

  +respond-to-width(1260)
    grid-template-columns: 1fr 1fr

  +respond-to-width(620)
    display: block
    article
      margin-bottom: 30px

  article
    position: relative
    max-width: 540px
    background-color: white
    border-radius: 0 0 10px 10px

    @supports not (display: flex)
      margin-bottom: 40px

    a
      display: block
      padding-bottom: 70px
      text-decoration: none

      figure
        position: relative
        z-index: 2
        width: 100%
        height: 0
        padding-bottom: 75%
        overflow: hidden

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

      .text
        position: relative
        padding: 20px
        font-size: 0.8rem
        line-height: 1.5
        overflow: hidden

        >*
          position: relative
          z-index: 2

        h4
          color: $darkPurple
          font-family: workSans()
          font-weight: medium()
          font-size: 1.2rem
          transition: color 0.3s

        p
          color: $darkPurple
          font-weight: light()
          transition: color 0.3s

          &:last-child
            margin-bottom: 0


      .button
        position: absolute
        z-index: 3
        left: 20px
        bottom: 30px
        display: inline-block
        padding: 10px 18px
        min-width: 200px
        border-radius: 10px
        background-color: $lightGreen
        font-size: 0.8rem
        line-height: 1.2
        font-weight: medium()
        color: white
        transition: background 0.3s

        &:after
          content: ''
          display: inline-block
          position: absolute
          right: 20px
          bottom: 15px
          +arrowWhite
          +translate3d(0,0,0)
          transition: transform 0.3s

        &:hover
          &:after
            +translate3d(5px, 0, 0)

      .overlay
        position: absolute
        z-index: 1
        width: 100%
        height: 100%
        left: 0
        top: 0
        opacity: 0
        transition: opacity 0.3s

        background-color: $bluePurple3
        background: linear-gradient(135deg, $bluePurpleGradient23)
        border-radius: 0 0 10px 10px

        span
          position: absolute
          z-index: 1
          width: 100%
          height: 100%
          left: 0
          top: 0
          opacity: 0
          background:
            image: url("/img/shapes/model.svg")
            size: cover
            repeat: no-repeat
            position: 50% 100%

          transition: all 0.5s
          transition-delay: 0s

      &:hover
        figure
          //background-color: $bluePurple3
          span
            transform: scale3d(1.05, 1.05, 1)
        .text
          h4, p
            color: white
        .overlay
          opacity: 1
          span
            opacity: 1
            transition-delay: 0.2s

    &:nth-of-type(even)
      a
        .overlay
          span
            transform: scaleX(-1)

  //+respond-to-width(500)
    //width: 100%

    //article
    //  border-radius: 0
    //
    //  a
    //    .overlay
    //      border-radius: 0