/* Global Box Sizing */
html {
 box-sizing: border-box;
}
*, *::before, *::after {
 box-sizing: inherit;
}

/* Body Styles */
body {
 font-family: 'Inter', sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 background-color: #f0f2f5; /* Light grey background for contrast */
 padding: 1rem; /* p-4 equivalent (16px) */
 min-height: 100vh; /* Ensure body always takes at least full viewport height */
 display: flex; /* Use flexbox to center content vertically if needed, but not strictly for this issue */
 flex-direction: column; /* Allows main content to push footer down if present */
}

/* Responsive padding for larger screens */
@media (min-width: 768px) { /* md:p-8 equivalent (32px) */
 body {
 padding: 2rem;
 }
}

/* Heading Styles */
h1 {
 font-size: 1.875rem; /* text-3xl equivalent */
 font-weight: 700; /* font-bold equivalent */
 text-align: center;
 margin-bottom: 2rem; /* mb-8 equivalent (32px) */
 color: #374151; /* text-gray-800 equivalent */
}

/* Responsive heading for larger screens */
@media (min-width: 768px) { /* md:text-4xl equivalent */
 h1 {
 font-size: 2.25rem;
 }
}

/* Main Grid Container */
.grid-container {
 max-width: 1024px; /* max-w-screen-lg equivalent */
 margin-left: auto; /* mx-auto equivalent */
 margin-right: auto; /* mx-auto equivalent */
 display: grid;
 grid-template-columns: 1fr; /* grid-cols-1 equivalent */
 gap: 10px; /* gap-x-[10px] gap-y-[10px] equivalent */
 border-radius: 0.75rem; /* rounded-lg equivalent */
 margin-bottom: 2rem; /* Added: Provide some space below the grid */
}

/* Responsive grid for larger screens */
@media (min-width: 768px) { /* md:grid-cols-2 equivalent */
 .grid-container {
 grid-template-columns: repeat(2, 1fr);
 }
}

/* Grid Item Styles */
.grid-item {
 position: relative;
 width: 100%;
 padding-bottom: 75%; /* 4:3 aspect ratio (height is 75% of width) */
 border-radius: 0.75rem; /* rounded-lg equivalent */
 overflow: hidden;
 box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-lg equivalent */
 background: #9FA6AE;
/*background: #9C7B77; */
}

/* Image Styles within Grid Item */
.grid-item img {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%; /* w-full equivalent */
 height: 100%; /* h-full equivalent */
 object-fit: cover;
 border-radius: 0.75rem; /* rounded-lg equivalent */
}

/* Text Overlay Styles */
.image-overlay {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 display: flex;
 align-items: center;
 justify-content: center;
 /* background-color: rgba(0, 0, 0, 0.2); /* REMOVED: Semi-transparent black overlay */
 background-color: transparent; /* ADDED: Ensure no background */
 color: white;
 font-size: 2.8rem; /* Adjust font size for larger screens */
 font-weight: 600; /* Semi-bold text */
 text-align: center;
 opacity: 1; /* Always visible as per request */
 transition: background-color 0.3s ease; /* Smooth transition for hover effect if desired */
 border-radius: 0.75rem; /* Match rounded corners of the image */
 text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.8); /* ADDED: Text shadow for readability */
}

/* Responsive font size for smaller screens */
@media (max-width: 767px) { /* Tailwind's default 'md' breakpoint is 768px */
 .image-overlay {
 font-size: 1.9rem; /* Smaller font size on small screens */
 }
}

.gallery-container {
 display: flex;
 flex-wrap: nowrap;
 width: 100%;
 max-width: 1200px;
 padding: 10px;
 box-sizing: border-box;
}

.gallery-item {
 flex: 1;
 min-width: 0;
 padding: 5px;
 box-sizing: border-box;
 display: flex;
 flex-direction: column; /* Stack image and text vertically */
 align-items: center; /* Center items horizontally in the column */
}

.gallery-item img {
 display: block;
 max-width: 100%;
 height: auto;
 object-fit: cover;
 width: 100%;
 aspect-ratio: 1/1;
 margin-left: 5px; /* Add left padding */
 margin-right: 5px; /* Add right padding */
 background-color: white; /* Ensure padding is white */
 box-sizing: border-box; /* Include padding in the image's dimensions */
}

.image-caption {
 margin-top: 5px; /* Space between image and text */
 font-size: 1.2rem;
 text-align: center;
 color: #333;
}

/* Media Query for smaller screens */
@media (max-width: 768px) {
 .gallery-container {
 flex-direction: column;
 align-items: center;
 }

 .gallery-item {
 width: 100%;
 max-width: 300px;
 }

 .gallery-item img {
 width: 100%;
 }
}