maykbrito/index.css

## index.css
:root {
    --ff-body: "Heebo", sans-serif;
    --ff-heading: "Oswald", sans-serif;

    --fs-600: '';
    --fs-400: '';

    --c-base: 320;
    --c-primary-100: hsl(var(--c-base), 30%, 85%);
    --c-primary-200: hsl(var(--c-base), 40%, 60%);
    --c-primary-400: hsl(var(--c-base), 50%, 50%);
    --c-primary-600: hsl(var(--c-base), 70%, 40%);
}

body {
    font-family: var(--ff-body);
    line-height: 1.6;
}

body,
h1,
h2,
h3,
p {
    margin: 0;
}

h1,h2,h3 {
    font-family: var(--ff-heading);
    line-height: 1;
}

h1, a {
    color: var(--c-primary-600);
}

h2, h3 {
    color: var(--c-primary-400);
    margin-bottom: 1rem;
}


header {
    background: var(--c-primary-100);
    text-align: center;
    padding: 3rem;

    margin-bottom: 2rem;
}

header .header-wrapper {
    display: grid;
    place-items: center;
}

header small {
    font-weight: bold;
    opacity: 0.6;
}

header h1 {
    font-size: clamp(2rem, 1rem + 6vw, 4rem);
    max-width: 600px;
}

main {
    padding: 0 3rem;
    max-width: 600px;
    margin: 0 auto;
}

section {
    margin-top: 2rem;
}

article > p::first-letter {
    font-size: 5rem;
    float: left;

    line-height: 1;
    margin-right: 1rem;
}

article > p::first-line {
    font-weight: bold;
}

@media (max-width: 40em) {
    .section-body > * + * {
        margin-top: 2rem;
    }
}

