@media (min-width: 320px) and (max-width: 480px) {
  main
  {
    height: 100%;
    /* border: 1px rgb(247, 4, 195) solid; */
    width: 100%;
    display: flex;
    justify-content: center;
    /* align-items: center; */

  }

  .contentBox{
    /* border: 1px rgb(0, 255, 34) solid; */
    width:100%;
    height: auto;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    
  }

  .contentBox figure{
    /* border: 1px #f0f solid; */
    width: 100%;
    height: auto;
    /* padding-top: 5rem; */
  }

  .contentBox figure img {
    width: 100%;
    max-width: 380px;
    height: auto;
    max-height: 460px;
  }

  .contentTextArea{
    /* border: 1px rgb(24, 213, 182) solid; */
    width: 100%;
    padding: 1rem;
    display:flex;
    flex-direction: column;
  }

  .contentTextArea h1{
    font-size: 2.9rem;
    margin-bottom: 1rem;
    text-align: center;
  }
  
  .contentTextArea h2{
    font-size: 1.6rem;
    margin-bottom: 0.9rem;
  
  }

  .contentTextArea p{
    font-size: 1.2rem;
  
  }
  
}

@media (min-width: 481px) and (max-width: 600px) {
  
  main
  {
    height: 100%;
    /* border: 1px rgb(247, 4, 195) solid; */
    width: 100%;
    display: flex;
    justify-content: center;
    /* align-items: center; */

  }

  .contentBox{
    /* border: 1px rgb(0, 255, 34) solid; */
    width:100%;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    
  }

  .contentBox figure{
    /* border: 1px #f0f solid; */
    width: 100%;
    height: auto;
    /* padding-top: 5rem; */
  }

  .contentBox figure img {
    width: 100%;
    max-width: 380px;
    height: auto;
    max-height: 460px;
  }

  .contentTextArea{
    /* border: 1px rgb(24, 213, 182) solid; */
    width: 100%;
    padding: 1rem;
    display:flex;
    flex-direction: column;
  }

  .contentTextArea h1{
    font-size: 2.9rem;
    margin-bottom: 1rem;
    text-align: center;
  }
  
  .contentTextArea h2{
    font-size: 1.6rem;
    margin-bottom: 0.9rem;
  
  }

  .contentTextArea p{
    font-size: 1.2rem;
  
  }
}

@media (min-width: 601px) and (max-width: 800px) {
  
  body{
    background-color: rgb(195, 242, 239);
  }

  main  
  {
    height: 100%;
    /* border: 1px rgb(247, 4, 195) solid; */
    width: 100%;
    display: flex;
    justify-content: center;
    /* align-items: center; */

  }

  .contentBox{
    /* border: 1px rgb(0, 255, 34) solid; */
    width:100%;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    
  }

  .contentBox figure{
    /* border: 1px #f0f solid; */
    width: 100%;
    height: auto;
    padding-top: 0;
  }

  .contentBox figure img {
    width: 70%;
    max-width: 484px;
    height: auto;
    max-height: 589px;

  }

  .contentTextArea{
    /* border: 1px rgb(24, 213, 182) solid; */
    width: 100%;
    padding: 1rem;
    display:flex;
    flex-direction: column;
  }

  .contentTextArea h1{
    font-size: 2.9rem;
    margin-bottom: 1rem;
    text-align: center;
  }
  
  .contentTextArea h2{
    font-size: 1.6rem;
    margin-bottom: 0.9rem;
  
  }

  .contentTextArea p{
    font-size: 1.2rem;
  
  }
}

@media (min-width: 801px) and (max-width: 1025px) {

  main
  {
    height: 60vh;
    /* border: 1px rgb(247, 4, 195) solid; */
    width: 100%;
    display: flex;
    justify-content: center;
    /* align-items: center; */

  }

  .contentBox{
    /* border: 1px rgb(0, 255, 34) solid; */
    width:100%;
    padding: 1.5rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    
  }

  .contentBox figure{
    /* border: 1px #f0f solid; */
    width: 33.8%;
    height: auto;
    padding-top: 2rem;
    text-align: center;
  
  }

  .contentBox figure img {
    width: 80%;
    max-width: 207px;
    height: auto;
    max-height: 253px;

  }


  footer
  {
    height: 40vh;
    /* border: 1px #f00 solid; */

  }

  .contentTextArea{
    /* border: 1px rgb(24, 213, 182) solid; */
    width: 65%;
    padding: 2rem;
    /* padding-top: 9rem; */
    display:flex;
    flex-direction: column;
  }

  .contentTextArea h1{
    font-size: 2.6rem;
    margin-bottom: 1rem;
  }
  
  .contentTextArea h2{
    font-size: 1.6rem;
    margin-bottom: 1rem;
  
  }

  .contentTextArea p{
    font-size: 1.2rem;
  
  }

}

@media (min-width: 1026px) and (max-width: 1281px) {

  main
  {
    height: 60vh;
    /* border: 1px rgb(247, 4, 195) solid; */
    width: 100%;
    display: flex;
    justify-content: center;
    /* align-items: center; */

  }

  .contentBox{
    /* border: 1px rgb(0, 255, 34) solid; */
    width:100%;
    padding: 1.5rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    
  }

  .contentBox figure{
    /* border: 1px #f0f solid; */
    width: 33.8%;
    height: auto;
    padding-top: 2rem;
    text-align: center;
  
  }

  .contentBox figure img {
    width: 68%;
    max-width: 228px;
    height: auto;
    max-height: 277px;

  }


  footer
  {
    height: 40vh;
    /* border: 1px #f00 solid; */

  }

  .contentTextArea{
    /* border: 1px rgb(24, 213, 182) solid; */
    width: 65%;
    padding: 2rem;
    padding-top: 5rem;
    display:flex;
    flex-direction: column;
  }

  .contentTextArea h1{
    font-size: 3rem;
    margin-bottom: 1rem;
  }
  
  .contentTextArea h2{
    font-size: 1.7rem;
    margin-bottom: 1rem;
  
  }

  .contentTextArea p{
    font-size: 1.2rem;
  
  }

}