/*------------Variables------------*/ 
:root{
    --orange:hsl(31, 77%, 52%);
    --blue:hsl(184, 100%, 22%);
    --green:hsl(179, 100%, 13%);   
    --p-width:175px;

}

main{
    --columns:1fr 1fr 1fr;
    --rows:1fr 1fr 1fr;
}

*{
    padding:0;
    margin:0;
}
/*--------------Main---------------*/ 
main{ 
    
    display:grid;
    grid-template-columns:var(--columns);
    width:700px;
    height:25em;
    margin: 6em auto;
    border-radius:5px;
    font-size:15px;
    overflow:hidden;
    
    
}
/*--------------sections-----------*/ 
section{
   padding:2em;
}

img{
    
    margin-bottom:2em;
}

h1{
    font-family:"Big Shoulders Display";
    text-transform:uppercase;
    color:white;
    margin-bottom:1em;
    
}

p{
    font-family:"Lexend Deca";
    color:white;
    margin-bottom:5em;
    
}

button{ 
    font-family:"Lexend Deca";
    border:none; 
    border-radius:20px;
    padding:10px;
    width:10em;
}

/*------------section1------------*/

.one{ 
    background-color:var(--orange);
    
}

.one button{ 
    color:var(--orange);
}

.one p{
    width:var(--p-width);
}

/*------------section2------------*/


.two{ 
   background-color:var(--blue);
}

.two p{ 
    width:var(--p-width);
}
.two button{ 
    color:var(--blue);
}

/*------------section3------------*/

.three{
   background-color:var(--green);
}

.three p{
    width:var(--p-width);
}

.three button{
    color:var(--green);
}

/*----------------mobile---------------------------*/

@media (max-width:375px){

:root{
    --p-width:190px;
}

/*--------------main mobile-------------*/
main{ 
    width:250px ;
    height:75em;
    grid-template-rows:var(--rows);
    --columns:1fr;/*changed the value of the number of columns*/ 
}
/*--------------section mobile-------------*/

.one p{
    width:var(--p-width);
}


.two p{
    width:var(--p-width);
}

.three p{
    width:var(--p-width);
}


}