.event-overview {

  &__hl {
    text-align: center;
  }

  &__teaser {
    @media screen and (max-width: 767px) {
      text-align: center;
    }
  }

  &__single-event {
    margin-bottom: 100px;

    &:first-child {
      margin-top: 50px;
    }

    &--date {
      margin-bottom: 20px;
      display: inline-block;

      @media screen and (max-width: 767px) {
        text-align: center;
      }

      &__day {
        background-color: #8ca6b9;
        color: white;
        padding: 12px 20px 10px 20px;
        font-family: Hand_Of_Sean_Demo, sans-serif;
        font-size: 26px;
        display: inline-block;
      }

      &__month {
        font-family: Raleway, sans-serif;
        font-weight: bold;
        font-size: 20px;
        margin-left: 20px;
        display: inline-block;
      }

      &__year {
        font-family: Raleway, sans-serif;
        font-weight: bold;
        font-size: 20px;
        display: inline-block;
      }
    }

    &--name {
      margin-bottom: 10px;
      font-family: Raleway, sans-serif;
      font-size: 20px;
      font-weight: bold;
      
      @media screen and (max-width: 767px) {
        text-align: center;
      }
    }

    &--link {
      a {
        text-decoration: none;
        font-weight: bold;
        color: #53738a;
      }
    }

    &--teaser {
      @media screen and (max-width: 767px) {
        text-align: center;
      }
    }

  }
}