@media(max-width:900px){

    body{
        overflow-x:hidden;
    }

    .sidebar{
        position:fixed;
        top:0;
        left:0;

        width:260px;
        height:100vh;

        z-index:9999;

        transform:translateX(-100%);
        transition:transform .3s ease;
    }

    .sidebar.active{
        transform:translateX(0);
    }

    .main{
        margin-left:0 !important;
        width:100%;
        padding:15px;
    }

    .grid{
        grid-template-columns:1fr;
    }

    .toggle-sidebar{
        display:block;
    }
}

@media(max-width:1200px){

    .card-flex{
        gap:20px;
    }

    .card-image{
        flex:0 0 220px;
    }

}

@media(max-width:600px){

    .card-flex{
        flex-direction:column;
    }

    .card-image{
        flex:none !important;
        min-height:0 !important;
    }

    .card-image img{
        max-width:180px;
        width:100%;
        height:auto;
    }

    .header{
        flex-direction:column;
        align-items:flex-start;
        gap:15px;
    }

    .header a{
        align-self:flex-end;
    }

    .panel-box h1{
        font-size:26px;
        line-height:1.2;
    }
    

    .btn-main{
        width:auto;
        max-width:220px;
        font-size:15px;
        padding:8px 12px;
    }


    .titulo{
        font-size:28px;
        line-height:1.1;
    }

    .main{
        margin-left:0 !important;
        width:100%;
        max-width:100%;
        padding:15px;
        box-sizing:border-box;
    }
}