.horizontal-scroll-wrapper { 
    position: relative; 
    width: 100%; 
    overflow: hidden; 
    padding: 20px 0; 
}

.scroll-container { 
    display: flex; 
    overflow-x: hidden; 
    scroll-behavior: smooth; 
    flex-wrap: nowrap; 
}

.scroll-item { 
    flex: 0 0 calc(100% / 3 - 20px); 
    margin-right: 20px;  
    min-height: 200px; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    text-align: center; 
    border-radius: 10px;
    background: #f5f5f5; 
    padding: 20px;
    box-sizing: border-box;
}

/* Image or editor items: no bg, no padding */
.scroll-item.image-item,
.scroll-item.editor-item {
    background: none;
    padding: 0;
}

/* Stretch images/editor to match text height */
.scroll-item.image-item img,
.scroll-item.editor-item img,
.scroll-item.editor-item .editor-content {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Text styling */
.scroll-item .text-main {
    font-weight: bold;
    margin-bottom: 10px;
}

.scroll-item .text-subtitle {
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
}

/* Scroll buttons */
.scroll-btn { 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
    z-index: 2; 
    background: rgba(0,0,0,0.5); 
    color: white; 
    border: none; 
    border-radius: 50%; 
    width: 40px; 
    height: 40px; 
    font-size: 24px; 
    cursor: pointer; 
}

.scroll-btn.left { left: 10px; } 
.scroll-btn.right { right: 10px; } 
.scroll-btn:hover { background: rgba(0,0,0,0.7); }

/* ------------------ RESPONSIVE ------------------ */

/* Tablet: 2 items */
@media (max-width: 1024px) {
    .scroll-item { 
        flex: 0 0 calc(50% - 20px); 
    }
}

/* Mobile: 1 item, text on top, image/editor below */
@media (max-width: 767px) {
    .scroll-item { 
        flex: 0 0 100%; 
        min-height: auto; 
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        text-align: left;
    }

    .scroll-item img,
    .scroll-item .editor-content {
        width: 100%;
        height: auto; /* natural height on mobile */
        margin-top: 10px;
    }
}