.home-activities
  position: relative
  padding: 80px 0 120px
  background-color: $gray

  +respond-to-width(680)
    padding-bottom: 40px

  .grid-row
    position: relative

  h3
    font-size: 1.75rem
    line-height: 1.2
    color: $darkPurple
    margin-bottom: 75px

  .activities-button
    position: absolute
    right: 0
    top: 0
    display: inline-block
    min-width: 200px
    padding: 8px 55px 8px 20px
    border-radius: 10px
    border: 1px solid $purple
    font-family: rubik()
    font-size: 0.8rem
    line-height: 1.6
    transition: background 0.3s
    cursor: pointer
    text-decoration: none
    color: $purple

    +respond-to-width(680)
      position: relative
      display: block
      max-width: 250px
      margin: 40px auto 0

    &:after
      content: ''
      display: inline-block
      position: absolute
      right: 20px
      bottom: 15px
      +arrowPurple
      +translate3d(0,0,0)
      transition: transform 0.3s

    &:hover
      &:after
        +translate3d(5px, 0, 0)


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

          .day, .month, .icon
            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

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