.photo-albums-row
  +flex(space-between, flex-start)
  +flex-rows
  margin-top: 60px

  article
    width: calc((100% - 15px) / 2)
    margin-bottom: 15px

    a
      position: relative
      display: block
      height: 100%
      width: 100%
      text-decoration: none

      figure
        width: 100%
        height: 200px
        background-color: $lighterGray
        background-size: cover
        background-position: center

      .content
        position: relative
        z-index: 5
        width: 100%
        padding: 8px 40px 8px 30px
        background-color: $darkGreen
        transition: background-color 0.3s

        .status
          position: absolute
          right: 0
          top: 0
          width: 40px
          height: 40px
          background-color: $statusGreen
          +flex(center, center)

        h3
          color: white
          font-size: 1rem
          line-height: 1.2
          font-weight: bold()

          +respond-to-width(1000)
            font-size: 0.8rem

      &:hover
        .content
          background-color: darken($darkGreen, 10%)

    &.password
      a
        .content
          background-color: $blue

          .status
            background-color: $lockBlue
            &:after
              content: ''
              +sprite(-140px -365px, 22px, 24px)

        &:hover
          .content
            background-color: darken($blue, 10%)

  // College styling
  [class^="vso"] &
    article
      a
        .content
          background-color: $turquoise
        &:hover
          .content
            background-color: darken($turquoise, 5%)
      &.password
        a
          .content
            background-color: $darkTurquoise

            .status
              background-color: $landingsTurquoise
          &:hover
            .content
              background-color: lighten($darkTurquoise, 10%)