style.css

*{
   box-sizing: border-box;
   margin: 0;
}

:root{
   --background-color: #FFFECA;
   --text-color: #0000FF;
}

body{
   background-color: var(--background-color);
   font-family: inter, sans-serif;
}

header{
display: flex;
flex-direction: column;
width: 90%;
max-width: 440px;
margin-left: 20px;
margin-right: 20px;
margin-top: 57px;
}

h2{
   font-weight: 400;
   font-size: 21px;
   line-height: 26px;
   color: var(--text-color);
}

h1{
   font-weight: 700;
   font-size: 30px;
   line-height: 44px;
   width: 300px;
   color: var(--text-color);
}

.logo{
   width: 10em;
   margin: 1em 0 0 auto;
}

main{
display: flex;
flex-direction: column;
max-width: 440px;
width: 100%;
}

.intro{
width: 90%;
margin: 80px auto 0 auto;
position: relative;
}

.intro-img{
   max-width: 442px;
   width: 100%;
}

.intro-title{
   position: absolute;
   width: 85%;
   height: 50px;
   padding: 15px 13px 7px 26px;
   background-color: #FFFFFF;
   color: var(--text-color);
   font-size: 19px;
   left: 53px;
   top: 215px;
}

.intro-text{
   position: relative;
   padding: 21px 13px 20px 25px ;
   font-weight: 400;
   font-size: 15px;
   line-height: 25px;
   background-color: #FFFFFF;
   color: var(--text-color);
   top: -5px;
}

.intro-2{
   width: 90%;
   margin: 80px auto 0 auto;
   position: relative;
}

.intro2-title{ 
   font-weight: 700;
   font-size: 19px;
   text-align: center;
   margin: auto 90px auto 90px;
}

.middle{
   width: 90%;
   margin: 80px auto 0 auto;
   position: relative;
   }

.middle-img{
   max-width: 442px;
   width: 100%;
}

.middle-title{
   position: absolute;
   width: 85%;
   height: 50px;
   padding: 15px 13px 7px 26px;
   background-color: #FFFFFF;
   color: var(--text-color);
   font-size: 19px;
   left: 53px;
   top: 215px;
}

.middle-text{
   padding: 264px 117px auto 19px ;
   font-weight: 400;
   font-size: 15px;
   line-height: 25px;
   background-color: #FFFFFF;
   color: var(--text-color);
   top: -5px;
}