/* Medium */
@media (max-width: 1280px){
    
    .side-menu{width: 70px;}

    .general-div{
        margin-right: 70px;
        width: calc(100% - 70px);
    }

    .general-container{width: 93%;}
    
    .side-menu .menu-name{display: none;}
    
    .menu-shortcuts h3{display: none;}

    .menu-pages p, .button-screen p{display: none;}

    .side-menu .menu-header{
        justify-content: center;
        margin-bottom: 24px;
    }
    
    .side-menu .menu-header .logo{
        margin-left: 0;
        min-height: 60px;
    }

    .left-navbar{width: 45%;}

    .right-navbar{width: 10%;}

    .navbar .logo{
        width: 70px;
    }

    .navbar .status{
        padding: 10px 12px;
        margin-right: 10px;
    }

    .main-page, .transactions-page, .balance-page, .savings-page, .bills-page{
        justify-content: center;
        padding: 12px 0;
    }

    .send-short, .deposit-short, .bill-short, .invest-short{
        padding: 0;
        display: flex;
        justify-content: center;
    }

    .button-screen{
        justify-content: center;
        padding: 10px 0; 
    }

    .right-navbar{
        width: auto;
        justify-content: flex-end;
        gap: 16px;
    }

    .top-content-container .amount{
        font-size: 24px;
        font-weight: 700;
        line-height: 32px;
    }

    .general-grid{
        grid-template-areas: 
            "recent-activity incomeXspending"
            "latest-transactions latest-transactions"
            "monthly-bills account-summary"
            "balance-overview payment-methods";
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Small */
@media (max-width: 768px){

    .side-menu{width: 0;}

    .general-div{
        margin-right: 0;
        width: 100%;
    }

    .general-container{width: 95%;}
    
    .side-menu .menu-name{display: none;}
    
    .side-menu .menu-shortcuts h3{display: none;}

    .side-menu .menu-pages p, .button-screen p{display: none;}

    .top-content-container .amount{
        font-size: 30px;
        font-weight: 700;
        line-height: 36px;
    }

    .top-content-container{
        grid-template-columns: 1fr;
        height: 430px;
    }

    .general-grid{
        grid-template-areas: 
            "recent-activity"
            "latest-transactions"
            "monthly-bills"
            "balance-overview"
            "incomeXspending"
            "account-summary"
            "payment-methods";
        grid-template-columns: 1fr;
    }
}