body, ul, li, h1, h2, a{
  margin: 0;
  padding: 0;
  font-family: tahoma;
  background-color: white;
}

.container{
	Display flex;
	flex-wrap: wrap;
	justify-content: left; /* Distributes space evenly between and around items */
	width: 100%; /* Ensures the container uses full width */
  /* Optional: Add some padding or margin */
  	padding: 10px;	
	}
		
.container figure {
  /* This ensures each item takes up an equal amount of space */
  flex-basis: 30%; /* Gives each figure a base width, leaving room for margins */
  margin: 0 10px; /* Adds horizontal margins between figures */
  position: relative;
 }

/*.container img {
  width: 100%; /* Ensures images fit within their figure container */
  height: auto; /* Maintains aspect ratio */
  /* Optional: set a max height if needed, and use object-fit: cover for uniform image sizes */*/
}

  height: auto; /* Maintains aspect ratio */
  /* Optional: set a max height if needed, and use object-fit: cover for uniform image sizes */
}

.figcaption {
	position: absolute;
	bottom: 0;
 	padding-top: 5px; /* Adds a little space between the image and the caption */
  	font-size: 0.5em;
  	font-weight: 700;
  	 }


/*.container figcaption {
	position: absolute;
	bottom: 0;
 	padding-top: 5px; /* Adds a little space between the image and the caption */
  	font-size: 0.5em;
  	font-weight: 700;
  	color: red;
  	background: blue;
  }*/

. text-align: center;/* spacing */
	margin-right: 20%;
	 }
	
	
.photo-container{  /*this grid layout is not currently used*/
		display: grid;
		margin: auto;
		width: 75%;
  		height: 100%;
  		list-style-type: none;		
		grid-template-columns: 30% 30% 30%;
		grid-template-rows: auto auto auto auto;
		grid-template-areas: 
			". content ."
			"content1 content2 content3"
			" content4 content5 content6"
			"content7 content8 content9";
		gap: 20px; /* Optional: space between grid items*/ 
		background-color: light blue;
		}			

.img{
	display: flex;
	flex-direction: column;
	max-inliine-size:100%;
	/*background-color: red;*/
	}
	
.category{
	text-align: center
	}
/*
.content{					/*.content css not used with flex layout
	grid-area: content;
	aspect-ratio: 3/2;
	width: 300px;
	height: 200px;
	overflow: hidden;
	}

.content1{
	grid-area: content1;
	aspect-ratio: 3/2;	
	width: 300px;
	height: 200px;
	overflow: hidden;
}
.content2{
	grid-area: content2;
	aspect-ratio: 3/2;
	width: 300px;
	height: 200px;
	overflow: hidden;
		}

.content3{
	grid-area: content3;
	aspect-ratio: 3/2;
	width: 300px;
	height: 200px;
	overflow: hidden;
		}
.content4{
	grid-area: content4;
	aspect-ratio: 4/5;
	width: 300px;
	height: 400px;
	overflow: hidden;
	}
	
.content5{
	grid-area: content5;
	aspect-ratio: 4/5;
	width: 300px;
	height: 400px;
	overflow: hidden;
	}

.content6{
	grid-area: content6;
	aspect-ratio: 4/5;
	width: 300px;
	height: 400px;
	overflow: hidden;
	}
	.content7{
	grid-area: content7;
	
	aspect-ratio: 4/5;
	width: 300px;
	height: 400px;
	overflow: hidden;
	}
.content8{
	grid-area: content8;
	
	aspect-ratio: 4/5;
	width: 300px;
	height: 400px;
	overflow: hidden;
	}
.content9{
	grid-area: content9;
	
	aspect-ratio: 4/5;
	width: 350px;
	height: 450px;
	overflow: hidden;
	}

*/
.img-center {  /*centers the image in the block*/
  	margin-left: auto;
  	margin-right: auto;
  /* Optional: adds responsiveness */  
}


/*.trans_img-container{
	width: 300px; /* Set a fixed width */
  	/*height: 200px; /* Set a fixed height */*
  	overflow: hidden; /* Hide the parts of the image that go outside the container 
}*/

.img-container{
	width: 90%; /* Image takes full width of container */
  	height: auto; /* Image takes full height of container */
  	object-fit: cover; /* Ensures the image covers the area nicely */
 	transition: transform 0.3s ease; /* Smooth transition for the zoom effect */
}


.img-container:hover{
	
	transform: scale(1.2); /* Zooms the image by 20% (1.2 times original size) */ 
}