/* Hero section */
.hero-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1600px;
  width: var(--large-screen-width); /* ensures 200px padding on both sides */
  margin: var(--centering); /* centers the container */
  padding: 100px 0;
}

.hero-section h1 {
  font-size: var(--font-size-xxl);
}

.hero-section img {
  width: 850px;
  height: 500px;
  object-fit: cover;
  border-radius: var(--border-radius-medium);
}

/* Exhibiton cards section */
.exhibition-content {
  padding: 100px 0 150px 0;
}

.exhibition-content div {
  display: flex;
  justify-content: center;
  gap: 100px;
}

.margin {
  margin-bottom: 100px;
}

.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 h2 {
  font-size: var(--font-size-ms);
  width: 200px;
  text-align: center;
  margin-top: 20px;
}

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

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

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

.different-width {
  width: 150px !important;
}