style.css

:root {
    --clr-primary-200: #F3EED9;
    --clr-primary-400: #824936;
  
    --clr-neutral-100: #fff;
    --clr-neutral-900: #222c2a;
  
    --ff-primary: "Roboto", sans-serif;
    --ff-accent: "Playfair Display", serif;
}

body{
font-family: var(--ff-primary);
font-size: 1.3125rem;
font-weight: 400;
line-height: 1.6;
}

.text-center{
text-align: center;    
}

.Container{
margin-inline: auto; 
width: min(90%,70.5rem);

}

.Container--narrow{
 max-width: 35rem;   
}

*,
*::before,
*::after{
box-sizing: border-box;   
}

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

}

.split{
 display: flex;
 flex-direction: column;  
}


@media(min-width:40em)
{
    header,
    section{
    padding: 8rem 0;    
    }
        
}

@media (min-width :40em)
{ 
  .split{
   flex-direction: row; 
  }

  .split > *{
   flex-basis: 100%;  
  }

  .split > * + *{
    margin-left: 2em;  
   }
}
img{
display: block;    
max-width: 100%;    
}

h1,h2,h3{
color:var(--clr-primary-400);    
font-family: var(--ff-accent);
line-height: 1;
margin-bottom: 1em;
font-weight: 900;    
}

header,
section{
padding: 3rem 0;    
}

.bg-light{ 
background-color: var(--clr-primary-200); 
}

.bg-dark{
color:var(--clr-neutral-100);      
background-color: var(--clr-primary-400); 
}
    
.bg-translucent{
color:var(--clr-neutral-100);      
background-color: var(--clr-neutral-900); 
}

.bg-translucent h2{
 color: var(--clr-primary-200);   
}



.bg-dark h2 {
  color: var(--clr-primary-200);
}