.article-grid
  +flex(space-between, flex-start)
  +flex-rows
  +align-content(space-between)
  height: 100vh
  position: relative

  .posts-categories
    position: absolute
    left: -130px
    top: 0
    width: calc((100vw - 100%) / 2)
    max-width: 130px
    height: 100%
    +flex(center, flex-start)
    +flex-rows
    +align-content(space-between)

    .text
      height: calc((100vh - 40px) / 3)
      width: 100%
      +flex(center, flex-end)
      p
        +font-default(12px, 15px)
        text-transform: uppercase
        color: black
        width: 95%
        max-width: 80px
        margin: 0 auto
    .blocks
      height: calc((100vh - 40px) / 3)
      width: 100%

      ul
        list-style: none
        height: 100%
        width: 100%
        +flex(center, flex-start)
        +flex-rows
        padding: 0
        margin: 0
        li
          height: calc(100% / 3)
          width: 100%
          +flex(center, center)
          a
            height: 100%
            width: 100%
            +flex(center, center)
            background-color: $turquoise
            position: relative
            transition: all 0.3s

            span
              display: block
              +align-self(center)
            p
              position: absolute
              width: 100%
              color: white
              margin: 0
              bottom: 20%
              left: 0
              +font-default(12px, 15px)
              text-transform: uppercase
              text-align: center
              transition: all 0.5s
              opacity: 0

            &:hover
              background-color: darken($turquoise, 5%)
              p
                opacity: 1
          &.lifestyle
            a span
              +sprite(-123px -105px, 23px, 20px)
          &.fashion
            a span
              +sprite(-147px -105px, 21px, 22px)
          &.beauty
            a span
              +sprite(-168px -105px, 28px, 17px)
          &.active
            a
              background-color: darken($turquoise, 10%)
    .placeholder
      height: calc((100vh - 40px) / 3)
      width: 100%
  article, .blog-info, .next-page, .previous-page
    width: calc((100% - 40px) / 3)
    height: calc((100vh - 40px) / 3)
    background-color: $lighterGray40

  .blog-info
    +order(3)
    background-color: transparent
    .logo
      width: 245px
      height: 68px
      background-color: $darkGray
      margin: 20px 0 40px auto
      +flex(center, center)
      span
        display: inline-block
        +sprite(-125px -65px, 154px, 31px)
    .text
      text-align: right
      padding-left: 20%
      p
        +font-light( 18px,  22px )
        color: black
      h2
        +font-header(21px, 24px)
        color: $turquoise

    .categories-inline
      display: none
      p
        +font-default(14px, 18px)
        text-transform: uppercase
        margin-right: 20px
      .categories
        +flex(flex-start, center)
        height: 55px
        width: 165px
        padding: 0
        margin: 0
        list-style: none

        li
          height: 100%
          width: 55px
          +flex(center, center)
          transition: all 0.3s
          position: relative
          a
            height: 100%
            width: 100%
            +flex(center, center)
            position: absolute
            top: 0
            left: 0
            z-index: 10
            span
              display: block

          &.lifestyle
            background-color: $turquoise
            &:hover
              background-color: darken($turquoise, 5%)
            a span
              +sprite(-123px -105px, 23px, 20px)
          &.fashion
            background-color: $yellow
            &:hover
              background-color: darken($yellow, 10%)
            a span
              +sprite(-147px -105px, 21px, 22px)
          &.beauty
            background-color: $darkGray
            &:hover
              background-color: darken($darkGray, 10%)
            a span
              +sprite(-168px -105px, 28px, 17px)
          &.active
            &:before
              content: ''
              width: calc(100% - 6px)
              height: calc(100% - 6px)
              position: absolute
              left: 3px
              top: 3px
              border: 2px solid white
              opacity: 0.3
              box-sizing: border-box
  .next-page, .previous-page
    position: relative
    transition: all 0.4s
    a, .align-middle
      +flex(center,center)
      +flex-rows
      width: 100%
      height: 100%
      .placeholder
        text-align: center
        width: 100%
    .align-middle
      margin: 0
    .arrow
      +arrowLargeWhite
    span, p
      color: white
      width: 100%
      padding: 0 10%
      margin-top: 25px
      display: block
      text-align: center
      +font-default(14px, 18px)
      text-transform: uppercase
    p
      margin-top: 0
      font-size: 18px
      line-height: 21px
  .next-page
    background-color: $turquoise
    +order(8)
    &:not(.disable):hover
      background-color: darken($turquoise, 5%)

  .previous-page
    +order(6)
    background-color: $yellow
    .arrow
      transform: rotate(180deg)
    &:not(.disable):hover
      background-color: darken($yellow, 10%)

  article
    background-position: center
    background-size: cover
    position: relative
    cursor: pointer
    &.placeholder
      cursor: auto

    &:nth-of-type(1)
      +order(1)
    &:nth-of-type(2)
      +order(2)
    &:nth-of-type(3)
      +order(4)
    &:nth-of-type(4)
      +order(5)
    &:nth-of-type(5)
      +order(7)
    &:nth-of-type(6)
      +order(9)

    a
      display: block
      width: 100%
      height: 100%

    span
      width: 80px
      height: 80px
      background-color: rgba(251, 188, 67, 0.6)
      position: absolute
      left: 0
      top: 0
      border-bottom-right-radius: 100%
      opacity: 1
      transition: all 0.4s, border-bottom-right-radius 0.4s ease-out 0.2s
      +flex(center, center)

      &:before
        content: ''
        display: inline-block
        position: relative
        left: -13%
        top: -10%
        opacity: 1
        transition: all 0.2s

    &[data-category='fashion']
      span
        &:before
          +sprite(-148px -105px, 20px, 21px)
    &[data-category='beauty']
      span
        background-color: rgba(51, 51, 51, 0.6)
        &:before
          +sprite(-168px -105px, 28px, 18px)
    &[data-category='lifestyle']
      span
        background-color: rgba(30, 150, 150, 0.6)
        &:before
          +sprite(-123px -105px, 23px, 19px)
    p
      background-color: rgba(255, 255, 255, 0.8)
      display: inline-block
      width: auto
      max-width: 50%
      position: absolute
      right: 0
      padding: 8px 25px
      bottom: 3vh
      +font-default(13px, 16px)
      text-transform: uppercase

    &:hover
      span
        width: 100%
        height: 100%
        border-bottom-right-radius: 0
        opacity: 0.5
        &:before
          opacity: 0

