html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
}

html {
  background: #fff;
}

body {
  overflow-x: hidden;
  background: #fff;
}

.page {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  display: block;
}

.artwork {
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding: 0;
  line-height: 0;
  overflow: hidden;
}

.artwork > img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  user-select: none;
  -webkit-user-drag: none;
}

/*
 * Zrzut ma 1728 × 900 px.
 *
 * Główna sekcja inwestycji zaczyna się na ok. 123 px
 * i kończy na ok. 723 px.
 *
 * Lewa połowa: Ziębice
 * Prawa połowa: Jaworek / Ząbkowice Śląskie
 */
.investment {
  position: absolute;
  top: 13.6667%;
  height: 66.6667%;
  width: 50%;
  display: block;
  z-index: 10;
  cursor: pointer;
  background: rgba(0, 0, 0, 0);
  transition: background-color 280ms ease;
}

/* Delikatne przyciemnienie wyłącznie podczas hover */
.investment:hover {
  background: rgba(0, 0, 0, 0.28);
}

.investment-left {
  left: 0;
}

.investment-right {
  right: 0;
}

/*
 * Przyciski z oryginalnego projektu pozostają częścią obrazu,
 * więc cały panel jest klikalny. Dzięki temu użytkownik może
 * kliknąć również nazwę inwestycji lub dowolne miejsce panelu.
 */

/* Na urządzeniach dotykowych nie wymuszamy efektu hover. */
@media (hover: none) {
  .investment:hover {
    background: transparent;
  }
}

/* Zachowanie bez odstępu również przy bardzo małych ekranach. */
@media (max-width: 600px) {
  .artwork {
    width: 100%;
  }

  .investment {
    top: 13.6667%;
    height: 66.6667%;
  }
}