/* Common styles for the scroll container */
.scroll-container {
    /*width: 100vw; !* Full viewport width *!*/
    height: 100vh; /* Full viewport height */
    overflow: hidden; /* Hide scrollbars initially */
    position: relative;
    display: flex;
    flex-wrap: nowrap;
}

.div_content {
    width: 100vw; /* Full viewport width */
    height: 33vh; /* One-third of viewport height */
    display: flex;
    /*align-items: start;*/
    justify-content: start;
    padding-right: 0.1rem  /* 10/100 */;
    /*background-color: #282727; !* Light grey background *!*/
    /*border: 1px solid #ddd; !* Border for separation *!*/
    flex: 0 0 auto; /* Prevent flex items from shrinking or growing */
}

/* Mobile-specific styles for horizontal scrolling */
@media (max-width: 768px) {
    .scroll-container {
        flex-direction: row; /* Horizontal scroll */
        overflow-x: auto; /* Enable horizontal scrolling */
        overflow-y: hidden; /* Disable vertical scrolling */
        height: 33vh; /* Reduce height to content height */
    }

    .div_content {
        height: 100%; /* Full height of container */
        width: 100vw; /* Full viewport width */
        flex: 0 0 auto; /* Prevent flex items from shrinking or growing */
    }
}

/* Desktop-specific styles for vertical scrolling */
@media (min-width: 769px) {
    .scroll-container {
        flex-direction: column; /* Vertical scroll */
        overflow-y: auto; /* Enable vertical scrolling */
        overflow-x: hidden; /* Disable horizontal scrolling */
    }

    .div_content {
        width: 100vw; /* Full viewport width */
        height: 33vh; /* One-third of viewport height */
        flex: 0 0 auto; /* Prevent flex items from shrinking or growing */
    }
}