/* Inherit global site styles for project pages */
@import url('../style.css');

/* Project page helpers */
.std-img {
  width: 100%;
  margin: 20px 0;
  display: flex;
  justify-content: center;
}

.std-img img {
  /* Consistent width across all images while staying responsive */
  width: 500px;
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid #ccc;
}

.std-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 20px;
  justify-items: center; /* center images within each grid cell */
}

.std-gallery img {
  width: 100%;
  border-radius: 10px;
  border: 1px solid #ddd;
  object-fit: cover;
}

/* First and last image in the project get a different width */
.project-section .std-img:first-of-type img{
    width: 1100px;
    max-width: 100%;
    height: auto;
  }
  
.project-section .std-img:last-of-type img {
  width: 900px;
  max-width: 100%;
  height: auto;
}