.animated {
    animation-duration: 1s;
    animation-fill-mode: both;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slide-in-left {
  from { transform: translateX(-100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes slide-in-right {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.fade-in {
  animation-name: fade-in;
}

.slide-in-left {
  animation-name: slide-in-left;
}

.slide-in-right {
  animation-name: slide-in-right;
}
  
.carousel-container {
    overflow: hidden;
}
.carousel-slide {
    display: flex;
    transition: transform 0.3s ease-in-out;
}
.carousel-slide img {
    width: 33.333%;
    flex-shrink: 0;
}

html {
  scroll-behavior: smooth;
}