@media (max-width: 1023px) {
  header {
    width: 90%;
  }

  .header-main-container h3 {
    font-size: 2.4rem;
  }

  .header-main-container h1 {
    font-size: 3.6rem;
  }

  /* ---------------------------------------- main ---------------------------------------- */
  /* ---------- main about ---------- */

  .main-about-container {
    position: relative;
    width: 90%;
    height: auto;
    margin: 0 auto;
    padding-bottom: 5%;
  }

  .main-about {
    position: relative;
    width: 100%;
    height: auto;
    margin-top: 3rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .main-resume-container {
    width: 100%;
    height: auto;
    margin: 0 auto 10rem;
  }

  /* ---------- main resume ---------- */

  .main-skill {
    width: 90%;
  }

  /* ---------- main projects ---------- */
  .cards {
    width: 90%;
  }
  /* ----------- main contact ----------- */

  .contact {
    width: 70%;
    height: auto;
    margin: 4rem auto;
  }
}