+media-query(1700px)
  .article-grid
    .posts-categories
      display: none
    .blog-info
      .categories-inline
        +flex(flex-end, center)

+media-query-height(1000px)
  .article-grid
    .posts-categories
      .blocks
        ul
          li
            a
              p
                bottom: 13%

+media-query-height-or-width(900px, 750px)
  .article-grid
    +flex(space-around, flex-start)
    +flex-rows
    +align-content(space-between)
    height: auto
    padding-top: 70px
    width: 100%
    max-width: 900px

    .posts-categories
      display: none

    article.placeholder
      display: none

    article, .blog-info, .next-page, .previous-page
      margin-bottom: 20px
      width: calc((100% - 40px) / 2)
      height: calc((100vw - 40px) / 2)
      max-height: 425px
    .blog-info
      +order(2)
      padding-right: 20px
      .logo
        margin: 0 0 20px auto
      .categories-inline
        +flex(flex-end, center)
    article
      p
        max-width: 75%
        bottom: 10px
      &:nth-of-type(2)
        +order(3)

      &:nth-of-type(6)
        +order(8)
    .next-page
      +order(9)

+media-query(550px)
  .article-grid
    height: auto
    padding-top: 100px
    width: 100%
    max-width: 550px

    article, .blog-info, .next-page, .previous-page
      width: 100%
      height: 75vw
      margin-bottom: 20px

    .blog-info
      height: auto
      padding: 40px 20px
      +order(0)
      .logo
        display: none

      .text
        padding-left: 0
        max-width: 300px
        margin-left: auto
        p
          font-size: 14px
          line-height: 19px
    .next-page, .previous-page
      height: auto
      padding: 75px 25px