@media (max-width: 820px) {

    #app {

        flex-direction: column;
    }

    .sidebar {

        width: 100%;

        padding: 10px;

        gap: 6px;
    }

    .sidebar h2 {

        font-size: 18px;
        margin-bottom: 10px;
    }

    .sidebar button {

        width: 100%;
        text-align: center;
    }

    .content {

        padding: 12px;
    }

    .card {

        padding: 12px;
    }

    input,
    select,
    textarea {

        font-size: 16px;
    }

    .primary {

        width: 100%;
    }

    .customer-list {

        grid-template-columns: 1fr;
    }

    h1 {

        font-size: 22px;
    }

    h2 {

        font-size: 18px;
    }
}