.events {
  --background: var(--background-color);
  color: contrast-color(var(--background));
  padding-block-end: 5vw;
}

.events a:hover {
  transition-duration: var(--transition-duration);
  transition-timing-function: var(--transition-timing-function);
  transition-property: translate, filter;
}

@media (hover) {
  .events a:hover {
    translate: 0 -0.25rem;
    filter: drop-shadow(0 0 50px hsl(from var(--key-color) h s l / 0.3));
    z-index: 1;
  }
}


.events-cards figure {
  gap: 0;
  border-radius: var(--border-radius);
  background-color: var(--background-color);
  background-image:
    radial-gradient(circle at top,
      hsl(from var(--key-color) h s l / 0.65),
      transparent 75%
    ),
    radial-gradient(circle at bottom,
      hsl(from var(--background-color) h s calc(l + 10) / 0.65),
      transparent 75%
    );

  filter: drop-shadow(0 3px 3px hsl(from var(--background-color) h s l));
  border-block: 1px solid var(--key-color);

  figcaption {
    text-align: left;
    padding: 1rem;
  }

  p {
    font-size: 0.8rem;
    text-wrap: pretty;
    line-height: 1.65;
  }
}