@media (min-width: 40em) {
    .section-body {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
}

## index.html
<link href="https://fonts.googleapis.com/css2?family=Heebo:wght@100..900&family=Oswald:wght@300..700&display=swap" rel="stylesheet">

<body>

    <header>
        <div class="header-wrapper">
            <small>Lorem ipsum dolor sit</small>
            <h1>Amet consectetur adipisicing elit. Ipsa, atque?</h1>
        </div>
    </header>

    <main>
        <article>
            <h2> Molestiae modi ab</h2>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. recusandae aliquid perspiciatis
unde dolorum id natus velit vel, facere excepturi similique nemo enim quasi nam, expedita inventore? Repellat
aspernatur ducimus facilis nemo omnis sunt unde, vel doloribus error enim id deleniti saepe placeat.
            </p>

            <section>
                <h3>Rerum illo, fugit architecto </h3>

                <div class="section-body">

                    <p>Voluptatem <a href="#">ipsum tempora vel quisquam</a> cumque natus nesciunt vitae ipsam in inventore,
                    earum eligendi impedit. <a href="https://google.com">Sunt quis veniam</a> numquam vitae, magnam, debitis reiciendis
                    in voluptas porro voluptatum, est consequuntur
                    </p>

                    <p>Quasi necessitatibus mollitia quisquam officiis molestiae fugiat officia cumque tempora accusamus adipisci
                    illo! Assumenda saepe aliquid eos fugiat rerum similique sequi illo velit amet officia voluptas, sed ducimus.
                    quia, suscipit earum rerum illo, fugit architecto fuga eius error labore!
                    </p>

                    <p>Ducimus voluptate quae aliquid obcaecati beatae exercitationem quaerat molestiae quos, atque dolorum id quo
                    sint vero sit reiciendis cumque. Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis, blanditiis.
                    consectetur molestias temporibus.</p>

                    <p>
                    Molestiae magnam similique dolorum vero libero doloribus neque, voluptas natus sunt facere ipsa cupiditate
                    placeat necessitatibus cum perferendis<a href="#">ipsum tempora vel quisquam</a> illum ab aliquid minus
                    dignissimos dolore voluptatibus? Perferendis, incidunt! Repellendus numquam nobis quidem totam dolor aliquid.
                    </p>

                </div>
            </section>
        </article>
    </main>

</body>

## index.md

      
    Raw
  

              index.md
            
          
    :root {
--ff-body: "Heebo", sans-serif;
--ff-heading: "Oswald", sans-serif;
--clr-primary-400: hsl(60 100% 50%);
--clr-neutral-900: hsl(0 0% 0%);
--clr-neutral-100: hsl(0 0% 100%);
--fs-xl: clamp(3.5rem, 12vw + 1rem, 12rem);
--fs-600: 2rem;
--fs-400: 1rem;
}
@media (min-width: 40em) {
:root {
--fs-600: 3rem;
--fs-400: 1.125rem;
}
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body,
h1,
h2,
h3,
p,
blockquote {
margin: 0;
padding: 0;
}
img {
display: block;
max-width: 100%;
}
.flow > * + * {
margin-top: var(--flow-spacer, 1em);
}
body {
font-family: var(--ff-body);
font-size: var(--fs-400);
line-height: 1.6;
}
h1,
blockquote {
font-family: var(--ff-heading);
font-weight: 900;
}
h1 {
font-size: var(--fs-xl);
line-height: 1;
text-transform: uppercase;
}
blockquote {
font-size: var(--fs-600);
line-height: 1.2;
text-align: center;
margin-bottom: 1em;
}
blockquote::before {
content: open-quote;
}
blockquote::after {
content: close-quote;
}
a {
color: #444;
font-weight: 700;
}
a:hover {
color: red;
}
article {
display: grid;
}
article > *:not(img) {
padding: 0 2rem;
}
.lead {
font-size: var(--fs-600);
line-height: 1.3;
max-width: 35ch;
}
.article-body {
columns: 2 30ch;
gap: 4rem;
max-width: 100ch;
}
.article-body > p:first-child::first-letter {
font-size: 5em;
float: left;
line-height: 1.1;
margin-right: 0.5rem;
}
.article-body > p:first-child::first-line {
font-weight: 523;
}
@media (min-width: 60em) {
article {
grid-template-columns: min(40%, 40rem) 1fr;
}
article > img {
grid-row: 1 / 4;
height: 100%;
object-fit: cover;
}
article > *:not(img) {
grid-column: 1 / -1;
}
}
	:root {
	--ff-body: "Heebo", sans-serif;
	--ff-heading: "Oswald", sans-serif;

	--fs-600: '';
	--fs-400: '';

	--c-base: 320;
	--c-primary-100: hsl(var(--c-base), 30%, 85%);
	--c-primary-200: hsl(var(--c-base), 40%, 60%);
	--c-primary-400: hsl(var(--c-base), 50%, 50%);
	--c-primary-600: hsl(var(--c-base), 70%, 40%);
	}

	body {
	font-family: var(--ff-body);
	line-height: 1.6;
	}

	body,
	h1,
	h2,
	h3,
	p {
	margin: 0;
	}

	h1,h2,h3 {
	font-family: var(--ff-heading);
	line-height: 1;
	}

	h1, a {
	color: var(--c-primary-600);
	}

	h2, h3 {
	color: var(--c-primary-400);
	margin-bottom: 1rem;
	}


	header {
	background: var(--c-primary-100);
	text-align: center;
	padding: 3rem;

	margin-bottom: 2rem;
	}

	header .header-wrapper {
	display: grid;
	place-items: center;
	}

	header small {
	font-weight: bold;
	opacity: 0.6;
	}

	header h1 {
	font-size: clamp(2rem, 1rem + 6vw, 4rem);
	max-width: 600px;
	}

	main {
	padding: 0 3rem;
	max-width: 600px;
	margin: 0 auto;
	}

	section {
	margin-top: 2rem;
	}

	article > p::first-letter {
	font-size: 5rem;
	float: left;

	line-height: 1;
	margin-right: 1rem;
	}

	article > p::first-line {
	font-weight: bold;
	}

	@media (max-width: 40em) {
	.section-body > * + * {
	margin-top: 2rem;
	}
	}

	@media (min-width: 40em) {
	.section-body {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	}
	}
	<link href="https://fonts.googleapis.com/css2?family=Heebo:wght@100..900&family=Oswald:wght@300..700&display=swap" rel="stylesheet">

	<body>

	<header>
	<div class="header-wrapper">
	<small>Lorem ipsum dolor sit</small>
	<h1>Amet consectetur adipisicing elit. Ipsa, atque?</h1>
	</div>
	</header>

	<main>
	<article>
	<h2> Molestiae modi ab</h2>
	<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. recusandae aliquid perspiciatis
	unde dolorum id natus velit vel, facere excepturi similique nemo enim quasi nam, expedita inventore? Repellat
	aspernatur ducimus facilis nemo omnis sunt unde, vel doloribus error enim id deleniti saepe placeat.
	</p>

	<section>
	<h3>Rerum illo, fugit architecto </h3>

	<div class="section-body">

	<p>Voluptatem <a href="#">ipsum tempora vel quisquam</a> cumque natus nesciunt vitae ipsam in inventore,
	earum eligendi impedit. <a href="https://google.com">Sunt quis veniam</a> numquam vitae, magnam, debitis reiciendis
	in voluptas porro voluptatum, est consequuntur
	</p>

	<p>Quasi necessitatibus mollitia quisquam officiis molestiae fugiat officia cumque tempora accusamus adipisci
	illo! Assumenda saepe aliquid eos fugiat rerum similique sequi illo velit amet officia voluptas, sed ducimus.
	quia, suscipit earum rerum illo, fugit architecto fuga eius error labore!
	</p>

	<p>Ducimus voluptate quae aliquid obcaecati beatae exercitationem quaerat molestiae quos, atque dolorum id quo
	sint vero sit reiciendis cumque. Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis, blanditiis.
	consectetur molestias temporibus.</p>

	<p>
	Molestiae magnam similique dolorum vero libero doloribus neque, voluptas natus sunt facere ipsa cupiditate
	placeat necessitatibus cum perferendis<a href="#">ipsum tempora vel quisquam</a> illum ab aliquid minus
	dignissimos dolore voluptatibus? Perferendis, incidunt! Repellendus numquam nobis quidem totam dolor aliquid.
	</p>

	</div>
	</section>
	</article>
	</main>

	</body>