CSS Animations

.spinner {
  width: 156px;
  height: 156px;
  border: 10px solid #d8e2f1;
  border-top-color: #58e40d;
  border-radius: 50%;
  animation: spin 3s linear infinite;
  margin: 1rem auto;
  display: block;
  flex: 0 0 auto;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

.pulse {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: #2b0c9bd0;
  box-shadow: 0 0 0 rgba(46,125,91,0.6);
  animation: pulse 2s ease-in-out infinite;
  margin: 1rem auto;
  display: block;
  flex: 0 0 auto;
}
@keyframes pulse {
  0%   { transform: scale(1);   box-shadow: 0 0 0 0 rgba(3,199,213,0.593); opacity: 1; }
  70%  { transform: scale(1.15); box-shadow: 0 0 0 18px rgba(231,2,243,0.347); opacity: 0.9; }
  100% { transform: scale(1);   box-shadow: 0 0 0 0 rgba(246,91,1,0.422); opacity: 1; }
}

#cards {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
}
.card {
  flex: 0 0 clamp(140px, 12vw, 200px);
  width: clamp(140px, 12vw, 200px);
  aspect-ratio: 5 / 7;
  border-radius: 10px;
  border: 1px solid #e4e7ef;
  overflow: hidden;
  background-color: #fff;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  animation: slideLoop 5s ease-in-out infinite;
}
.card:nth-child(2) { animation-delay: 0.33s; }
.card:nth-child(3) { animation-delay: 0.66s; }
@keyframes slideLoop {
  0%   { opacity: 0;   transform: translate3d(0, 14px, 0); }
  15%  { opacity: 1;   transform: translate3d(0, 0, 0); }
  85%  { opacity: 1;   transform: translate3d(0, 0, 0); }
  100% { opacity: 0;   transform: translate3d(0, 14px, 0); }
}