@import 'app/styles/variables.css';

.compactEvents {
  display: flex;
  justify-content: space-between;
  white-space: nowrap;
  width: 100%;
  text-align: left;
}

.compactEvents h3 {
  margin-bottom: 10px;
  padding: 0;
}

.compactEvents a {
  color: black;

  &:hover {
    color: #c0392b;
  }
}

.compactLeft,
.compactRight {
  flex: 1;
  padding: 0 20px 5px;

  @media (--mobile-device) {
    padding: 0 10px 10px;
  }
}

.compactEvents li {
  display: flex;
  justify-content: space-between;
}

.showMoreLink {
  margin: 0 auto;
  font-size: 16px;
}

@import 'app/styles/variables.css';

.compactEvents {
  display: flex;
  justify-content: space-between;
  white-space: nowrap;
  width: 100%;
  text-align: left;
}

.compactEvents h3 {
  margin-bottom: 10px;
  padding: 0;
}

.compactEvents a {
  color: rgba(0, 0, 0, 0.9);

  &:hover {
    color: #c0392b;
  }
}

.compactLeft,
.compactRight {
  flex: 1;
  padding: 0 20px 5px;

  @media (--mobile-device) {
    padding: 0 10px 10px;
  }
}

.compactEvents li {
  display: flex;
  justify-content: space-between;
}

.showMoreLink {
  margin: 0 auto;
  font-size: 16px;
}

Use a softer color for compact events
Use a softer color for compact events
