/*==========================================================================
  Activities overview page
  ========================================================================== */
.activities
  .overview
    background-color: $gray
    padding: 120px 0 0

    .no-activities
      display: block
      width: 100%
      margin: auto
      font-size: 1.5rem
      line-height: 1.6
      background-color: $gray
      color: $purple
      font-family: rubik()
      text-align: center
      padding: 0 column(1, 14) 90px

    .pagination-row
      padding: 80px 0 80px

    +respond-to-width(1260)
      padding: 80px 0 0
      .pagination-row
        padding: 60px 0 60px

    +respond-to-width(750)
      padding: 50px 0 0
      .pagination-row
        padding: 40px 0 40px

    .models
      grid-gap: 90px 30px

      article
        position: relative

        a
          figure
            .ownActivity
              position: absolute
              background-color: white
              z-index: 3
              left: 0
              bottom: 0
              width: 42px
              height: 62px
              +flex(center, center)

              &:before
                content: ''
                display: inline-block
                +sprite(-55px 0, 32px, 53px)


          .date-block
            position: absolute
            z-index: 3
            +flex(flex-end, flex-start)
            +flex-rows
            width: 100%
            right: 0
            top: 0

            .day, .month, .icon, .repeating
              width: 42px
              height: 42px
              +flex(center, center)
              color: white
              font-size: 0.9rem
              line-height: 1
              font-weight: semi-bold()

            .day, .icon
              background-color: $purple
            .month
              background-color: $darkPurple

            .repeating
              background-color: $green
              &:before
                content: ''
                display: inline-block
                transform: rotate(0deg)
                transition: transform 0.6s
                +sprite(-33px -123px, 25px, 28px)

            .icon
              &:before
                content: ''
                display: inline-block
                +sprite(0 -88px, 22px, 25px)

          &:hover
            .date-block
              .repeating
                &:before
                  transform: rotate(180deg)