#main-sidebar-container {
  display: grid;
  grid-template-columns: 100%;
  grid-template-areas: "main" "sidebar";
}

#main-sidebar-container article {
  @apply bg-gray-800;
  grid-area: main;
}

#main-sidebar-container aside {
  grid-area: sidebar;
}

@media (min-width: 1024px) {
  #main-sidebar-container {
    grid-template-columns: 20rem calc(100% - 20rem);
    grid-template-areas: "sidebar main";
    min-height: 100vh;
  }

  #main-sidebar-container aside {
    width: 20rem;
  }
}

#main-sidebar-container {
  article {
      h2 {
        @apply text-2xl;
        @apply font-bold;
        @apply my-4;
      }
      h3 {
        @apply text-xl;
        @apply font-bold;
        @apply my-4;
      }
  }
}