@media only screen and (max-width: 767px) {
  .nav-bar {
    padding: 1rem 1rem;
    /* width: 85%; */
  }

  .nav-link {
    font-size: 1.2rem;
  }

  .nav-logo {
    height: 2rem;
  }

  .projects-wrapper {
    width: 80vw;
    overflow-x: hidden;
    margin-top: 0rem;
  }

  .side-bar,
  .projects-right-sidebar {
    display: none;
  }

  .project-container {
    padding: 3rem 0px;
    gap: 40px;
    width: 90vw;
  }

  .project-title-overlay {
    padding: 15px;
    font-size: 1.5rem;
  }

  .project-title-overlay::after {
    content: "";
    position: absolute;
    top: 15px;
    right: 15px;
    width: 16px; /* smaller than 24px */
    height: 16px; /* smaller than 24px */
    background: url("/imgs/projects/arrow.svg") no-repeat center / contain;
  }
}