.c-card {
  --smallest-width-with-timeline: 240px;
  @include grid-assign(image, description, title, meta);
  background-color: var(--theme-color--block);
  border-radius: var(--theme-border-radius);
  position: relative;
  grid-template:
    ". .           . .     ." var(--theme-spacing--gutter)
    ". title       . image ." minmax(1em, auto)
    ". meta . image ." minmax(0, auto)
    ". description . image ." minmax(0, 1fr)
    ". .           . .     ." var(--theme-spacing--gutter)
    / var(--theme-spacing--gutter) minmax(
      var(--smallest-width-with-timeline),
      calc(var(--theme-spacing--container-min) * 2)
    )
    var(--theme-spacing--2) 1fr var(--theme-spacing--gutter);

  @include on-event {
    box-shadow: var(--theme-box-shadow--slim);
    outline: none;
  }
  &__title {
    line-height: 1.875;
    font-weight: 500;
    .c-map & {
      line-height: 1;
    }
  }
  &__description {
    margin: 0 auto auto 0; // pin top left
    .c-map & {
      position: absolute;
      z-index: 1;
      background-color: var(--theme-color--paper);
      padding: var(--theme-spacing--1);
      box-shadow: var(--theme-box-shadow--slim);
      font-size: 0;
      opacity: 0;
    }
    @include on-event(false, ".c-map .c-card") {
      animation: text-appear cubic-bezier(0.25, 1.375, 0.25, 1) 0.5s forwards;
    }
  }
  &__cta {
    display: flex;
    margin: var(--theme-spacing--1) auto;
  }
  &__image {
    // it's an emoji actually - we dumped images
    font-size: clamp(24px, calc(24px + 5vw), 96px);
    text-align: right;
    mix-blend-mode: add;
    @include on-event(false, ".c-card") {
      animation: float 4s infinite alternate ease-in-out;
    }
  }
}

@keyframes text-appear {
  0% {
    transform: rotate3d(0, 0, 1, 3.5deg) scale(0) translateY(0);
    opacity: 0;
    width: 0;
    height: 0;
    font-size: 0;
  }
  10% {
    opacity: 0;
    font-size: 100%;
  }
  100% {
    transform: rotate3d(0, 0, 1, -3.5deg) scale(1) translateY(-10px);
    opacity: 1;
    width: fit-content;
    height: fit-content;
    font-size: 100%;
  }
}

@keyframes float {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-5px);
  }
}
