/* Mobile view (typically 768px or less) */
@media (max-width: 768px) {
    .content {
        grid-template-columns: 1fr; /* Single column */
        grid-template-rows: auto auto auto; /* Each section takes its own row */
        height: auto; /* Remove fixed height for mobile */
        min-height: calc(100vh - 5.5rem); /* Minimum height instead of fixed */
        overflow-y: auto !important;
    }
    .workstation{
        height: calc(20vh + 10rem);
         width: 100vw;
     }

    .bet{
        height: calc(10vh + 10rem);
         display: flex;
        flex-direction: column;
        width: 100vw;
        padding-top: 1rem;

    }

    .bet .cover, .bet .cover2{
        width: 95%;
         margin-top: .7rem;
        padding: 0 !important;
        background: rgb(35, 35, 35);
        padding: 1.5rem;
    }
    .comments{
        display: none;
    }
    span aside{
        padding: 0 !important;
    }
    aside .input{
        margin-top: .4rem !important;
    }
    .input{
        margin-left: .5rem;
    }
    .records{
        position: absolute;
        top: 80vh;
        width: 100vw;

    }
    .bet_button, .bet_button2{
        font-size: calc(3vw + 1rem);
    }
    .balance{
        font-size: .7rem;
        top: 4rem;
    }
    .logo{
        position: absolute;
         top: 0;
        width: 6rem;
        left: calc(50% - 3rem);


    }
    .logo img{
        top: -1rem;
        left: 0;
        width: 100%;
    }

}