thetool/public/js/pages/DashboardNew/DashboardNew.css

#app {
    user-select: none;
}

.dashboard-container {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

.filter-section,
.campaign-section {
    width: 100%;
}

.dashboard-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.dashboard-data-selector {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.dashboard-chart {
    height: 400px;
    margin-top: 20px;
}


@media (min-width: 768px) {
    .dashboard-cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1000px) {
    .dashboard-cards {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1332px) {
    .dashboard-cards {
        grid-template-columns: repeat(5, 1fr);
    }
}

#app > div.card > div > div > div:nth-child(4) {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 767px) {
    .filter-section,
    .campaign-section {
        grid-column: 1 / -1;
    }

    .dashboard-cards {
        grid-template-columns: repeat(1, 1fr);
    }

    #app > div.card > div > div > div:nth-child(4) {
        grid-template-columns: repeat(1, 1fr);
    }


    .dashboard-data-selector {
        grid-template-columns: repeat(1, 1fr);
    }
}