/* === OXYGEN Issue with these Flex Mixins - They can't be used as a base Oxy Class (.ct-div-block) overides them in the DOM  ===*/
.featured-event-card {
  /*@include flexStart(row, space-between;*/
  width: 100%;
  height: auto;
  margin-top: -2px;
  border-top: 2px solid var(--black);
  background: var(--white);
}
.featured-event-card__inner {
  /*@include flexStart(column, space-between);*/
  min-width: 20%;
  padding: 2rem 0;
  /*background: var(--base-ultra-light);*/
}
.featured-event-card__inner h4, .featured-event-card__inner h5, .featured-event-card__inner h6 {
  text-transform: uppercase;
  font-weight: 400;
  color: var(--black);
}
.featured-event-card__inner h4 a, .featured-event-card__inner h5 a, .featured-event-card__inner h6 a {
  color: var(--black);
}
.featured-event-card__inner h4 a:hover, .featured-event-card__inner h5 a:hover, .featured-event-card__inner h6 a:hover {
  text-decoration: underline;
}
.featured-event-card__inner h4, .featured-event-card__inner h5 {
  margin-bottom: 2rem;
}
.featured-event-card__inner h6 {
  margin-top: auto;
}
@media only screen and (max-width: 992px) and (orientation: portrait) {
  .featured-event-card__inner {
    padding: 1.4rem;
  }
}
@media only screen and (max-width: 480px) and (orientation: portrait) {
  .featured-event-card__inner {
    padding: 1rem;
  }
}
.featured-event-card__icon {
  stroke: var(--black);
  stroke-linejoin: round;
  stroke-width: 2;
  margin: 0 0 0 auto;
  transform: rotate(0deg);
  transition: 0.2s;
}
.featured-event-card:last-of-type {
  border-bottom: 2px solid var(--black);
}
.featured-event-card:hover .featured-event-card__icon {
  transform: rotate(45deg);
  transition: 0.2s;
  stroke: var(--primary);
}