/* Featured Event View */

// Customize these variables to adjust the date design
@featured-event-month-color: #c33;

.lwc-featured-events {
  display: flex;
  justify-content: space-around;

  @media all and (max-width: 800px) {
    display: block; // stack on mobile
  }
}

.lwc-featured-event {
  max-width: 250px;
  position: relative;
  text-align: center;

  @media all and (max-width: 800px) {
    margin: 0 auto 1em; // stack on mobile
  }

  .cal_date {
    position: absolute;
    top: 5px;
    left: -10px;
    background: white;
    font-weight: bold;
    text-transform: uppercase;
    border: 1px solid @featured-event-month-color;
  }

  .cal_date_month,
  .cal_date_day {
    padding: 4px 2px 3px;
    line-height: 1;
  }

  .cal_date_month {
    font-size: 0.875em;
    color: white;
    background: @featured-event-month-color;
  }

  .cal_date_day {
    font-size: 2em;
  }

}

.lwc-featured-event-title {
  margin: 0.5em;
  font-weight: bold;
}
