/* --- Root Variables & Base Styles --- */
:root {
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Montserrat', sans-serif;
    --color-light: #FDFBF8; /* Soft off-white */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: var(--color-light);
    margin: 0;
}

/* --- Navigation & Header Elements --- */
.back-btn {
  text-decoration: none;
  display: inline-block;
  margin: 3% 0 5% 5%; /* Adjusted margin */
}

.back-btn img {
    width: 40px;
}

h2 {
  font-size: 18px;
  font-weight: bold;
  text-align: left;
  margin-left: 5%; /* Use percentage margin for responsiveness */
  margin-bottom: 20px;
}

/* --- GALLERY GRID LAYOUT --- */
.gallery {
  /* Fluid grid setup: allows minimum 300px columns and centers the grid */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  max-width: 1400px;
  margin: 20px auto 40px; /* Center horizontally with auto */
  padding: 0 5%; /* Use percentage padding for responsiveness */
  gap: 20px;
}

.gallery-item {
  /* Ensure item takes up 100% of its grid cell */
  display: flex; 
  justify-content: center;
  align-items: center;
}

.gallery-item img {
  /* Set width to be 100% of the container, no fixed pixels */
  width: 100%;
  height: auto; /* Allow height to adjust automatically */
  max-height: 400px; /* Prevent images from getting too tall */
  aspect-ratio: 4 / 3; /* Maintain a consistent image ratio */
  object-fit: cover; /* Crop to fit the aspect-ratio without distortion */
  border-radius: 10px;
  display: block;
}

/* --- RESPONSIVE ADJUSTMENTS --- */

@media (max-width: 768px) {
    .gallery {
        /* On tablets and smaller screens, reduce gap and padding */
        grid-template-columns: repeat(auto-fit, minmax(100%, 1fr)); /* Force single column */
        padding: 0 20px;
        gap: 15px;
    }
    
    .back-btn {
        margin: 20px 0 20px 20px;
    }

    h2 {
        margin-left: 20px;
        font-size: 20px;
    }

    .gallery-item img {
        height: 250px; /* Set a shorter height for mobile vertical view */
    }
}