---

<section class="exhibits" id="exhibits">
  <div class="container">
    <div class="section-head">
      <div>
        <p class="section-label">Популярное</p>
        <h2>Выдающиеся экспонаты</h2>
      </div>

      <a href="#" class="section-link">Смотреть все →</a>
    </div>

    <div class="exhibits__grid">
      <article class="exhibit-card">
        <img src="images/exhibit-1.jpg" alt="Античная ваза">
        <div class="exhibit-card__content">
          <h3>Античная ваза</h3>
          <p>Древняя Греция, V век до н.э.</p>
          <a href="#">Подробнее →</a>
        </div>
      </article>

      <article class="exhibit-card">
        <img src="images/exhibit-2.jpg" alt="Скифское ожерелье">
        <div class="exhibit-card__content">
          <h3>Скифское ожерелье</h3>
          <p>Скифия, IV век до н.э.</p>
          <a href="#">Подробнее →</a>
        </div>
      </article>

      <article class="exhibit-card">
        <img src="images/exhibit-3.jpg" alt="Шлем дружинника">
        <div class="exhibit-card__content">
          <h3>Шлем дружинника</h3>
          <p>Древняя Русь, XI век</p>
          <a href="#">Подробнее →</a>
        </div>
      </article>

      <article class="exhibit-card">
        <img src="images/exhibit-4.jpg" alt="Карманные часы">
        <div class="exhibit-card__content">
          <h3>Карманные часы</h3>
          <p>Европа, XIX век</p>
          <a href="#">Подробнее →</a>
        </div>
      </article>
    </div>
  </div>
</section>

<section class="events" id="events">
  <div class="container events__inner">
    <div class="events__text">
      <p class="section-label">Выставки</p>
      <h2>Текущие выставки</h2>
      <p>
        Временные и постоянные выставки, которые помогут взглянуть
        на историю с новой стороны.
      </p>
      <a href="#" class="btn">Все выставки</a>
    </div>

    <div class="events__cards">
      <article class="event-card">
        <span>до 30 июня</span>
        <img src="images/event-1.jpg" alt="Морские пути">
        <div>
          <h3>Морские пути</h3>
          <p>История навигации и открытия</p>
          <a href="#">Подробнее →</a>
        </div>
      </article>

      <article class="event-card">
        <span>до 15 июля</span>
        <img src="images/event-2.jpg" alt="Москва. Вчера и сегодня">
        <div>
          <h3>Москва. Вчера и сегодня</h3>
          <p>Фотохроника столицы</p>
          <a href="#">Подробнее →</a>
        </div>
      </article>

      <article class="event-card">
        <span>до 1 сентября</span>
        <img src="images/event-3.jpg" alt="Скульптура времени">
        <div>
          <h3>Скульптура времени</h3>
          <p>От античности до модерна</p>
          <a href="#">Подробнее →</a>
        </div>
      </article>
    </div>
  </div>
</section>

<section class="about" id="about">
  <div class="container about__inner">
    <div class="about__image">
      <img src="images/about.jpg" alt="Здание музея">
    </div>

    <div class="about__content">
      <p class="section-label">О музее</p>
      <h2>Сохраняем прошлое для будущего</h2>
      <p>
        Наш музей — это пространство, где история, культура и искусство
        объединяются, чтобы вдохновлять, обучать и напоминать
        о богатом наследии человечества.
      </p>

      <div class="about__features">
        <div>
          <span>▥</span>
          <h3>Богатая коллекция</h3>
          <p>Более 200 000 экспонатов со всего мира</p>
        </div>

        <div>
          <span>♙</span>
          <h3>Образование</h3>
          <p>Экскурсии, лекции и программы для всех возрастов</p>
        </div>

        <div>
          <span>♡</span>
          <h3>Поддержка культуры</h3>
          <p>Сохраняем наследие вместе</p>
        </div>
      </div>
    </div>
  </div>
</section>

/* COMMON SECTIONS */

.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 34px;
}

.section-head h2,
.events h2,
.about h2 {
  font-family: Georgia, serif;
  font-size: clamp(34px, 4vw, 48px);
  font-weight: 400;
  line-height: 1.1;
}

.section-link {
  color: var(--accent-blue);
  font-weight: 700;
}

/* EXHIBITS */

.exhibits {
  padding: 100px 0 90px;
}

.exhibits__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.exhibit-card {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: linear-gradient(180deg, #151922, #0e1118);
  transition: 0.25s;
}

.exhibit-card:hover {
  transform: translateY(-6px);
  border-color: rgba(58, 134, 255, 0.55);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
}

.exhibit-card img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  display: block;
}

.exhibit-card__content {
  padding: 22px;
}

.exhibit-card h3 {
  margin-bottom: 8px;
  font-family: Georgia, serif;
  font-size: 22px;
  font-weight: 400;
}

.exhibit-card p {
  margin-bottom: 16px;
  color: var(--text-secondary);
  font-size: 15px;
}

.exhibit-card a {
  color: var(--accent-blue);
  font-weight: 700;
  font-size: 14px;
}

/* EVENTS */

.events {
  padding: 80px 0;
  background:
    radial-gradient(circle at left, rgba(58, 134, 255, 0.3), transparent 35%),
    linear-gradient(135deg, #071327, #0b1d57 55%, #10131c);
}

.events__inner {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 46px;
  align-items: center;
}

.events__text p:not(.section-label) {
  margin: 22px 0 32px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.events__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.event-card {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: #11151d;
  border: 1px solid var(--border);
}

.event-card span {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  padding: 9px 14px;
  background: var(--gradient);
  font-size: 13px;
  font-weight: 700;
}

.event-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

.event-card div {
  padding: 20px;
}

.event-card h3 {
  margin-bottom: 8px;
  font-family: Georgia, serif;
  font-size: 21px;
  font-weight: 400;
}

.event-card p {
  margin-bottom: 14px;
  color: var(--text-secondary);
  font-size: 14px;
}

.event-card a {
  color: var(--accent-blue);
  font-weight: 700;
  font-size: 14px;
}

/* ABOUT */

.about {
  padding: 100px 0;
  background: #07080c;
}

.about__inner {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 70px;
  align-items: center;
}

.about__image img {
  width: 100%;
  height: 440px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
}

.about__content > p:not(.section-label) {
  max-width: 650px;
  margin-top: 24px;
  color: var(--text-secondary);
  font-size: 17px;
  line-height: 1.7;
}

.about__features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 46px;
}

.about__features span {
  display: block;
  margin-bottom: 18px;
  color: var(--accent-gold);
  font-size: 34px;
}

.about__features h3 {
  margin-bottom: 10px;
  font-size: 17px;
}

.about__features p {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.5;
}

/* ADAPTIVE CONTINUATION */

@media (max-width: 1050px) {
  .exhibits__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .events__inner,
  .about__inner {
    grid-template-columns: 1fr;
  }

  .events__cards {
    grid-template-columns: 1fr;
  }

  .about__features {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .section-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .exhibits {
    padding: 80px 0 70px;
  }

  .exhibits__grid {
    grid-template-columns: 1fr;
  }

  .exhibit-card img {
    height: 230px;
  }

  .events,
  .about {
    padding: 70px 0;
  }

  .about__image img {
    height: 300px;
  }
}