/* Each 2:1 frame shows one quadrant of the transparent 2×2 board sheet. */
.sponsor-board {
  position: absolute;
  z-index: 2;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}
.sponsor-board__sheet {
  display: block;
  width: 200%;
  height: 200%;
  max-width: none;
  pointer-events: none;
  object-fit: fill;
}
.sponsor-board__sheet--top-right { transform: translateX(-50%); }
.sponsor-board__sheet--bottom-left { transform: translateY(-50%); }
.sponsor-board__sheet--bottom-right { transform: translate(-50%, -50%); }

.sponsor-board--rear { width: 158px; bottom: 94px; }
.sponsor-board--front { width: min(222px, calc(50% - 108px)); bottom: 16px; }
.sponsor-board--rear.sponsor-board--left { right: calc(50% + 85px); }
.sponsor-board--rear.sponsor-board--right { left: calc(50% + 85px); }
.sponsor-board--front.sponsor-board--left { right: calc(50% + 106px); }
.sponsor-board--front.sponsor-board--right { left: calc(50% + 106px); }

.sponsor-board--link {
  pointer-events: auto;
  cursor: pointer;
  color: #175840;
  border-radius: 6px;
}
.sponsor-board--link:focus-visible {
  outline: 3px solid #efa929;
  outline-offset: -3px;
}
.sponsor-board__link-hint {
  position: absolute;
  right: 8%;
  bottom: 16%;
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #fffffff0;
  box-shadow: 0 1px 3px #173d3426;
  font: 700 13px/1 sans-serif;
  pointer-events: none;
}
.sponsor-board--link:hover .sponsor-board__link-hint {
  color: white;
  background: #175840;
}

@media (max-width: 1000px) {
  .sponsor-board--rear { width: 150px; bottom: 94px; }
  .sponsor-board--front { width: min(222px, calc(50% - 86px)); bottom: 16px; }
  .sponsor-board--rear.sponsor-board--left { right: calc(50% + 85px); }
  .sponsor-board--rear.sponsor-board--right { left: calc(50% + 85px); }
  .sponsor-board--front.sponsor-board--left { right: calc(50% + 84px); }
  .sponsor-board--front.sponsor-board--right { left: calc(50% + 84px); }
}

@media (max-width: 640px) {
  .sponsor-board--rear { width: 102px; bottom: 80px; }
  .sponsor-board--front { width: 134px; bottom: 20px; }
  .sponsor-board--rear.sponsor-board--left { right: calc(50% + 42px); }
  .sponsor-board--rear.sponsor-board--right { left: calc(50% + 42px); }
  .sponsor-board--front.sponsor-board--left { right: calc(50% + 10px); }
  .sponsor-board--front.sponsor-board--right { left: calc(50% + 10px); }
  .sponsor-board__link-hint { width: 14px; height: 14px; font-size: 11px; }
}

@media (max-width: 365px) {
  .sponsor-board--rear { bottom: 70px; }
}