/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Apr 03 2024 | 14:15:07 */
/* photo-gallery.component.css */

.photo-gallery {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  margin: 0 auto; /* Center the container */
  flex-wrap: wrap; /* Wrap items to the next line if necessary */
}

.photo {
  flex: 1 0 auto; /* Grow to fill the space, but don't shrink */
  margin: 5px; /* Adds space between images */
  max-width: 100px; /* Maximum width of images */
  max-height: 100px; /* Maximum height of images */
  object-fit: contain; /* Ensures full visibility of images */
  width: 100%; /* Make image responsive to the container size */
  height: auto; /* Adjust height proportionally */
}

/* Responsive design: Adjust the size of the images on smaller screens */
@media (max-width: 1200px) {
  .photo {
    max-width: calc(10% - 10px); /* 2 images minus margin */
  }
	td {
    font-size: smaller;
  }
}

@media (max-width: 900px) {
  .photo {
    max-width: calc(10% - 10px); /* 3 images minus margin */
  }
	td {
    font-size: smaller;
  }
}

@media (max-width: 600px) {
  .photo {
    max-width: calc(10% - 10px); /* 4 images minus margin */
  }
	td {
    font-size: smaller;
  }
}

@media (max-width: 300px) {
  .photo {
    max-width: 5%; /* 1 image at full width minus margin */
  }
	td {
    font-size: smaller;
  }
}