.article-albums
  position relative

.article-albums-photos
  position relative
  display flex
  flex-wrap wrap
  list-unstyled()
  clearfix()
  &::after
    content: ''
    flex-grow 999999999
  .article-albums-item
    position relative
    flex-grow 1
    margin .5rem
    overflow hidden
    img
      object-fit cover
      max-width 100%
      min-width 100%
      vertical-align: center
    .article-albums-caption
      display block
      width 100%
      padding 1rem 0
      text-align center

// Media Query
@media (min-width: 576px)
  .article-albums-item
    img
      height 32rem
    .article-albums-caption
      position absolute
      bottom 0
      left 0
      width 100%
      background-color rgba(black, .5)
      background linear-gradient(to top, rgba(black, .5), transparent)
      color white
      padding 1rem
      opacity 0
      transform translateY(100%)
      transition(transition-base)
    &:hover
      .article-albums-caption
        opacity 1
        transform translateY(0)

@media (min-width: 768px)
  .article-albums-item
    img
      height 20rem