/*
  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>
*/
/*#249e34; */
/* Border framing Booking Form */
/* onfocus boxshadow color*/
/*
  Link color chosen to meet usability contrast requirements of 4.5 to 1 using tool at
 https://dequeuniversity.com/rules/axe/4.4/color-contrast?utm_source=lighthouse&utm_medium=lr
 $link-color: #108910;
 */
/* @Mixins Section */
/* See file FluidTypography.scss  Provides a way to fluidly change font, padding and other
   sizing as screen size changes.  EX:
   sizing as screen size changes.  EX:
   html {
  @include fluid-type(font-size, 320px, 1366px, 14px, 18px);
}
*/
/*
   From https://www.aleksandrhovhannisyan.com/blog/fluid-type-scale-with-css-clamp/
   Generates the css clamp function.
   Focused on font-size, but may be used for margins and padding

   Usage:
      clamped(min-size-px, max-size-px, min-browser-width-px, max-browser-width-px)
      font-size: clamped(26px, 36px, 600px, 1200px);
      font-size: clamped(26px, 36px);      //using width default values

*/
/* div containing the images*/
.photo-gallery {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5625rem;
}

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

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

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