.gallery {
	justify-content: center;
	display: grid;
    /* This creates two equal columns */
    grid-template-columns: repeat(2, 1fr); 
    /* Adds a nice gap between images */
    gap: 5px; 
    /* Centers the whole grid */
    justify-items: center;
    justify-content: center; /* Centers the columns themselves */
    justify-items: center;   /* Centers the images inside the columns */
    margin-left: auto;
    margin-right: auto;
}

.gallery-item {
	width: 65%;
}

.gallery img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.lightbox{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	opacity: 0;
}


.lightbox.active{
	opacity: 1;
	pointer-events: initial;

}

.lightbox-content{
	position: absolute;
	top: 50%;
	left: 50%;
	max-height: calc(100% - 6em);
	max-width: calc(100% - 6em);
	transform: translate(-50%, -50%);
}

.lightbox-back{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.8);
	cursor: pointer;
}


.lightbox-content img {
	max-width: 100%;
	max-height: 100%;
}

.lightbox-content::after{
	content: '\000D7';
	position: absolute;
	top: -2em;
	right: -2em;
	width: 2em;
	height: 2em;
	line-height: 2em;
	text-align: center;
	background-color: whitesmoke;
	box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
	border-radius: 2em;
	pointer-events: none;
}

/* This ensures the content area grows with the grid */
.contentlist {
    display: block; 
    clear: both;
    overflow: auto; /* This is the "magic" fix for footer overlapping */
    padding-bottom: 50px; /* Gives the footer some breathing room */
}

/* Ensure the active content (the grid) is visible and takes up space */
.content.active {
    display: grid; 
}

/* This hides the scrollbar line while still letting the user scroll the page */
.contentlist::-webkit-scrollbar {
    display: none;
}

.contentlist {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.H2 {
    text-align: center; /* This centers the text inside the div */
    width: 100%;        /* Makes the container span the full width */
    margin-bottom: 20px; /* Adds space between the title and the images */
}

.H2 h2 {
    display: inline-block; /* Keeps the title as a block that can be centered */
    margin: 0 auto;
}

.citation-box {
    width: 100%;
    text-align: center; /* Centers the span inside */
    margin-top: 2px;    /* Pulls it closer to the image */
    line-height: 1;     /* Removes extra vertical space */
}

.museum-citation {
    font-size: 9px !important;    /* Makes it very small */
    color: #888;                  /* Light grey */
    font-family: sans-serif;      /* Clean, simple look */
    text-transform: uppercase;    /* Optional: looks like formal metadata */
    letter-spacing: 0.5px;        /* Makes tiny text easier to read */
}