<div class="grid" dir="ttb">
  <main>
    <h1>This is the title of my main content</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis sodales erat vel accumsan. Nam eget massa nec sem vulputate ullamcorper vel quis justo. Duis rhoncus tempor tempus. Nulla facilisi. Maecenas nulla ante, lacinia ac consectetur non, aliquet sollicitudin libero. Quisque congue odio sodales dui fermentum ac laoreet mauris eleifend. Nulla facilisi. Phasellus vel erat a ante pharetra pharetra.</p>
    <div class="banner">
      <h2>This is an awesome banner</h2>
      <p>Depending on the container, this will adjust its font-size and paddings to fit perfectly</p>
    </div>
  </main>
  <aside>
    <ul>
      <li>Lorem ipsum dolor sit amet</li>
      <li>lacinia ac consectetur non</li>
      <li>Phasellus vel erat a ante</li>
      <li> Nulla facilisi</li>
      <li>ac consectetur non</li>
    </ul>
    <div class="banner">
      <h2>This is an awesome banner</h2>
      <p>Depending on the container, this will adjust its font-size and paddings to fit perfectly</p>
    </div>
  </aside>
</div>

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wdth@75..100&family=Oswald:wght@600&display=swap");
@layer presentation, defaultgrid, demo;

@layer demo {
  /*   Set container type */
  .grid > * {
    container-type: inline-size;
  }

  /* Style banner with cq units */
  .banner {
    padding: 3cqi;
    background: #55673e;
    font-size: 3cqi;
    border-radius: 0.5rem;
  }

  .banner h2 {
    font-size: 4cqi;
    margin: 0 0 1cqi;
  }

  /* Set container name for aside */
  aside {
    container-name: aside;
  }

  /* change the bgcolor when in the sidebar */
  @container aside (min-inline-size: 100px) {
    .banner {
      background-color: #2f1127;
    }
  }
}

@layer defaultgrid {
  .grid {
    display: grid;
    inline-size: 100%;
    max-inline-size: 1400px;
    gap: 3vmin;
    background: #69385c;
    border-radius: 2rem;
    overflow: hidden;
    > * {
      padding: 1.5rem;
    }
    @media screen and (min-width: 768px) {
      grid-template-columns: 2fr 1fr;
    }
  }
  aside {
    background: #715b64;
  }

  .banner p {
    margin: 0;
  }
}

@layer presentation {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  body {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 1rem;
    font-family: "Open Sans", sans-serif;
    font-size: 1.1rem;
    line-height: 1.55;
    color: white;
    min-block-size: 100dvb;
    place-content: center;
    place-items: center;
    background: #d3bdb0;
    /*     writing-mode: tb-rl; */
  }

  h1 {
    font-size: 3rem;
  }

  h1,
  h2 {
    font-family: "Oswald", sans-serif;
    font-weight: 600;
  }
}