.date {
  @extend %heading-font-bold;

  font-size: $font-size-base;
}

//Event Date for Teasers
.event-date-section {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  background-color: $date-section-background-color;
}

.event-date-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.event-date {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: $spacer-xxs $spacer-sm;
}

.event-day-month {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.event-day {
  @extend %heading-font-heavy;

  color: $date-section-day-color;
  font-size: $font-size-lg;
}

.event-month {
  @extend %heading-font-heavy;

  margin-bottom: 0;
  text-transform: uppercase;
  color: $date-section-month-color;
  font-size: $font-size-xs;
}

.event-year {
  @extend %heading-font-regular;

  margin-left: $spacer-xs;
  border-left: 1px solid $date-section-year-color;
  padding-left: $spacer-xxs;
  color: $date-section-year-color;
  font-size: $font-size-xs;
}

.event-date-separator {
  border: 0;
  background-color: $date-section-year-color;
  width: $spacer-base;
  height: 2px;
}

// Breakpoints
@media screen and (min-width: $grid-breakpoint-md) {
  .event-date-section {
    margin-top: 0;
    width: 80px;
  }

  .event-date-wrapper {
    flex-direction: column;
  }

  .event-date {
    flex-direction: column;
  }

  .event-day {
    font-size: $font-size-xl;
  }

  .event-month {
    margin-bottom: $spacer-xxs;
    font-size: $font-size-base;
  }

  .event-year {
    margin-left: 0;
    border-top: 1px solid $date-section-year-color;
    border-left: 0;
    padding-left: 0;
    font-size: $font-size-xs;
  }

  .event-date-separator {
    transform: rotate(90deg);
    margin: $spacer-sm 0;
  }
}