.slideshow-list{
    display: none;
}

.fade-slider{
    display: none;
}

/* Mobile Responsive max-width 900px */
@media screen and (max-width:900px) {
    .fade-slider {
        max-width: 500px;
        margin: 20px;   /* ✅ centers horizontally */
        display: block;
    }

    .fade-wrapper {
        display: grid;
    }

    .fade-slide {
        grid-area: 1 / 1; /* stack all slides */
        opacity: 0;
        transition: opacity 0.6s ease-in-out;
        pointer-events: none;
        padding: 20px;
        border-radius: 20px;
        background: rgba(0,0,0,0.5);
        box-shadow: 0 0 10px #ff14b8cb;
        text-align: center;
    }

    .fade-slide.active {
        opacity: 1;
        pointer-events: auto;
    }

    .fade-slide img {
        width: 100%;
        border-radius: 20px;
    }

    .fade-slide h3 {
        color: white;
        margin-top: 15px;
    }

    .fade-slide p {
        color: white;
        margin-top: 15px;

        display: -webkit-box;
        -webkit-line-clamp: 3;   /* limit to 3 lines */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .fade-slide .genre {
        display: block;
        color: #ff14b8;
        margin: 8px 0;
    }

    .fade-slide button {
        background: white;
        color: black;
        border: none;
        padding: 10px 20px;
        border-radius: 30px;
        cursor: pointer;
    }

    .fade-slide button:hover {
        background: linear-gradient(135deg, #ff14b8, #4b4bd6);
        color: white;
    }

    .fade-slide p {
        color: white;
        margin-top: 15px;
    }

        /* Tablet Version */
    @media screen and (min-width: 768px) and (max-width: 1024px) {

        .fade-slider {
            max-width: 700px;   /* slightly bigger than mobile */
            width: 100%;
            margin: 40px auto;  /* perfectly centered */
        }

        .fade-slide {
            padding: 30px;      /* more spacing for tablet */
            border-radius: 25px;
        }

        .fade-slide h3 {
            font-size: 24px;
        }

        .fade-slide p {
            font-size: 16px;
        }

    }


}