.photo-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  padding: 20px;
}

.photo-gallery a {
  text-decoration: none;
  color: inherit;
}

.photo-card {
  color: white;
  width: 190px;
  height: 230px;
  background-size: cover;
  background-position: center;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
  transition: transform 0.2s ease;
  cursor: pointer;
}

.photo-card:hover {
  transform: scale(1.03);
}

.photo-info {
  position: absolute;
  bottom: 0;
  width: 100%;
  max-height: 80%;        /* limits height so text doesn’t overflow too far */
  overflow-y: auto;       /* adds vertical scroll if needed */
  padding: 12px;
  background: rgba(0, 0, 0, 0.65);
  color: white;
  font-family: sans-serif;
  box-sizing: border-box; /* ensures padding counted */
}

.photo-info h2, 
.photo-info p {
  color: white;
  margin: 0 0 4px 0;
  word-wrap: break-word;  /* ensure long words wrap */
}

.photo-info i {
  font-size: 0.8em;
}


#content {
  background: white;
  padding-bottom: 400px; /* creates spacing before footer */
}


#footer {
  background: #832b25;
  color: white;
  padding: 20px;
  text-align: center;
}