.fn-timelapse {
  max-width: 907px;
  margin: 1.5rem auto;
}

.fn-timelapse__title {
  margin-bottom: .5rem;
  font-weight: 700;
  text-align: center;
}

.fn-timelapse__stage {
  position: relative;
  background: #111;
}

.fn-timelapse__image {
  display: block;
  width: 100%;
  height: auto;
  min-height: 220px;
  object-fit: contain;
}

.fn-timelapse__counter {
  position: absolute;
  right: .5rem;
  bottom: .5rem;
  padding: .2rem .45rem;
  color: #fff;
  background: rgb(0 0 0 / 65%);
  font-size: .85rem;
}

.fn-timelapse__controls {
  display: flex;
  justify-content: center;
  gap: .5rem;
  margin: .75rem 0;
}

.fn-timelapse__controls button,
.fn-timelapse__strip button {
  border: 1px solid #bbb;
  background: #fff;
  cursor: pointer;
}

.fn-timelapse__controls button {
  min-width: 2.5rem;
  padding: .35rem .65rem;
}

.fn-timelapse__strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: .35rem;
}

.fn-timelapse__strip button {
  padding: 0;
  opacity: .72;
}

.fn-timelapse__strip button.is-active {
  outline: 3px solid #2f6f9f;
  opacity: 1;
}

.fn-timelapse__strip img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.fn-timelapse__empty {
  text-align: center;
}

.fn-timelapse:not(.is-ready) .fn-timelapse__controls::after {
  content: "Carregant timelapse...";
  color: #666;
  align-self: center;
  font-size: .9rem;
}

.fn-timelapse.has-error .fn-timelapse__controls::after {
  content: "No s'ha pogut iniciar el timelapse";
  color: #8a1f11;
}