:root {
  color-scheme: light;
  background: #f6fbff;
}

* {
  box-sizing: border-box;
}

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

body {
  display: grid;
  place-items: center;
  background: #f6fbff;
  font-family: Arial, Helvetica, sans-serif;
}

.page {
  width: 100%;
}

.poster {
  position: relative;
  width: min(100vw, 1536px);
  margin: 0 auto;
}

.poster img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
}

.hotspot {
  position: absolute;
  display: block;
  border-radius: 14px;
  cursor: pointer;
  outline-offset: 4px;
}

.hotspot:focus-visible {
  outline: 3px solid rgba(0, 151, 169, 0.65);
}

.hotspot-shop {
  left: 5.66%;
  top: 69.34%;
  width: 22.4%;
  height: 8.79%;
}

.hotspot-community {
  left: 29.04%;
  top: 69.34%;
  width: 23.37%;
  height: 8.79%;
}

@media (max-width: 767px) {
  body {
    align-items: start;
  }

  .poster {
    width: min(100vw, 852px);
  }

  .hotspot {
    border-radius: 16px;
  }

  .hotspot-shop {
    left: 6.34%;
    top: 63.56%;
    width: 87.32%;
    height: 7.15%;
  }

  .hotspot-community {
    left: 6.34%;
    top: 71.58%;
    width: 87.32%;
    height: 7.04%;
  }
}