<main>
  <div class="wrapper">
    <article class="flow">
      <h1>Layout with grid-template-areas</h1>
      <figure class="callout">
        <p>Change the direction and writing mode to see the layout change.</p>
      </figure>
      <div class="controls">
        <label for="switcher">
          Set writing mode
          <select id="switcher">
            <option value="horizontal-tb">horizontal-tb</option>
            <option value="vertical-rl">vertical-rl</option>
            <option value="vertical-lr">vertical-lr</option>
          </select>
        </label>
        <label class="toggle" for="direction">
          <span class="toggle__label">Set direction to right-to-left</span>
          <input type="checkbox" role="switch" class="toggle__element" id="direction">
          <div class="toggle__decor" aria-hidden="true">
            <div class="toggle__thumb"></div>
          </div>
        </label>
      </div>
      <div class="container" id="container">
        <div class="box item1">grid-area: header</div>
        <div class="box item2">grid-area: sidebar</div>
        <div class="box item3">grid-area: content</div>
        <div class="box item4">grid-area: footer;</div>
      </div>
    </article>
  </div>
</main>

:root {
  --var-direction: 'ltr';
  --var-writing-mode: 'horizontal-tb';
}


.container {
  display: grid;
  direction: var(--var-direction);
  writing-mode: var(--var-writing-mode);
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: minmax(100px, auto);
  grid-template-areas: 
    "header  header"
    "content content"
    "sidebar footer";
  gap: 10px;
  background-color: var(--color-stroke);
  padding: .5em;
  border-radius: 3px;
  max-inline-size: 500px;
}

@media (min-width: 500px) {
  .container {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: 
      "header  header  header"
      "sidebar content content"
      "....... footer  footer";
  }
}

.item1 {
  grid-area: header;
}

.item2 {
  grid-area: sidebar;
}

.item3 {
  grid-area: content;
}

.item4 {
  grid-area: footer;
}


.controls > * + * {
  margin-top: 1rem;
}

let root = document.documentElement;
let switcher = document.getElementById("switcher");
let direction = document.getElementById("direction");

switcher.addEventListener("change", function (evt) {
  root.style.setProperty('--var-writing-mode', evt.target.value);
});

direction.addEventListener("click", function (evt) {
  if(direction.checked) {
    root.style.setProperty('--var-direction', 'rtl');
  } else {
    root.style.setProperty('--var-direction', 'ltr');
  }
});