.colors {
    width: 100%; /* Inherit the width of the instance-container */
    max-width: 100%; /* Ensure it doesn't get bigger than its parent */
    box-sizing: border-box; /* Content box shouldn't exceed the specified width */
    white-space: nowrap; /* Keeps child items in a line */
}
.custom-child-posts-grid {
    display: flex;
    overflow-x: auto; /* Enable horizontal scrolling */
    scroll-behavior: smooth; /* Optional: enables smooth scrolling */
}

.custom-child-posts-grid::-webkit-scrollbar {
    display: none; /* Hide scrollbar for webkit browsers */
}

.custom-child-posts-grid .child-post-item img {
    width: 35px;
    height: 35px;
    object-fit: cover;
}


.colors .child-post-item {
    display: inline-flex; /* Align items and text inside the child post item */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    box-sizing: border-box;
    margin-right: 5px; /* Right margin for spacing between items, adjust as needed */
    /* No changes to the width and height, they can stay as you define */
    flex: 0 0 auto;
}


.custom-child-posts-navigation {
    position: relative;
}

.scroll-left, .scroll-left:hover, .scroll-right, .scroll-right:hover {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #5B6E82;
    border: none;
    padding: 10px;
    cursor: pointer;
    color: #fff;
    border-radius: 0px;
    height: 35px;
    line-height: 15px;
}



.scroll-left {
    left: 0;
}

.scroll-right {
    right: 0;
}