<div class="container">
  <div class="item">
    A cool container item
  </div>
</div>
<div class="container container-2">
  <div class="item">
    A cool container item
  </div>
</div>
<div class="container container-3">
  <div class="item">
    A cool container item
  </div>
</div>

@layer base, presentaional, demo;

@layer demo {
  .container {
    container-type: inline-size;
  }
  .item {
    margin: 6cqw;
    padding: 1cqw;
    font-size: 5cqw;
  }
}

@layer presentational {
  .container {
    width: 100%;
    max-width: 400px;
    text-align: center;
    border: 2px dotted #695958;
  }
  .item {
    background: #271f30;
    color: white;
  }
  .container-2 {
    max-width: 600px;
  }
  .container-3 {
    max-width: 800px;
  }
}

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

  body {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    gap: 2vmax;
    justify-content: center;
    align-items: center;
    margin: 0;
    font-family: Arial, sans-serif;
    font-size: 1.2rem;
    line-height: 1.5;
    background-image: linear-gradient(45deg, #7c9885, #b5b682);
  }
}