.spr-event-teaser {
  position: relative;
  z-index: 1;
  padding-block-end: var(--space-small);
  transition: all 0.2s ease;
  gap: 1rem;

  &.spr-event-teaser--clickable:hover {
    cursor: pointer;

    &::after {
      position: absolute;
      z-index: -1;
      top: -0.25rem;
      right: 0;
      bottom: 0;
      left: -0.5rem;
      display: block;
      width: calc(100% + 0.5rem);
      height: calc(100% + 0.25rem);
      content: "";
      border-radius: 0.875rem;
      background-color: var(--color-secondary-light);
    }
  }

  @media (min-width: 768px) {
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(4, 1fr);
  }

  @media screen and (min-width: 992px) {
    grid-template-columns: repeat(10, 1fr);
  }
}

.spr-event-teaser__time {
  display: flex;
  flex-direction: row;
  grid-column: 1 / span 4;
  align-items: center;
  align-self: flex-start;
  justify-content: flex-start;
  line-height: 2.5rem;
  gap: var(--space-x-small);

  .spr-icon--30 {
    width: 1.875rem;
    height: 1.875rem;
  }

  @media (min-width: 992px) {
    grid-column: 1 / span 1;
  }
}

.spr-event-teaser__content {
  grid-column: 1 / span 4;

  @media (min-width: 992px) {
    grid-column: 2 / span 7;
  }
}

.spr-event-teaser__content h2 {
  margin-block: 0 var(--space-x-small);
  color: var(--color-primary);
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-regular);
  line-height: 2.5rem;

  .spr-event-teaser--clickable & {
    text-decoration-line: underline;
    text-decoration-thickness: 0.125rem;
    text-underline-offset: 0.1875rem;
  }
}

.spr-event-teaser__text {
  margin-block: 0 var(--space-x-small);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  line-height: 2rem;
}

.spr-event-teaser__category {
  grid-column: 1 / span 4;

  .spr-event-teaser--clickable:hover & {
    .spr-badge {
      background-color: var(--color-white);
    }
  }

  @media (min-width: 992px) {
    grid-column: 9 / span 2;
    padding-block-start: 0.5rem;
  }
}

.spr-event-teaser--clickable .spr-event-teaser__actions a::after {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  content: "";
  inset: 0;
}