.ms-system-demo .ms-card {
  overflow: visible;
}

.ms-system-demo .ms-system-shot {
  display: block;
  width: 100%;
  height: auto;
  border: 8px solid #fff;
  border-radius: 12px;
  box-shadow: 0 12px 25px rgba(20, 45, 69, .18);
  transition: transform .25s ease, box-shadow .25s ease;
}

.ms-system-demo .ms-shot-first {
  transform: rotate(-1.2deg);
}

.ms-system-demo .ms-shot-second {
  transform: rotate(1.2deg);
}

.ms-system-demo .ms-system-shot:hover {
  z-index: 2;
  transform: rotate(0) translateY(-5px);
  box-shadow: 0 18px 32px rgba(20, 45, 69, .25);
}

@media (prefers-reduced-motion: no-preference) {
  .ms-system-demo .ms-card:nth-child(1) {
    animation: ms-system-in .6s ease-out both;
  }

  .ms-system-demo .ms-card:nth-child(2) {
    animation: ms-system-in .6s .12s ease-out both;
  }
}

@keyframes ms-system-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.ms-system-demo .ms-system-image-link {
  display: block;
  cursor: zoom-in;
  text-decoration: none;
}

.ms-system-demo .ms-system-image-link:focus-visible {
  outline: 3px solid #1e88e5;
  outline-offset: 6px;
}

.ms-system-demo .ms-system-shot {
  display: block;
  width: 100%;
  height: auto;
  border: 8px solid #fff;
  border-radius: 12px;
  box-shadow: 0 12px 25px rgba(20, 45, 69, .18);
  transition: transform .25s ease, box-shadow .25s ease;
}

.ms-system-demo .ms-shot-first {
  transform: rotate(-1.2deg);
}

.ms-system-demo .ms-shot-second {
  transform: rotate(1.2deg);
}

.ms-system-demo .ms-system-image-link:hover .ms-system-shot {
  transform: rotate(0) translateY(-5px) scale(1.015);
  box-shadow: 0 18px 32px rgba(20, 45, 69, .25);
}