.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
}

.flex-item {
  flex: 1 1 calc(33.333% - 20px); /* Adjusts for a three-column layout with gaps */
  max-width: calc(33.333% - 20px); /* Ensures the flex items don't exceed one-third of the container width */
  height: auto;
  aspect-ratio: 4 / 3; /* Maintains the 4:3 aspect ratio */
  object-fit: cover; /* Ensure the image scales correctly */
}