galleryItemStyle(w, h)
  .gallery
    &-item
      width: w
      height: unit(h, "rem")

      &__title
        transform: translate3d(0, unit(h, "rem"), 0)

      &:hover
        .gallery-item__title
          transform: translate3d(0, unit(h - 1.5, "rem"), 0)

.recent-post-item
  margin: 1.6rem 0 2rem

  .content
    margin-top: 0.5rem
    word-break: break-word

    p
      word-break: break-word

    iframe
      width: $content-width
      height: $iframe-height

  .article-type
    margin-left: 0.3rem
    color: $grey

  .article-meta
    color: $grey

    .sticky
      color: $theme-button-hover-color

    i
      margin: 0 0.2rem 0 0.3rem

    &__separator
      margin-left: 0.3rem

    .fa-angle-right,
    &__link
      margin: 0 0 0 0.3rem

  time
    color: $grey

  .more
    display: inline-block
    padding: 0 0.6rem
    height: h = 1.6rem
    background: $light-blue
    color: $white
    text-align: center
    text-decoration: none
    line-height: h
    cursor: pointer
    transition: all 0.2s ease-in-out

    &:hover
      background: $ruby

  .article-title
    display: block
    margin-bottom: 0.3rem
    border-bottom: 1px solid $light-grey
    color: $black
    text-decoration: none
    font-size: 1.4rem
    cursor: pointer
    cursor: pointer
    transition: all 0.2s ease-in-out

    &:hover
      border-bottom: 1px solid $light-blue
      color: $light-blue

.tag-cloud
  padding: 4.5rem 0 7rem
  text-align: center

  a
    display: inline-block
    margin: 0 0.4rem
    text-decoration: none
    cursor: pointer

    &:hover
      color: $ruby !important

  &__title
    font-size: 1.8rem

#tag,
#category,
#archive
  padding: 3rem 0 3rem

.article-sort
  padding-left: 1rem
  border-left: 0.1rem solid $pale-blue

  &-title
    position: relative
    padding-bottom: 1.2rem
    padding-left: 1rem
    font-size: 1.2rem
    line-height: 1

    &:hover
      &:before
        border-color: $ruby

    &:before
      position: absolute
      top: 0.25rem
      left: calc(-0.5rem + 1px)
      z-index: 1
      width: w = 0.5rem
      height: h = w
      border: 0.5 * w solid $light-blue
      border-radius: w
      background: $white
      content: ""
      line-height: h
      transition: all 0.2s ease-in-out

    &:after
      position: absolute
      bottom: 0
      left: 0
      z-index: 0
      width: 0.1rem
      height: 1.3rem
      background: $pale-blue
      content: ""

  &-item
    position: relative
    margin-bottom: 1rem
    transition: all 0.2s ease-in-out

    &:hover
      &:before
        border-color: $ruby

    &:before
      $w = 0.3rem
      position: absolute
      top: 0.48rem
      left: calc(-1rem - 7px)
      width: w = $w
      height: h = w
      border: 0.5 * w solid $light-blue
      border-radius: w
      background: $white
      content: ""
      line-height: h
      transition: all 0.2s ease-in-out

    &.year
      font-size: 1rem

      &:hover
        &:before
          border-color: $light-blue

      &:before
        top: 0.7rem
        border-color: $ruby

    &__time
      position: absolute
      top: 0.1rem
      color: $a-link-color

    &__title
      display: block
      margin-left: 5rem
      color: $font-black
      text-decoration: none
      font-size: 0.8rem
      cursor: pointer

.category-lists
  padding: 3rem 0 3rem

  .category__title
    text-align: center
    font-size: 1.8rem

.category-list
  a
    color: $font-black
    text-decoration: none
    cursor: pointer

  .category-list-count
    margin-left: 0.4rem
    color: $a-link-color

    &:before
      content: "("

    &:after
      content: ")"

.gallery
  &-item
    position: relative
    display: inline-block
    overflow: hidden
    margin: 0.4rem
    width: 6rem
    height: 6rem
    background-position: 50% 50%
    background-size: cover
    background-repeat: no-repeat
    cursor: pointer
    transition: all 0.2s ease-in-out

    &__title
      position: absolute
      overflow: hidden
      padding: 0 0.4rem
      width: 100%
      height: 1.5rem
      background: rgba(0, 0, 0, 0.5)
      color: $pale-blue
      text-align: center
      text-overflow: ellipsis
      white-space: nowrap
      line-height: 1.5rem
      transition: 0.2s ease-in-out
      transform: translate3d(0, 6rem, 0)

    &:hover
      .gallery-item__title
        transform: translate3d(0, 4.5rem, 0)

@media screen and (max-width: $sm)
  .recent-post-item
    .article-title
      font-size: 1rem

    .article-meta.tags
      display: none

  galleryItemStyle(calc(50% - 22px), 6)

@media screen and (min-width: $md)
  galleryItemStyle(8rem, 8)