/*==========================================================================
  Travel overview page
  ========================================================================== */
.travels

  .no-travels
    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: 90px column(1, 14)

  .main-content
    position: relative
    padding: 90px 0 125px
    background-color: $gray
    background-image: url("/img/travel_background.jpg")
    background-position: bottom center
    background-size: 100% auto
    background-repeat: no-repeat

    .no-travels
      font-size: 1.25rem
      padding: 0 column(1, 14) 60px
      text-align: left

    .models
      article
        a
          .duration
            position: absolute
            right: 50px
            bottom: 40px
            font-size: 0.75rem
            line-height: 1
            font-style: italic
            color: $purple

            +respond-to-width(1200)
              right: auto
              left: 50px
              bottom: 90px

          .date-block
            position: absolute
            +flex(flex-end, flex-start)
            +flex-rows
            width: 126px
            right: 0
            top: -42px

            .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)

          &:hover
            .button
              background-color: $green

      +respond-to-width(500)
        article
          a
            .text
              padding-left: column(1, 14) !important
              padding-right: column(1, 14) !important

            .duration, .button
              left: column(1, 14) !important


    .models.travel-overview
      article
        a
          padding-bottom: 100px
          +respond-to-width(1200)
            padding-bottom: 140px

          figure
            padding-bottom: 60%

          .text
            overflow: visible
            padding: 50px 50px 0

            h4
              color: $darkPurple !important

            p
              color: $darkPurple !important


          .button
            bottom: 40px
            left: 50px


    .models.own-travels
      grid-template-columns: 1fr 1fr
      grid-gap: 50px column(1)
      margin-bottom: 80px

      +respond-to-width(1260)
        grid-gap: 30px 30px

      +respond-to-width(750)
        display: block
        article
          margin-bottom: 30px


      article
        a
          .date-block
            .day, .icon
              background-color: $lightGreen

    .models.other-travels
      article
        a
          +respond-to-width(750)
            .text
              padding-left: 30px
              padding-right: 30px
            .button
              left: 30px

          +respond-to-width(620)
            .text
              padding-left: 50px
              padding-right: 50px
            .button
              left: 50px

    >h2
      max-width: 1680px
      width: column(12)
      margin: 0 auto 40px
      color: $darkPurple
      font-size: 1.75rem
      font-weight: medium()