alxjrvs/WednesdayShelf

h2.list-header
  text-align: center
ul.comic-list
  text-align: center
  background-color: $white

  li.comic
    +clearfix
    margin-bottom: 10px
    position: relative
    overflow: hidden

    .comic-issue-cover
      max-width: none
      min-width: 100%

@media #{$small}
  ul.comic-list
    +block-grid(6)
    margin: 0px
    padding-bottom: 10px

    li.comic
      +perspective(1000)
      +transform-style(preserve-3d)
      height: 200px
      position: relative

      &:hover
        .card-flip-container
          .back
            +transform(rotateY(0deg))
          .front
            +transform(rotateY(180deg))

      .card-flip-container
        +transition(0.4s)
        +transform-style(preserve-3d)
        position: relative
        width: 100%
        height: 200px

        .front, .back
          background: $tertiary-blue
          width: 100%
          height: 100%
          +backface-visibility(hidden)
          +transition(0.4s)
          +transform-style(preserve-3d)
          position: absolute
          top: 0
          left: 0

        .front
          z-index: 2
          +transform(rotateY(0deg))

          .comic-issue-cover
            width: 100%
            height: 200px
            position: relative
            margin: 0 auto

        .back
          +transform(rotateY(-180deg))
          color: $white

          .title
            margin-top: 10px

          .lower-buttons
            position: absolute
            bottom: 0
            width: 100%

            .card-link
              +color-on-hover($blue)
              color: $white
              border: 0
              width: 100%
              cursor: pointer
              font-size: 14px
              display: block
              font-weight: 100
              margin-bottom: 10%


@media #{$medium}
  ul.comic-list > li:nth-of-type(5n+1)
    clear: none

  ul.comic-list
    +block-grid(6)
    padding-bottom: 10px

    li.comic
      height: 320px
      padding-right: 0px

      .card-flip-container
        height: 320px
        max-width: 240px
        display: block
        margin: 0 auto
        .front
          .comic-issue-cover
            height: 320px