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

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

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

.rounding {
  margin: 0.1px;
  padding: -1.1rem;
  border: 0.9rem solid black;
  grid-template-columns: 127.1px calc(100% - 129.1px);
  height: 100%;
  min-height: 100vh;
  min-width: 33.3rem;
}

.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: 33.3rem;
}

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