body.progress * {
  cursor: progress !important;
}

.grid {
  --column-gap: calc(var(--space-m) * 1.5);
  --row-gap: calc(var(--space-m) / 2);
  --row-length: calc(12 / var(--span));
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--column-gap);
  row-gap: var(--row-gap);
}

.grid__item {
  grid-column: span var(--span);
}

.grid__item picture {
  --column-gap-nbr: var(--row-length) - 1;
  --white-space: calc(
    (var(--column-gap) * var(--column-gap-nbr)) + var(--space-m) * 2
  );
  --width: calc((100vw - var(--white-space)) / var(--row-length));
  height: calc(var(--width) / 1.4);
}

.grid__item picture img {
  object-fit: cover;
}

@keyframes vibrate {
  0%,
  100% {
    scale: 1;
    transform: rotate(0deg);
  }
  20%,
  40%,
  60%,
  80% {
    transform: rotate(5deg);
  }

  20% {
    scale: 0.95;
  }

  50% {
    scale: 1.05;
  }

  80% {
    scale: 0.95;
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    transform: rotate(-5deg);
  }
}

.ticket {
  display: inline-flex;
}

.ticket:hover svg {
  animation: vibrate 0.5s forwards;
}

.ticket:hover svg path:not(.dot) {
  fill: var(--color-salmon);
  stroke: var(--color-salmon);
}

.ticket:hover svg path.dot {
  fill: #fff;
}