.left-bar {
  grid-area: lb;
  max-width: 300px;
}

.main-bar {
  grid-area: main;
}

.right-bar {
  grid-area: rb;
  max-width: 300px;
}

.column-layout-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "main" "rb";
}

@media (min-width: 768px) {
  .right-bar {
    max-width: 100%;
  }
  .column-layout-grid {
    display: grid;
    grid-template-columns: minmax(300px, 1fr);
    grid-template-areas:
      "lb main"
      "lb rb";
  }
}

@media (min-width: 1280px) {
  .column-layout-grid {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "lb main rb";
  }
}