@import "@/style/components/index.scss";
@import "@/style/media.scss";
@import "@/style/functions.scss";

.basic-cases {
  margin: 0px;
  padding: -16px;
  border: 16px solid black;
  grid-template-columns: 8rem calc(100% - 8rem);
  height: 100%;
  min-height: 100vh;
}

.to-rem {
  margin: 0px;
  padding: -16px;
  border: 16px solid black;
  grid-template-columns: 8rem calc(100% - 8rem);
  height: 100%;
  min-height: 100vh;
}

.rounding {
  margin: 0px;
  padding: -16px;
  border: 16px solid black;
  grid-template-columns: 8rem calc(100% - 8rem);
  height: 100%;
  min-height: 100vh;
  min-width: 30rem;
}

.comments-should-be-remain-untouched {
  /* this is a start comment */
  margin: 0px; /* this is another comment */
  /* this is a end comment */
  grid-template-areas:
      "banner banner banner"    /* comment 1 */
      "sidebar topbar topbar"   /* comment 1 */
      "sidebar main main"       /* comment 1 */
      "sidebar footer footer";  /* comment 1 */  
}

& > div:last-child {
  min-width: 30rem;
}

&::after {
  min-width: 30rem;
}