@media (max-width: 1010px) {
  body {
    height: auto;
    width: 100vw;
    padding: 10px;
  }
  h1 {
    text-align: center;
    font-size: 2em;
    margin-bottom: 30px;
  }
  h4 {
    font-size: 12px;
  }
  p {
    max-width: 250px;
    margin-top: -10px;
  }
  main {
    height: 535px;
    width: 330px;
    grid-template-columns: 100%;
    grid-template-rows: 20% 80%;
    margin: 145px 0;
  }
  .first-section {
    display: inline-block;
    background-image: url(../images/bg-pattern-mobile.svg);
    background-size: 75%;
    background-position: 45% 10%
  }
  .first-section .first-content {
    overflow: visible;
  }
  .first-section .box-image {
    display: none;
  }
  .first-section .first-content picture img {
    width: 240px;
    margin-top: -110px;
    margin-left: 12%;
  }
  .second-section {
    padding: 20px;
  }
  .second-section .second-content>div>div{
    margin: 15px 0;
  }
}