.card.event-card {
  background-color: var(--op-color-primary-plus-max);
  border-radius: var(--op-radius-x-large);
  box-shadow: var(--op-shadow-x-small);
  transition: all 150ms;
  border: none;
  &:hover {
    background-color: var(--op-color-neutral-plus-seven);
  }
}

.event-card__name {
  color: var(--op-color-primary-base);
  font-weight: var(--op-font-weight-bold);
  font-size: var(--op-font-large);
}

.event__row-text {
  display: flex;
  gap: var(--op-space-x-small);
  color: var(--op-color-neutral-minus-one);
  font-size: var(--op-font-small);
}

.event-card__color-swatch, .event__decorator {
  width: var(--op-space-2x-large);
  height: var(--op-space-2x-large);
  border-radius: var(--op-radius-small);
}