.calenderOverview
  h4, h3
    height: 35px
    +flex(flex-start, center)
    background-color: $pink
    text-align: center
    color: white
    font-size: 0.9rem
    font-weight: bold()
    padding: 0 20% 0 calc(28% + 115px)

  h3
    background-color: $darkPink

  article
    +flex(flex-start, center)
    min-height: 100px
    margin: 0 0 0 column(2, 15)
    padding: 0 0 0 column(1, 15)
    border-bottom: 1px solid $lightGray

    .date
      position: relative
      width: 115px
      font-size: 3rem
      line-height: 1
      color: $darkBlue
      text-align: right
      padding-right: 30px
      font-weight: bold()
      font-family: 'Dubai', 'Arial', monospace
      sub
        position: absolute
        top: 4px
        right: 0
        color: $pink
        font-size: 1rem
        line-height: 1
        vertical-align: top

    p
      margin-left: 10%
      width: calc(100% - 100px - 25px - 10%)
      padding-right: 5px
      font-size: 0.8rem
      line-height: 1.3
      color: $darkBlue
      font-weight: bold()

      span
        display: block
        color: $pink
        font-size: 0.9rem

  // College styling
  [class^="vso"] &
    h4, h3
      background-color: $yellow
    h3
      background-color: $darkYellow

    article
      .date
        color: $darkTurquoise
        sub
          color: $brightTurquoise
      p
        color: $turquoise
        span
          color: $darkTurquoise