@media screen and (max-width: 1440px) {
  header .inner {
    width: 90%;
  }
  .main-wrapper {
    width: 90%;
  }
}
@media screen and (max-width: 1280px) {
  footer .footer-wrapper p {
    font-size: 1.3rem;
  }
}

@media screen and (max-width: 1024px) {
  .main-wrapper .work-wrapper .project {
    width: calc(25% - 12px);
  }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
  .main-wrapper .work-wrapper .project {
    width: calc(33.333% - 12px);
  }

  .main-wrapper .text-wrapper .main-title h1 {
    font-size: 3.5rem;
    padding-top: 0;
  }

  .main-wrapper .text-wrapper .sub-title h3 {
    font-size: 1.8rem;
    line-height: 2px;
  }

  .main-wrapper .btn-wrapper {
    justify-content: center;
    padding-top: 40px;
  }
}

@media screen and (max-width: 767px) {
  .main-wrapper .work-wrapper .project {
    width: 100%;
  }

  header .inner {
    justify-content: center;
  }

  header .inner .nav {
    display: none;
  }

  .main-wrapper .text-wrapper .main-title h1 {
    font-size: 3.5rem;
    padding-top: 0;
  }

  .main-wrapper .text-wrapper .sub-title h3 {
    font-size: 1.8rem;
    line-height: 2px;
  }

  .main-wrapper .btn-wrapper {
    justify-content: space-between;
    padding-top: 40px;
    flex-wrap: wrap;
  }

  .main-wrapper .btn-wrapper button {
    padding: 0 9px;
  }
}

@media screen and (min-width: 375px) and (max-width: 425px) {
  header .inner {
    justify-content: center;
  }

  header .inner .nav {
    display: none;
  }

  .main-wrapper .btn-wrapper button {
    padding: 0 0px;
  }
}