@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.shimmer-container {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 10px 0px;
  max-width: 100%;
  margin: 0 auto;
}

.shimmer-card {
  flex: 1 1 calc(20% - 10px);
  height: 150px;
  background: linear-gradient(90deg, #2e2e2e 25%, #373737 50%, #393838 75%);
  background-size: 200% 100%;
  border-radius: 8px;
  overflow: hidden;
  animation: shimmer 1.5s infinite linear;
}

@media (max-width: 1200px) {
  .shimmer-card {
    flex: 1 1 calc(25% - 10px); 
  }
}

@media (max-width: 992px) {
  .shimmer-card {
    flex: 1 1 calc(33.33% - 10px);
  }
}

@media (max-width: 768px) {
  .shimmer-card {
    flex: 1 1 calc(50% - 10px);
  }
}

@media (max-width: 576px) {
  .shimmer-card {
    flex: 1 1 calc(100% - 10px);
    height: 250px;
  }
}