/* Botões posicionados sobre a imagem. Usado na página e na prévia do admin.
   Posição e tamanhos vêm de variáveis (em %, definidas no admin):
   --left/--width relativos à largura da imagem, --top/--height à altura,
   --offset à largura do botão e --font-size à largura da imagem. */
.stage {
  position: relative;
  container-type: inline-size;
}
.stage__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hotspot {
  box-sizing: border-box;
  position: absolute;
  left: calc(var(--left) * 1%);
  top: calc(var(--top) * 1%);
  width: calc(var(--width) * 1%);
  height: calc(var(--height) * 1%);
  display: flex;
  align-items: center;
  padding: 0 1cqw 0 calc(var(--width) * var(--offset) / 100 * 1cqw);
  border-radius: 2.2cqw;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: calc(var(--font-size) * 1cqw);
  font-weight: 700;
  line-height: 1.15;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
.hotspot span { flex: 1; }