flexGallery.css

  body {
    background: #eee;
    width: 100%;
  }

  .g h1,
  .g p {
    font-family: 'Brush Script MT', cursive;
    text-align: center;
  }

  h1 {
    font-size: 36px;
    line-height: 0.7em;
  }

  p {
    font-size: 21px;
    line-height: 0em;
    padding-top: 0;
  }

  .container {
    display: flex;
    justify-content: center;
  }

  .gallery {
    display: flex;
    flex-wrap: wrap;
    margin: 11px;
    width: 80vw;
  }

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  img:hover {
    opacity: 0.5;
  }

  /*
  .md{
    flex: 1 1 17vw;
  }

  .lg{
    flex: 1 1 33vw;
  }

  .sm{
    flex: 1 1 16vw;
  }
*/

  .md{
    flex: 1 1 191px;
  }

  .lg{
    flex: 1 1 370px;
  }

  .sm{
    flex: 1 1 150px;
  }


  /*
.s{
flex: 1 1 150px;
}
.m{
flex: 1 1 256px;
}
.l{
flex: 1 1 100px;
}
*/
  div {
    padding: 6px;
  }