* {
    margin: 0;
    padding: 0;
  }
  
  body {
    width: 100%;
    font-family: sans-serif;
    font-size: 16px;
    background-color: #e4e4e4;
    margin: 0 ;
    padding: 0;
  }
  
  main {
    width: 1220px;
    display: flex;
    padding: 0;
    flex-direction: row;
    padding-left: 11%;
    padding-right: 11%;
  }
  
  div {
    width: 50%;
    padding: 6%;
    padding-top: 5%;
    background-color: #ffffff;
  }
  
  section {
    padding-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
  }
  
  .principal {
    width: 50%;
    max-width: 480px;
    padding: 6%;
    padding-top: 5%;
    background-color: #F6F0EF;
  }
  .circle1{
    width: 75%;
    border: 0.5rem solid white;
    border-radius: 50%;
    margin-bottom: 1.5rem;
  }
  
  .letra {
    font-style: italic;
    font-weight: thin;
    margin-bottom: 1.5rem;
  }
  
  h1,
  h2 {
    color: #4D4D4D;
    margin-bottom: 2rem;
  }
  
  h3 {
    font-family: inherit;
    font-weight: inherit;
    color: black;
  }
  
  hr {
    height: 0.1rem;
    max-width: 100%;
    border: 0;
    background: linear-gradient(
      0.25turn,
      #ffffff,
      #a9a9a9,
      #4f4f4f,
      #a9a9a9,
      #ffffff
    );
    margin-bottom: 1.5rem;
  }
  
  .circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
  }

  @media only screen and (max-width: 580px) {
    main{
      padding-left: 0;
      padding-right: 0;
      width: 490px;
      margin-left: 10%;
      flex-wrap: wrap;
    }
    div{
      margin: 0;
    }
}