/*==========================================================================
  Photo album page
  ========================================================================== */

.photo-album

  // Styling blocks
  .white-styling-block
    position: relative
    height: 160px
    width: 100%
    background-color: white
    margin-top: -160px

  .content-placeholder
    position: relative

    .background
      position: absolute
      bottom: 0
      right: 0
      height: calc(100% - 120px)
      width: 50%
      background-color: white

  /* Photo album content
     ========================================================================== */
  .main
    position: relative
    z-index: 5
    background-color: white
    padding: 0 column(1)

    .return-link
      height: 120px
      +flex(flex-start, center)
      a
        font-size: 0.8rem
        color: $blue
        text-decoration: none
        font-weight: medium()
        transition: color 0.3s

        &:before
          content: ''
          margin-right: 10px
          +arrowBlue
          +translate3dRotate(0,0,0,180deg)
          transition: transform 0.3s

        &:hover
          color: $bluer
          &:before
            +translate3dRotate(-5px,0,0,180deg)

    h1
      font-size: 2rem
      color: $darkBlue
      margin-bottom: 60px

      [class^="vso"] &
        color: $darkTurquoise

    .images
      +flex(flex-start, flex-start)
      +flex-rows

      a
        width: calc((100% - 30px) / 3)
        margin-right: 15px
        margin-bottom: 15px
        &:nth-of-type(3n + 3)
          margin-right: 0

      .image
        width: 100%
        padding-bottom: 66.9%

        background-position: center
        background-size: contain
        background-repeat: no-repeat
        background-color: $lighterGray