<main>
  <h2> Container Queries (main)</h2>
</main>

<section>
  <h2> Container Queries (section)</h2>
</section>
@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  min-height: 100vh;
  font-family: "Exo", Arial, sans-serif;
  background-color: #557;

  display: grid;
  gap: 20px;
  place-content: center;
}

main,
section {
  max-inline-size: 80vw;
  min-inline-size: 30vw;
  border: 1px dotted #cecece;
  padding: 1rem;
  overflow: hidden;
  min-block-size: 30vh;
  display: grid;
  place-content: center;
  resize: horizontal;
}

main {
  container-type: inline-size;
  container-name: main;
}
section {
  container-type: inline-size;
  container-name: section;
}

h2 {
  font-size: 2rem;
  color: orange;
}

@container main (min-width: 40em) {
  h2 {
    font-size: 3rem;
    color: lime;
  }
}

@container section (min-width: 40em) {
  h2 {
    font-size: 4rem;
    color: #f36;
    text-shadow: 1px 1px 1px rgb(255 255 255 / 0.6);
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.