/* Use media query to apply percentage width on smaller screens */

@media screen and (min-width: 1143px) {
  img {
    width: 100%;
    /* Change to desired percentage value */
    height: 500px;
    object-position: 50 0;
    /* object-fit: cover; */
  }

  #franklin {
    font-size: 2em;
  }

  #project-section {
    font-size: .4em;
  }

  #links {
    width: 100%;
  } 

  img {
    height: 400px;
    width: 50vw;
  }
}

@media screen and (max-width: 1143px) {
  img {
    width: 100%;
    /* Change to desired percentage value */
    height: 500px;
    object-position: 50 0;
    /* object-fit: cover; */
  }

  #franklin {
    font-size: 1em;
  }

  #project-section {
    font-size: .4em;
  }

  #links {
    width: 100%;
  } 

  img {
    height: 400px;
    object-position: 50 0;
  }
}

@media only screen and (max-width: 778px) {
  .container {
    margin: 0;
    padding: 20px;
    
  }
  #project-section {
    /* width: 20vw; */
    font-size: .3em;
  }

  img {
    height: 300px;
    object-position: 50 0;
    /* width: 100vw; */
    overflow: hidden;
  }

  #projectImgSection {
    width: 90vw;
    padding-right: 20px;
    /* border-style: dashed;
    border-color: green; */
  }



}