.carousel
{
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; /* Smooth momentum scroll on iOS */
    width: 100%;
}

.carousel::-webkit-scrollbar
{
    display: none;
}

.slides
{
    display: flex;
    flex-wrap: nowrap;    /* Force one row */
}

.slide
{
    flex: 0 0 100%;      /* One slide = One viewport width */
    scroll-snap-align: center;
    display: flex;       /* Center Image Inside */
    justify-content: center;
    align-items: center;
    padding: 0 0.5rem;   /* Small Side Padding */
}

.slide img
{
    max-width: 800px;     /* Don’t exceed target size */
    max-height: 600px;
    width: 100%;          /* Fill container on narrow screens */
    height: auto;
    object-fit: cover;
}

@media (min-width: 1024px)
{
    .carousel
    {
        margin: 10px 0;  /* 10px above & below */
        /* 100vh minus (header 75 + footer 75 + top margin 10 + bottom margin 10) */
        height: calc(100vh - 250px);
    }

    .slide
    {
        /* Make sure slide still fills full viewport width */
        flex: 0 0 100%;
    }

    .slide img
    {
        /* Swap to height-based sizing */
        height: 100%;
        width: auto;
        max-width: none;
    }
}