<style>
    /* Infinite Scrolling Marquee Animation */
    .scroller {
        max-width: 100%;
        overflow: hidden;
        -webkit-mask: linear-gradient(90deg, transparent, white 10%, white 90%, transparent);
        mask: linear-gradient(90deg, transparent, white 10%, white 90%, transparent);
    }
    .scroller__inner {
        padding-block: 1rem;
        display: flex;
        flex-wrap: nowrap;
        gap: 1.5rem;
        animation: scroll 30s linear infinite;
        width: max-content;
    }
    /* Reverse scrolling for the second row */
    .scroller__inner[data-direction="right"] {
        animation-direction: reverse;
    }
    @keyframes scroll {
        to {
            transform: translate(calc(-50% - 0.75rem));
        }
    }
    .carousel-image {
        width: 200px;
        height: 300px;
        object-fit: cover;
        border-radius: 0.75rem;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
        transition: transform 0.3s ease;
    }
    .carousel-image:hover {
        transform: scale(1.05);
    }
</style>