grid-template-area is not showing the content on the mobile view

I have main container in which I have set the grid-template-areas set to the three different classes and it is showing correctly. Now for ipad view I am setting the grid-template-areas to two classes. By doing that UI gets changed!

Here is the image attached: https://prnt.sc/CmaLrtYPbuFZ and https://prnt.sc/Ep-ik1HfYN85

Here is the code:

<div className={classes.dashboardContainer}>
    <Sidebar /> // It has sidebar class
    <div className={classes.card}>
     ...
    </div>

    <div className={classes.rightsidebar}>
          ...
     </div>
</div>

.dashboardContainer {
  border-left: solid 1px #242526;
  border-right: solid 1px #242526;
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-areas: "sidebar card rightsidebar";
}

.card {
  grid-area: card;
  width: 73%;
  margin-left: 5rem;
}
.sidebar {
  grid-area: sidebar;
  padding: 0 3rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* border-right: solid 1px #242526; */
}
.rightsidebar {
  grid-area: rightsidebar;
  border-left: solid 1px #242526;
  display: flex;
  flex-direction: column;
}

@media (max-width: 820px) {
   .dashboardContainer {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    grid-template-areas: "card" "rightsidebar";
  }   // Not showing properly
}

I am implementing it in nextjs. so I have imported css file as classes. Please help me out to figure it out! Where did I make mistake?

Here is the demo link to view: https://stackblitz.com/edit/nextjs-276hgv?file=pages/index.js