body {
  background-color: var(--primary-light);
}

/* Header */
.navigation {
  background-color: var(--secondary-color);
}

nav ul a,
.header-icons > * {
  color: var(--primary-light);
}

.search-input {
  outline: none;
}

/* Shared layout */
.hero-container,
.explore-container,
.special-events-section {
  max-width: 1600px;
  width: var(--large-screen-width); /* ensures 200px padding on both sides */
  margin: var(--centering); /* centers the container */
  padding: 150px 0;
}

/* Hero section */
.hero-section {
  background-image: url(../images/home/hero-background.png);
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  width: var(--scalable-width);
}

.hero-section img {
  height: 500px;
}

.hero-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 100px 0 370px 0;
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--primary-light);
}

.hero-content > * {
  margin-bottom: 30px;
}

.hero-content h1 {
  font-size: var(--font-size-xxl);
  width: 400px;
}

.hero-content p {
  width: 500px;
  font-size: var(--font-size-xs);
}

/* Exhibition Spaces section */
.exhibition-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 150px;
}

.exhibition-section h2 {
  font-size: var(--font-size-xl);
  color: var(--primary-color);
}

.exhibition-content {
  display: flex;
  gap: 100px;
  padding: 100px 0 50px 0;
}

.exhibition-card {
  background-color: var(--primary-color);
  padding: 30px;
  border-radius: var(--border-radius-medium);
  transition: background-color 0.4s ease, transform 0.4s ease;
}

.exhibition-card a {
  color: var(--primary-light);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.exhibition-card h3 {
  font-size: var(--font-size-ms);
  width: 200px;
  text-align: center;
  margin-top: 20px;
}

@media (hover: hover) {
  .exhibition-card:hover {
    background-color: var(--primary-light);
    outline: 2px solid var(--primary-color);
    transform: scale(1.05);
  }

  .exhibition-card:hover h3 {
    color: var(--primary-color);
  }
}

.card-image {
  height: 250px;
  width: 300px;
  object-fit: cover;
  border-radius: var(--border-radius-small);
}

/* Explore section */
.explore-section {
  background-color: var(--primary-color);
}

.explore-container {
  display: flex;
  gap: 50px;
  justify-content: space-between;
}

.explore-container > * {
  color: var(--primary-light);
}

.explore-content {
  max-width: 400px;
}

.explore-content h2 {
  font-size: 110px;
  margin-bottom: 10px;
}

.explore-content section h3,
.card-section h3 {
  font-size: var(--font-size-ms);
  margin-bottom: 5px;
}

.explore-content p {
  margin-bottom: 20px;
}

.read-more {
  color: var(--primary-light);
  font-weight: var(--font-weight-semi-bold);
}

.explore-image {
  flex: 1;
  height: 500px;
  object-fit: cover;
  width: var(--scalable-width);
  border-radius: var(--border-radius-medium);
}

.card-section {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.explore-card {
  width: 400px;
  padding: 35px;
  box-shadow: 5px 5px 20px 0 var(--shadow-color);
  border-radius: var(--border-radius-medium);
  transition: transform 0.4s ease;
}

@media (hover: hover) {
  .explore-card:hover {
    outline: 2px solid var(--primary-light);
    transform: scale(1.05);
  }

  .read-more:hover {
    text-decoration: underline;
  }
}

/* Special Events and Exhibitions section */
.special-events-section {
  display: flex;
  justify-content: space-between;
  gap: 60px;
}

.special-events-section a h4 {
  color: var(--primary-color);
  font-family: "REM", Arial, Helvetica, sans-serif;
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-xxs);
  margin-bottom: 20px;
}

.special-events-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.special-events-content h2 {
  color: var(--primary-color);
  font-size: var(--font-size-lg);
  margin-bottom: 5px;
}

.special-events-content h3 {
  color: var(--secondary-color);
  font-size: var(--font-size-xs);
  margin-bottom: 40px;
}

.professor-image {
  width: var(--scalable-width);
  height: 450px;
  object-fit: cover;
}

.special-events-cards {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.news-card,
.professor-card {
  padding: 35px;
  box-shadow: 5px 5px 20px 0 var(--shadow-color);
  border-radius: var(--border-radius-medium);
  transition: transform 0.4s ease;
}

.professor-image,
.news-card img {
  border-radius: var(--border-radius-small);
}

.news-card img {
  width: 330px;
  height: 200px;
  object-fit: cover;
}

@media (hover: hover) {
  .news-card:hover,
  .professor-card:hover {
    outline: 2px solid var(--primary-color);
    transform: scale(1.05);
  }
}