@font-face {
   font-family: 'Inter-Regular.ttf';
   src: url('/fonts/Inter/Inter-VariableFont_slnt\,wght.ttf');
   font-weight: normal;
   font-style: normal;
}

.sectionMyStory {
   display: grid;
   grid-template-areas:
      'mainTitle mainTitle'
      'hello hello'
      'picture text';
  gap: 10px;
}

.mainTitle {
   grid-area: mainTitle;
   background-color: #29236C;
   color: white;
   padding: 0%;
   width: 800px;
   height: 300px;
   border-radius: 0px 150px 150px 0px;
   margin-top: 150px;
   padding-left: 20px;
}

.mainTitle h1 {
   font-size: 3.5em;
   font-weight: lighter;
}

.mainTitle h2 {
   font-size: 2em;
   font-weight: lighter;
}

.text {
   grid-area: text;
   grid-template-rows: 20% 80%;
   display: grid;
   width: 500px;
   background-color: white;
   color: #29236C;
   border-radius: 50% 50% 0px 0px;
   padding: 50px 30px 30px 30px;
   height: 450px;
}

.tinyLogo {
   justify-self: center;
} 

.text p {
   font-family: 'Times New Roman', Times, serif;
   font-size: 1.2em;
}

.hello {
   grid-area: hello;
   text-align: center;
   color: #29236C;
}

.hello h1 {
   font-size: 3em;
   font-weight: lighter;
}

hr {
   border-top: 1px solid white;
}

.sectionMyStory img {
   border-radius: 40px;
   padding-bottom: 20px;
}

.imgSofia {
   grid-area: picture;
   justify-self: end;
}