.acm-cards {
  position: relative;
  height: 400px;
  width: 100%;
  padding: 0
}

.acm-cards img {
  position: absolute;
  display: block;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 4px 8px -2px rgb(9 30 66 / .25), 0 0 0 1px rgb(9 30 66 / .08);
  cursor: pointer;
  transition: all .3s ease
}

.acm-cards.active img:hover {
  transform: translateY(-55%)
}

.acm-cards:not(.active) img {
  filter: grayscale(.7);
  cursor: auto
}

.acm-cards img.selected {
  transform: translateY(-55%);
  filter: grayscale(1);
  cursor: auto
}

.acm-fal {
  box-sizing: border-box;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
  border-radius: 10px;
  padding: 1em;
  background: #f2f2f2;
  visibility: hidden;
  opacity: 0;
  transition: opacity .3s ease
}

.acm-fal.show {
  visibility: visible;
  opacity: 1
}

.acm-spinner {
  display: none;
  border: 4px solid rgb(255 255 255 / .3);
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin: 0 auto
}

@keyframes spin {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(360deg)
  }
}