/* General Styles */
.centered {
	text-align: center;
  }
  
  .wrapper {
	width: 100%;
	padding: 30px 0;
  }
  
  .container {
	width: 100%;
	max-width: 1200px; /* Ensure it doesn't exceed 1200px */
	margin: 0 auto;
	padding: 0 10px; /* Add padding for responsiveness */
  }
  
  ul.grid-nav {
	list-style: none;
	font-size: 0.85em;
	font-weight: 200;
	text-align: center;
  }
  
  ul.grid-nav li {
	display: inline-block;
  }
  
  ul.grid-nav li a {
	display: inline-block;
	background: #999;
	color: #fff;
	padding: 10px 20px;
	text-decoration: none;
	border-radius: 4px;
  }
  
  ul.grid-nav li a:hover {
	background: #7b0;
  }
  
  ul.grid-nav li a.active {
	background: #333;
  }
  
  /* Image Grids */
  ul.rig {
	list-style: none;
	margin-left: 0; /* Remove negative margin */
	display: flex; /* Flex layout for better control */
	flex-wrap: wrap; /* Allow items to wrap onto new rows */
	gap: 2.5%; /* Add space between items */
  }
  
  ul.rig li {
	flex: 0 1 calc(25% - 2.5%); /* Ensure each item takes up 25% of the container minus the margin */
	margin-bottom: 2.5%; /* Add margin at the bottom */
	background: #fff;
	border: none; /* Remove any border */
	border: none; /* Remove any border */
	font-size: 16px;

	padding: 10px;
	box-sizing: border-box;
  }
  
  /* Image Styling */
  ul.rig li img {
	max-width: 100%; /* Ensure image doesn't overflow */
	height: auto; /* Maintain aspect ratio */
	border-radius: 5px;
	margin-bottom: 10px;
	border: none; /* Remove any border */
  }
  
  ul.rig li h3 {
	margin: 0 0 5px;
  }
  
  ul.rig li p {
	font-size: 0.9em;
	line-height: 1.5em;
	color: #999;
  }
  
  /* Column Specific Layout */
  ul.rig.columns-2 li {
	flex: 0 1 calc(50% - 2.5%); /* Adjust for two columns */
	border: none; /* Remove any border */
  }
  
  ul.rig.columns-3 li {
	flex: 0 1 calc(33.33% - 2.5%); /* Adjust for three columns */
	border: none; /* Remove any border */
  }
  
  ul.rig.columns-4 li {
	flex: 0 1 calc(25% - 2.5%); /* Adjust for four columns */
	border: none; /* Remove any border */
  }
  
  /* Responsive Layout for Smaller Screens */
  @media (max-width: 1199px) {
	.container {
	  width: 100%;
	  padding: 0 10px;
	}
  }
  
  @media (max-width: 768px) {
	ul.rig li {
	  flex: 0 1 calc(50% - 2.5%); /* Two columns layout for medium screens */
	  border: none; /* Remove any border */
	}
  }
  
  @media (max-width: 480px) {
	ul.grid-nav li {
	  display: block;
	  margin: 0 0 5px;
	  border: none; /* Remove any border */
	}
  
	ul.grid-nav li a {
	  display: block;
	  border: none; /* Remove any border */
	}
  
	/* Ensure the images take up the full width on small screens */
	ul.rig li {
	  flex: 0 1 100% !important; /* 100% width for single column on small screens */
	  margin: 0 0 20px;
	  border: none; /* Remove any border */
	}
  
	ul.rig {
	  margin-left: 0;
	}
  }
  

  /* Image Grids */
ul.rig li {
	flex: 0 1 calc(25% - 2.5%);
	margin-bottom: 2.5%;
	background: #fff;
	font-size: 16px;
	padding: 10px;
	display: flex; /* Add flexbox to align items */
	flex-direction: column; /* Stack image and figcaption vertically */
	align-items: center; /* Center the content horizontally */
	justify-content: center; /* Center the content vertically */
	border: none; /* Remove any border */
  }
  
  ul.rig li figcaption {
	text-align: center; /* Ensure the text is centered */
	font-size: 1.2em; /* Adjust the font size */
	color: #333; /* Set the color for the caption */
	margin-top: 5px; /* Add some space between the image and caption */
	border: none; /* Remove any border */
  }