.all-posts-block{
    background-color: var(--wp--preset--color--x-light-grey);
    margin-block-start: 0 !important;
        .blog-list{
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            overflow: hidden;
            gap: 16px 10px;
        }
        h2{
            font-size: 20px;
            line-height: 1.1;
            margin-bottom: 20px;
        }
        .pagenavi-wrapper{
            margin-top:45px;
            text-align: center;
        }
        .page-numbers{
            display: inline-block;
            vertical-align: middle;
            padding:0 5px;
            text-decoration: none;
            line-height: 26px;;
                &:hover{
                    text-decoration: underline;
                }
                &.current{
                    text-decoration: none !important;
                    background-color: var(--wp--preset--color--light-blue);
                    width:26px;
                    height:26px;
                    padding:0;
                    border-radius: 26px;
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                }
        }
}

.all-posts-block-inner{
    width:100%;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
    gap:0;
}

.all-posts-sidebar{
    width: 300px;
    flex-shrink: 0;
}

.all-posts-sidebar-inner{
    position: sticky;
    top: 100px;
    padding-right:60px;
        .sidebar-categories{
            padding-top:20px;
            border-top:solid 1px #8C9DAB;
            font-family: var(--wp--preset--font-family--outfit);
            font-weight: 400;
                a{
                    text-decoration: none;
                    display: block;
                    width: 100%;
                        &:hover{
                            text-decoration: underline;
                        }
                }
                .active{
                    a{
                        color: var(--wp--preset--color--primary);
                        text-decoration: underline;
                    }
                }
        }
}

.mob-categ-filter{
    display: none;
    position: sticky;
    z-index: 100;
    top: 75px;
    margin-block-start: 0 !important;
    background-color: var(--wp--preset--color--x-light-grey);
        .mob-categ-filter-inner{
            position: relative;
        }
        .mob-categ-toggle{
            background-color: var(--wp--preset--color--white);
            border-radius: 4px;
            box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.1);
        }
        .sidebar-categories{
            max-height: 0;
            overflow: hidden;
            transition: all 0.3s ease-in-out;
            padding: 0;
            position: absolute;
            top: 100%;
            left: var(--wp--style--root--padding-left);
            right: var(--wp--style--root--padding-right);
            background-color: var(--wp--preset--color--white);
            border-radius: 4px;
            box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.1);
            z-index: 100;
                a{
                    text-decoration: none;
                    display: block;
                    padding: 6px;
                    width: 100%;
                        &:hover{
                            text-decoration: underline;
                        }
                }
                .active{
                    a{
                        color: var(--wp--preset--color--primary);
                        text-decoration: underline;
                    }
                }
        }
        &.active{
            .sidebar-categories{
                max-height: 500px;
                overflow: auto;
                padding: 20px;
                transition: all 0.3s ease-in-out;
            }
            h2{
                button{
                    &:after{
                        transform: rotate(0deg);
                        transition: all 0.3s ease-in-out;
                    }
                }
            }
        }
        h2{
            font-size: 16px;
            line-height: 1.1;
            margin-bottom: 0;
            font-family: var(--wp--preset--font-family--outfit);
            font-weight: 400;
            color: var(--wp--preset--color--secondary);
                button{
                    height:46px;
                    display: flex;
                    align-items: center;
                    justify-content: flex-start;
                    background-color: transparent;
                    padding:7px 13px;
                    width:100%;
                    position: relative;
                        &:after{
                            content: '';
                            position: absolute;
                            top: 50%;
                            right: 40px;
                            background-image: url("data:image/svg+xml,%3Csvg width='14' height='8' viewBox='0 0 14 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.46875 6.46875L6.4375 0.75C6.625 0.59375 6.8125 0.5 7 0.5C7.1875 0.5 7.34375 0.5625 7.5 0.6875L13.4688 6.40625C13.7812 6.71875 13.7812 7.1875 13.5 7.46875C13.2188 7.78125 12.75 7.78125 12.4375 7.5L7 2.3125L1.5 7.5625C1.21875 7.84375 0.71875 7.84375 0.4375 7.53125C0.15625 7.21875 0.15625 6.75 0.46875 6.46875Z' fill='%23083D5B'/%3E%3C/svg%3E");
                            width:14px;
                            height:8px;
                            margin-top:-4px;
                            transition: all 0.3s ease-in-out;
                            transform: rotate(180deg);
                        }
                }
        }
}

@media (max-width: 1080px){
    .all-posts-block{
        .blog-list{
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }
}

@media (max-width: 900px){
    .all-posts-block{
        .blog-list{
            grid-template-columns: repeat(1, minmax(0, 1fr));
        }
    }
}

@media (max-width: 768px){
   .all-posts-block{
        padding-top: 16px !important;
        .container-fluid{
            margin-block-start: 0 !important;
        }
        .blog-list{
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }
    .all-posts-block-inner {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
    }
    .all-posts-sidebar{
        display: none;
    }
    .mob-categ-filter{
        display: block;
    }
    .all-posts-content{
        width: 100%;
        padding-top:20px;
    }
}

@media (max-width: 680px){
    .all-posts-block{
        .blog-list{
            grid-template-columns: repeat(1, minmax(0, 1fr));
        }
    }
}

@media (max-width: 460px){
    .mob-categ-filter{
        top: 68px;
    }
}