html, body {
  font-family: Arial, sans-serif; /* Clean and professional font */
  margin: 0; /* Remove default margins */
  padding: 0; /* No padding for full-page layout */
  color: #333; /* Darker text color for default text */
}

header.navigation {
  background-color: #e0e0e0;  /* Light gray background for navigation */
  padding: 1rem 2rem;  /* Padding for navigation content */
  display: flex; /* Arrange elements horizontally */
  justify-content: space-between; /* Distribute items evenly */
  align-items: center; /* Align content vertically */
}

header.navigation h1 {
  font-size: 2rem; /* Adjust title size for navigation */
  margin: 0; /* Remove default margins for title */
}

header.navigation nav {
  margin: 0; /* Remove default margin */
  padding: 0; /* Remove default padding */
}

header.navigation nav ul {
  list-style: none; /* Remove default bullet points */
  padding: 0; /* Remove default padding */
  margin: 0; /* Remove default margin */
  display: flex; /* Arrange list items horizontally */
}

header.navigation nav ul li {
  margin: 0 1rem; /* Spacing between list items */
}

header.navigation nav ul li a {
  text-decoration: none; /* Remove underline from links */
  color: inherit; /* Inherit text color from body */
  transition: all 0.2s ease-in-out; /* Smooth hover effect */
}

header.navigation nav ul li a:hover {
  color: #007bff; /* Blue color on hover for links */
}

.unit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));  /* Adjust column size and number of columns */
  grid-gap: 1rem;  /* Add spacing between grid items */
  text-align: center; /* Center text within grid items */
  margin: auto; /* Center the grid horizontally */
  padding: 2rem;  /* Add some padding for internal content */
}

.unit-grid a {
  text-decoration: none;  /* Remove underline from links */
  color: inherit;  /* Inherit text color */
  display: block;  /* Make the entire area clickable */
  position: relative;  /* Enable positioning for hover effects */
}

.unit-grid a img {
  width: 100%;  /* Make images fill the container */
  height: auto;  /* Maintain image aspect ratio */
  display: block;  /* Make images fill the container */
}

.unit-grid a p {
  position: absolute;  /* Position text for hover effects */
  bottom: 0;  /* Place text at the bottom */
  left: 0; right: 0;  /* Span the full width */
  padding: 1rem;  /* Add padding for text */
  background-color: rgba(0, 0, 0, 0.5);  /* Semi-transparent black background */
  color: #fff;  /* White text color */
  opacity: 0;  /* Initially hide the text */
  transition: opacity 0.2s ease-in-out;  /* Smooth fade on hover */
}

.unit-grid a:hover p {
  opacity: 1;  /* Show text on hover */
}

.card-columns {
  @include media-breakpoint-only(lg) {
    column-count: 4;
  }
  @include media-breakpoint-only(xl) {
    column-count: 5;
  }
}