.mywidget-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}

.mywidget-item {
  min-height: 200px;
  overflow: hidden;
}

/* Animations */
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes slide-down {
  from {
    transform: translateY(-20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slide-up {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slide-left {
  from {
    transform: translateX(20px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slide-right {
  from {
    transform: translateX(-20px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes zoom-in {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.fade-in {
  animation: fade-in 0.5s ease-out;
}
.slide-down {
  animation: slide-down 0.5s ease-out;
}
.slide-up {
  animation: slide-up 0.5s ease-out;
}
.slide-left {
  animation: slide-left 0.5s ease-out;
}
.slide-right {
  animation: slide-right 0.5s ease-out;
}
.zoom-in {
  animation: zoom-in 0.5s ease-out;
}

.animate-on-scroll {
  opacity: 0 !important;
  text-align:;
}

/* Media responsive */
@media (max-width: 768px) {
  .mywidget-grid {
    grid-template-columns: 1fr;
  }

  .mywidget-item {
    grid-column: span 1 !important;
  }
}