/*body {
  margin: 0;
  background: #111;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-family: sans-serif;
}
*/
@media (min-width:600px) {
    .animated-slider {
        position: relative;
        width: 800px;
        height: 330px;
        overflow: hidden;
        border-radius: 15px;
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
    }
}
@media (max-width:599px) {
    .animated-slider {
        position: relative;
        width: 800px;
        height: 200px;
        overflow: hidden;
        border-radius: 15px;
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
    }
}

    .slide {
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: opacity 1s ease;
    }

        .slide.active {
            opacity: 1;
            z-index: 1;
        }

        .slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    .caption {
        position: absolute;
        bottom: 30px;
        left: 40px;
        font-size: 32px;
        color: white;
        font-weight: bold;
        opacity: 0;
    }

    /* Animation classes */
    .zoom-in {
        animation: zoomIn 1s ease forwards;
    }

    .slide-left {
        animation: slideLeft 1s ease forwards;
    }

    .fade-in {
        animation: fadeIn 1s ease forwards;
    }

    /* Keyframes */
    @keyframes zoomIn {
        0% {
            transform: scale(0.5);
            opacity: 0;
        }

        100% {
            transform: scale(1);
            opacity: 1;
        }
    }

    @keyframes slideLeft {
        0% {
            transform: translateX(100px);
            opacity: 0;
        }

        100% {
            transform: translateX(0);
            opacity: 1;
        }
    }

    @keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }