.w_bento_design{
    --markers-container-height: 31px;

    padding: 10px 15px;
    border-radius: 5px;
    transition: 200ms all;
    position: relative;
    /*background: var(--article-clr);*/

    a{
        display: block;
        text-decoration: none;
        color: inherit;
    }

    .container_bento_design_markers{
        .design_marker{
            --font-weight: 600;
            padding: 2px 6px;
            border: 1px solid hsl(0 0 85%);
            border-radius: 3px;
            width: fit-content;
            white-space: nowrap;
            --clr: hsl(0 0 65%);

            margin-bottom: 5px;
        }
    }

    .bento_design_name{
        --font-weight: var(--b-font-weight);

        line-height: 1.1;
        overflow-wrap: anywhere;
    }

    .bento_design_inf__pct_cont{
        position: relative;
        grid-template-columns: calc(100% - 220px) 200px;
        overflow-x: auto;
        @media (max-width: 500px) {
            grid-template-columns: calc(100% - 140px) 120px;
        }
        @media (max-width: 400px) {
            grid-template-columns: 100% 120px;
        }
        gap: 20px;

        .iso_pct{
            width: 100%;

            aspect-ratio: 1 / 1;
            object-fit: cover;
        }

        .bento_design_inf_cont{

            .bento_design_inf{
                margin-top: 2px;
                .info_str{
                    --img-display: none;
                    grid-template-columns: 147px calc(100% - 157px);
                    font-size: 14px;
                    img{
                        width: 15px;
                        display: var(--img-display);
                    }
                    .name{
                        font-weight: var(--n-font-weight);
                        color: hsl(0 0 40%);
                    }
                    .value{
                        font-weight: var(--sb-font-weight);
                        color: hsl(0 0 0%);
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        &.find_baker{
                            color: hsl(from #ff0000 h s 30%);
                        }
                        &.baker_found{
                            color: hsl(from #0063ff h s 30%);
                        }
                        &.baking{
                            color: hsl(from #00ff00 h s 30%);
                        }
                    }
                    @media(max-width: 600px){
                        --img-display: block;
                        .name{display: none}
                        grid-template-columns: 15px calc(100% - 25px);
                    }
                }
                @media(max-width: 600px){
                    padding-left: 10px;
                    border-left: 1px solid #7b7b7b;
                    margin-top: 5px;
                }
            }

            .descritpion{
                display: -webkit-box;
                text-overflow: ellipsis;
                -webkit-line-clamp: 4;
                -webkit-box-orient: vertical;
                overflow: hidden;

                color: hsl(0 0 20%);
                font-size: 14px;
                margin: 10px 0 0;
            }
        }
    }

    .move_btn{
        --bg-gradient: none;

        display: none;
        align-items: center;

        background: var(--bg-gradient);

        position: absolute;
        z-index: 100;

        height: calc(100% - var(--markers-container-height));
        width: 44px;

        @media (max-width: 400px) {
            display: flex;
        }

        img{
            width: 20px;
            height: 20px;
            border-radius: 100%;
            border: 1px solid hsl(0 0 65%);
            backdrop-filter: blur(6px);

            padding: 4px;

            transition: 0.3s ease all;
            &:active{
               scale: 1.11;
            }
        }

        &.go_to_design{
            --bg-gradient: linear-gradient(to left, hsla(0 0 100 / 1), hsla(0 0 100 / 0.3));
            inset: var(--markers-container-height) 15px auto auto;
            justify-content: right;

            img{
                rotate: 270deg;
            }
        }
        &.go_to_inf{
            --bg-gradient: linear-gradient(to right, hsla(0 0 100 / 1), hsla(0 0 100 / 0.3));
            inset: var(--markers-container-height) auto auto 15px;
            justify-content: left;

            img{
                rotate: 90deg;
            }
        }

        &.hidden{
            display: none;
        }
    }

    @media(any-hover: hover){
        &:hover{
            box-shadow: 0 1px 8px 0 rgb(132 145 149);
        }
    }
}