.app-event.burned_tire, .event.card.burned_tire {
  --shadow-color: hsl(221.38, 72.5%, 35.69%);
  --shadow-color-1: hsl(221.38, 72.5%, 55.69%);
  background-color: var(--burned-tire-bg);
  color: var(--burned-tire-fg);
}

.app-event.explosion, .event.card.explosion {
  --shadow-color: hsl(30.44, 89.52%, 25.1%);
  --shadow-color-1: hsl(30.44, 89.52%, 75.1%);
  background-color: var(--explosion-bg);
  color: var(--explosion-fg);
}

.app-event.smoke, .event.card.smoke {
  --shadow-color: hsl(0, 0%, 47.65%);
  --shadow-color-1: hsl(0, 0%, 87.65%);
  background-color: var(--smoke-bg);
  color: var(--smoke-fg);
}

.app-event.smell, .event.card.smell {
  --shadow-color: hsl(54.42, 99.08%, 27.45%);
  --shadow-color-1: hsl(54.42, 99.08%, 77.45%);
  background-color: var(--smell-bg);
  color: var(--smell-fg);
}

.app-event.noise, .event.card.noise {
  --shadow-color: hsl(240, 100%, 60.2%);
  --shadow-color-1: hsl(240, 100%, 80.2%);
  background-color: var(--noise-bg);
  color: var(--noise-fg);
}

@media (min-width: 640px) {
  .event.card {
    display: flex;
    flex-flow: row nowrap;
    padding: 0;
    height: 250px;
    width: 420px;
    gap: 10px;

    .event-details {
      flex: 1 0 200px;
      padding: 0.5em 0.5em 0.5em 0;
      display: flex;
      flex-flow: column nowrap;
      justify-content: space-between;

      header {
        align-self: start;

        h2 {
          font-size: 22px;
          margin-top: 0;
          margin-bottom: 0.25em;
        }
      }

      .event-note {
        text-align: justify;
        margin: 0;
      }
    }

    figure {
      flex: 0 1 190px;
      margin: 0;
      align-self: start;

      img { width: 100%; }

      img,
      video {
        border-radius: calc(var(--border-radius) * 1.5) 0 0 calc(var(--border-radius) * 1.5);
        height: 250px;
        margin: 0;
        min-width: 140px;
        max-width: 188px;
      }
    }
  }
}