<css>/* https://www.sarie-jayne.com
Sarie-Jayne Design HTML Template
v1.0.0
*/

body {
    font-family: Arial, sans-serif;
}

.slideshow-container {
    display: none; /* Hide by default */
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
}

.slide {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: lightblue;
    animation: slide 10s infinite;
}

@keyframes slide {
    0% { transform: translateX(0); }
    33% { transform: translateX(-100%); }
    66% { transform: translateX(-200%); }
    100% { transform: translateX(0); }
}

.mobile-video {
    display: none; /* Hide by default */
    width: 100%;
}

@media (max-width: 768px) {
    .slideshow-container {
        display: none; /* Hide slideshow on mobile */
    }

    .mobile-video {
        display: block; /* Show video on mobile */
    }
}

@media (min-width: 769px) {
    .slideshow-container {
        display: block; /* Show slideshow on PC */
    }

    .mobile-video {
        display: none; /* Hide video on PC */
    }
}

 .slideshow-container {
    
    display: none; /* Hide by default */
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
}

.mySlides {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: lightblue;
    animation: slide 10s infinite;

img {
    width: 100%; /* Make images responsive */
    height: auto; /* Maintain aspect ratio */
}
@keyframes slide {
    0% { transform: translateX(0); }
    33% { transform: translateX(-100%); }
    66% { transform: translateX(-200%); }
    100% { transform: translateX(0); }
}

.mobile-video {
    display: none; /* Hide by default */
    width: 100%;
}

@media (max-width: 768px) {
    .slideshow-container {
        display: none; /* Hide slideshow on mobile */
    }

    .mobile-video {
        display: block; /* Show video on mobile */
    }
}