<section>
  <h2 class="section-title">Regular font size:</h2>
  <div class="grid">
    <div></div>
    <div></div>
    <div></div>
  </div>
</section>

<section class='small-font-size'>
  <h2 class="section-title">Small font size:</h2>
  <div class="grid">
    <div></div>
    <div></div>
    <div></div>
  </div>
</section>

<section class='large-font-size'>
  <h2 class="section-title">Large font size:</h2>
  <div class="grid">
    <div></div>
    <div></div>
    <div></div>
  </div>
</section>

section {
  container-type: inline-size;
}

.small-font-size {
  font-size: 0.5rem;
}

.large-font-size {
  font-size: 1.5rem;
}

.grid {
  display: grid;
  gap: 1rem;

  @container (width > calc(30ch * 3)) {
    grid-template-columns: repeat(3, 1fr);
  }
}

@layer not-demo-related {
  body {
    display: grid;
    gap: 2rem;
    font-family: system-ui;
  }

  .section-title {
    font-size: 1.5rem;
  }

  .grid {
    padding: 1rem;
    border: 3px solid dodgerblue;
  }

  .grid > * {
    padding: 1rem;
    background: orangered;
  }
}