/*
  Styles for a responsive, row based flexbox photo gallery.  Just wrap images in a div
  with class photo-gallery and that is it!
  <div class="photo-gallery">
     <img alt=""  src="PhotoGrounds1.jpg" typeof="foaf:Image" loading="lazy" width="369" height="277" />
     <img alt=""  src="PhotoGrounds2.jpg?itok=IC8_OxVn" typeof="foaf:Image" loading="lazy" width="369" height="277" />
     <img alt=""  src="PhotoGrounds3.jpg?itok=MTmmTfdQ" typeof="foaf:Image" loading="lazy" width="369" height="277" />
     <img alt=""  src="PhotoGrounds4.jpg?itok=UPsTl3Zi" typeof="foaf:Image" loading="lazy" width="369" height="277" />
  </div>
*/
/* div containing the images*/
.photo-gallery {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.563rem;
}

.photo-gallery img {
  width: 100%;
}

@media only screen and (min-width: 700px) {
  .photo-gallery {
    gap: 1.563rem;
    margin-left: 1.25rem;
    margin-right: 1.25rem;
  }
  .photo-gallery img {
    width: 47%;
  }
}
@media only screen and (min-width: 1250px) {
  .photo-gallery {
    gap: 1.563rem;
    margin-left: 0.625rem;
    margin-right: 0.625rem;
  }
  .photo-gallery img {
    width: 31%;
    max-width: 31.25rem;
    margin-bottom: 0.938rem;
  }
}

/*# sourceMappingURL=photo-gallery.css.map */