From f1f2cb1c5cd5660697a129b7b3b4f426c15195ed Mon Sep 17 00:00:00 2001
From: danielsilveira-dev <danielsilveira.contato@gmail.com>
Date: Sun, 21 May 2023 23:01:04 -0300
Subject: [PATCH] Tuning text with CSS clamp

---
 style.css | 20 +++++++++-----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/style.css b/style.css
index 675dd97..ccb8289 100644
--- a/style.css
+++ b/style.css
@@ -16,7 +16,8 @@
 
   font-size: 62.5%;
   --fs-body: 1.6rem;
-  --fs-heading: 4rem;
+  --fs-heading: clamp(4rem, 1rem + 5vw, 5.6rem);
+  --fs-heading-sm: clamp(3rem, .5rem + 3vw, 4rem);
 }
 body {
   font-family: var(--ff-texting);
@@ -28,7 +29,8 @@ body {
 }
 
 .page {
-  max-width: 33rem;
+  max-width: clamp(33rem, 30rem + 60vw, 117rem);
+  padding: 0 5rem;
   margin: 0 auto;
 }
 
@@ -78,11 +80,15 @@ main {
   height: 41.6rem;
   object-fit: cover;
 
+  filter: brightness(0.5) saturate(0);
+
   border-radius: 6px;
 
   transition: all 200ms;
 }
 .card img:hover {
+  filter: brightness(1);
+
   transform: scale(1.1);
   opacity: .4;
 }
@@ -91,7 +97,7 @@ main {
   bottom: 5.2rem;
   left: 2.8rem;
 
-  font-size: 4rem;
+  font-size: var(--fs-heading-sm);
   font-weight: 800;
 
   display: flex;
@@ -138,14 +144,6 @@ main {
 }
 
 @media (min-width: 700px) {
-  :root {
-    --fs-heading: 5.6rem;
-  }
-  
-  .page {
-    max-width: 117rem;
-    padding: 0 5rem;
-  }
   main {
     grid-template-columns: 1fr 1fr;
   }