.grid {
    display: grid;
    /*background-color: rgb(253, 196, 255);*/
    /*   grid-template-columns: 1fr 200px 1fr;
  grid-template-rows: 2fr 100px;

  justify-items: stretch;
  align-items: stretch; */
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-areas:
        /*"nav nav dash dash dash dash dash task task task"*/
        "nav nav flow flow flow flow flow flow task task task task";
    grid-column-gap: 20px;
    grid-row-gap: 20px;
}

.grid-list {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-areas: "nav nav flow flow flow flow flow flow flow flow flow flow";
    grid-column-gap: 20px;
    grid-row-gap: 20px;
}

.grid-list-detail {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-areas: "flow flow flow flow flow flow flow task task task task task";
    grid-column-gap: 20px;
    grid-row-gap: 20px;
}

.grid-item {
    /*   background-color: brown; */
}

.grid-nav {
    grid-area: nav;
/*    background-color: yellow;*/
}

.grid-dash {
    grid-area: dash;
    /*background-color: rgb(22, 17, 17);*/
}

.grid-flow {
    grid-area: flow;
    /*background-color: red;*/
}

.grid-task {
    grid-area: task;
    /*background-color: green;*/
}
.grid-list-list {
    grid-area: flow;
}

.desktop-dashboard {
    display: none;
}
.mobile-dashboard {
    display: block;
} 

/* 2xl */
/* @media (max-width: 1536px) {} */
/* xl */
@media (max-width: 1280px) {
}
/* lg */
@media (max-width: 1024px) {
    .grid {
        grid-template-areas:
            /*"nav dash dash dash dash dash task task task"*/
            "nav flow flow flow flow flow flow flow task task task task";
    }

    .grid-list {
        grid-template-areas: "nav flow flow flow flow flow flow flow flow flow flow flow";
    }
}

/* md */
@media (max-width: 768px) {
    .grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "task"
            "dash"
            "flow";
        grid-row-gap: 0px;
    }

    .grid-list {
        grid-template-columns: 1fr;
        grid-template-areas: "flow";
        grid-row-gap: 0px;
    }

    .grid-nav {
        display: none;
    }

    .all-workflow {
        /*display: none;*/
    }

    .desktop-dashboard {
        display: block;
    }
    .mobile-dashboard {
        display: none;
    } 
}
/* sm */
@media (max-width: 640px) {
}
/* xs */
@media (max-width: 475px) {
}