.gallery-container h1 {
    margin-top: 60px;
    font-family: Helvetica, Arial, Verdana, Tahoma;
    font-weight: bold;
}

.gallery-container p.page-description {
    text-align: center;
    /*max-width: 800px;*/
    margin: 15px auto;
    color: #888;
    font-size: 18px;
}

.gallery-header {
    /* Apply centering rules */
    max-width: 1500px; 
    width: 90%;
    margin: 0 auto 30px auto; /* 30px margin at the bottom */
    font-size: 18px;
    /* Center the text itself */
    text-align: left;
	
}

.tz-gallery {
	max-width: 1500px; /* Adjust this value to your preferred maximum width */
    width: 90%;       /* Ensures it's responsive and doesn't stretch too wide */
    
    /* 2. Center the block element */
    margin: 0 auto;
    
    /* Optional: Add some space above and below the gallery */
    padding-top: 20px;
    padding-bottom: 20px;
}

/* 1. Target the image container (the <a> tag) */
.tz-gallery .lightbox {
  display: block;
  width: 100%;
  height: 0; /* Essential: sets the base height to zero */
  
  /* Padding-bottom defines the height as a percentage of the width. */
  /* 75% = 3/4 ratio (4:3 landscape) */
  /* 100% = 1/1 ratio (Square) */
  padding-bottom: 70%; 
  
  position: relative; /* Needed to position the image absolutely inside */
  overflow: hidden;
  border: 1px solid #071c06;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  border-radius: 3px;

}

/* 2. Style the image (the <img> tag) */
.tz-gallery .lightbox img {
  /* Image must fill the 100% of the container */
  width: 100%;
  height: 100%;
  
  /* Positioning the image to overlap the padding-bottom space */
  position: absolute;
  top: 0;
  left: 0;
  
  /* Cropping and centering */
  object-fit: cover;
  object-position: center;
    /* Initial Box Shadow:
     - Horizontal offset: 0 (no horizontal shift)
     - Vertical offset: 2px (slight downward shift)
     - Blur radius: 3px
     - Spread radius: 0 (optional, can be used to expand/contract shadow)
     - Color: rgba(0, 0, 0, .2) - black with 20% opacity for a subtle shadow */
  
  box-shadow: 0 5px 10px rgb(0, 0, 0, 1);
  /* Add a transition for a smooth hover effect on the box-shadow */
  transform: 0.75s ease-in-out;
 
}

.tz-gallery .lightbox:hover img {
	border: 1.2px solid #151b19;
  box-shadow: 0 8px 15px rgb(0, 0, 0, 1);
	transition: 0.75s ease-in-out;
	transform: scale(1.10); 
}

.fit {
  width: auto;
  height: auto;
  overflow: hidden;
  object-fit: cover;
}

.fitone {
  width: auto;
  height: auto;
  overflow: hidden;
  object-fit: cover;
}

.baguetteBox-button {
    background-color: transparent !important;
}


/* Ensure the gallery is still responsive by removing margin below the image on small screens */
@media (max-width: 768px) {
  .tz-gallery .lightbox img {
    margin-bottom: 10px; /* Reduce margin for mobile */
  }
}