main{
  background-color: var(--main-color);
  display: grid;
  grid-template-columns:100%;
  padding: 10px 20px;
  align-content: start;
}

.title{
  grid-area: 1 / 1 / 2 / 2;
  text-align: center;
  margin-top: 20px;
  padding-bottom: 10px;
}

/* .center{ 
  grid-template-columns: 100%;
} */
.center-left{
  grid-area: 1 / 1 / 2 / 2;
  padding: 0 10px;
}
.center-right{
  grid-area: 2 / 1 / 3 / 2;
  padding: 10px 10px;
  text-align: center;
  margin-top: 20px;
}

.center-right img{
  border-radius: 10px;
}


@media screen and (min-width: 768px) {
  main{ padding: 30px 50px; }

  .center-left{
    grid-area: 1 / 1 / 2 / 2;
    padding: 0 10px;
  }
  .center-right{
    grid-area: 2 / 1 / 3 / 2;
    padding: 10px 10px;
    text-align: center;
    margin-top: 20px;
  }

}


@media screen and (min-width: 1000px) {  

  .center-left{
    grid-area: 1 / 1 / 2 / 2;
    padding: 0px 20px 0px 20px;
  }

  .center-right{
    grid-area: 1 / 2 / 2 / 3;
    border-radius: 50px;
  }
  .center-right img{
    border-radius: 10px;
  }


}