<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>CSS Tricks</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;800&display=swap" rel="stylesheet">
</head>

<body>

<section>
<main>
<h1>About Patty</h1>

<p>Patty Meltt, born Patricia Lynn Melton, grew up in a modest household on the outskirts of Nashville, Tennessee. From a young age, she was drawn to country music and her parents, both music lovers, filled their home with the sounds of country legends like Patsy Cline, Loretta Lynn, and Dolly Parton.</p>

<p>Patty&#8217;s parents scraped together enough money to buy her a secondhand guitar. From that moment on, Patty poured her heart and soul into mastering the instrument, spending countless hours practicing and crafting her own songs.</p>

<p>Patty began performing at local talent shows, gaining recognition for her raw talent and soulful voice. Encouraged by the positive feedback, she started performing at small venues around Nashville, honing her skills and building a loyal fanbase.</p>

<p>Her perseverance paid off when she caught the attention of a local talent scout who helped her land her first record deal. She released a string of hit singles and albums, earning accolades for her distinctive voice and heartfelt songwriting. With each performance, she captivated audiences with her authenticity and passion, solidifying her as one of country music&#8217;s stars.</p>

<p>Her perseverance paid off when she caught the attention of a local talent scout who helped her land her first record deal. She released a string of hit singles and albums, earning accolades for her distinctive voice and heartfelt songwriting.</p>
</main>
</section>


</body>

</html>
:root {
--spacing-r: 1.5rem;
--spacing-l: 3rem;
--color-accent: #98838F; }

html {
background-color: #150F0A;
-webkit-text-size-adjust: 100%;
overflow-x: hidden;
scroll-behavior: smooth; }

body {
margin: 0 auto;
padding: var(--spacing-l);
max-inline-size: 105rem;
background-color: #150F0A;
color: #fff;
font-family: "Poppins", serif;
font-weight: 400;
font-style: normal;
font-size: 1em; }

h1 {
margin-block: 0 var(--spacing-r);
border-bottom: 5px solid #98838F;
font-family: "Poppins", serif;
font-weight: 800;
font-style: normal;
line-height: 1;
text-transform: uppercase;
color: var(--color-accent); }

p {
margin: 0;
orphans: 3; }

p + p {
text-indent: 2ch; }

/* DEMO STARTS */

main {
container-type: inline-size;
column-width: 18rem; }

h1 {
column-span: all;
font-size: clamp(5.6526rem, 5.4068rem + 1.2288cqi, 6.3592rem);
color: var(--color-accent); }

p {
font-size: clamp(1rem, 0.9565rem + 0.2174cqi, 1.125rem); }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.