@media (max-width:1200px){
    .app-layout{
        display:grid;
        grid-template-columns:100px 1fr;
        min-height:100vh;
    }

    #btnPublish{
        margin:0;
        font-size:var(--fs-sm);
    }
}

@media (max-width:992px){
    .app-layout{
        display:grid;
        grid-template-columns:1fr;
        min-height:100vh;
    }

    #preview-image{
        max-height:220px;
    }

    #preview-image{
        border-radius:none;
        object-fit:cover;
        box-shadow:none;
    }

    body{
        padding: 0.5em 0.5em 80px 0.5em;
    }

    .sidebar{
        height:80px;
        width:100%;
        padding:0px;
        position: fixed;
        top:unset;
        bottom:0;
        z-index: 1000;
    }

    .sidebar-nav{
        list-style:none;
        display:flex;
        flex-direction:row;
        gap:var(--space-default);
        align-items:center;
        justify-content:center;
    }

    .sidebar-nav ul{
        list-style:none;
        display:flex;
        flex-direction:row;
        gap:0;
        align-items:center;
        justify-content:center;
    }

    .sidebar-item,#btnPublish{
        width:100px;
    }

    .workspace{
        gap:var(--space-default);
    }

    .json-section{
        margin:var(--space-micro);
        padding:var(--space-micro);
    }
}


@media (max-width:768px){
    .header-container{
    display:flex;
    flex-direction:column;
    align-items:self-start;
    padding:var(--space-nano) var(--space-page) var(--space-nano) var(--space-page);
    }

    .workspace{
        display:flex;
        flex-direction: column;
        gap:var(--space-default);
        padding:0px var(--space-micro) var(--space-micro) var(--space-micro);
    }

    .clearForm{
        padding:var(--space-micro) var(--space-micro) 0px var(--space-micro);
    }

    .hidden{
        display:none;
    }

    .sidebar-item{
        width:70px;
    }

    #btnPublish{
    width:80px;
    }
}

@media (max-width:576px){
    .sidebar-item{
        width:60px;
    }

    .sidebar-nav{
        overflow-x:auto;
        justify-content:left;
    }
}