prof3ssorSt3v3/clamp.html

## clamp.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Clamp</title>
    <style>
      html {
        font-size: 20px;
        font-weight: 500;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
      }
      header > h1 {
        font-size: 6rem;
        font-size: clamp(5vh, 8rem, 8vw); /* min, val, max */
        text-align: center;
      }
      main {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: flex-start;
        gap: 1rem;
      }
      section {
        flex-basis: 40vw;
        flex-basis: clamp(20vw, 30vw, 433px);
        flex-shrink: 0;
        flex-grow: 0;
      }
      p {
        font-weight: 200;
      }
    </style>
  </head>
  <body>
    <header>
      <h1>Using the CSS Clamp Method</h1>
    </header>
    <main>
      <section>
        <h2>Sub heading</h2>
        <p>
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repudiandae
          neque ad, necessitatibus saepe, error molestias reprehenderit ullam
          numquam doloribus a nesciunt velit nisi, dolore officiis magnam eum
          blanditiis et? Nesciunt?
        </p>
      </section>
      <section>
        <h2>Sub heading</h2>
        <p>
          Accusantium quis saepe nemo odit debitis a enim eaque totam autem,
          iure quaerat ea nihil similique voluptatem itaque excepturi
          consequuntur voluptatibus vero quae quisquam tempore cumque nulla quo.
          Voluptate, quia.
        </p>
      </section>
    </main>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>CSS Clamp</title>
	<style>
	html {
	font-size: 20px;
	font-weight: 500;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
	Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
	}
	header > h1 {
	font-size: 6rem;
	font-size: clamp(5vh, 8rem, 8vw); /* min, val, max */
	text-align: center;
	}
	main {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	align-items: flex-start;
	gap: 1rem;
	}
	section {
	flex-basis: 40vw;
	flex-basis: clamp(20vw, 30vw, 433px);
	flex-shrink: 0;
	flex-grow: 0;
	}
	p {
	font-weight: 200;
	}
	</style>
	</head>
	<body>
	<header>
	<h1>Using the CSS Clamp Method</h1>
	</header>
	<main>
	<section>
	<h2>Sub heading</h2>
	<p>
	Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repudiandae
	neque ad, necessitatibus saepe, error molestias reprehenderit ullam
	numquam doloribus a nesciunt velit nisi, dolore officiis magnam eum
	blanditiis et? Nesciunt?
	</p>
	</section>
	<section>
	<h2>Sub heading</h2>
	<p>
	Accusantium quis saepe nemo odit debitis a enim eaque totam autem,
	iure quaerat ea nihil similique voluptatem itaque excepturi
	consequuntur voluptatibus vero quae quisquam tempore cumque nulla quo.
	Voluptate, quia.
	</p>
	</section>
	</main>
	</body>
	</html>