@media screen and (max-width: 1023px) {
       #projects{
      margin-top: 0;
      height: auto;
      padding: 0;
      /* background-color: red; */
    }
    .projects-texts{
      width: 100%;
      height: auto;
      padding: 15px;
    }
    .projects-texts h3{
        font-weight: bold;
    }
    .projects-section{
      display: block;
    }
    .project-grid{
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, .5fr));
      width: 100%;
    }
      
      .modal-content {
        margin-top: 0;
        padding: 0;
        border-radius: 10px;
        width: 95%;
        height: 70%;
      }
      /* *********************************** */
      .projects-vid{
        width: 100%;
      }
      .vid-cover{
        width: 85%;
        height: 25vh;
      }

      .motion{
        position: inherit;
        width: 100%;
        height: 100%;
      }




        /* **************************************8 */

}