/* User-supplied front page photography. Keep the original frames without mirroring the buildings. */
.front-page .pc-bg--hero,
.front-page .sp-hero-bg { object-fit: cover; object-position: center; }
.front-page .about-photo > img:first-child,
.front-page .about-sp-photo > img:first-child {
  object-fit: cover;
  object-position: center;
  transform: none;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.front-page .about-photo > img:first-child {
  -webkit-mask-image: url('../images/frontpage/intro-photo-mask-pc.webp');
  mask-image: url('../images/frontpage/intro-photo-mask-pc.webp');
}
.front-page .about-sp-photo > img:first-child {
  -webkit-mask-image: url('../images/frontpage/intro-photo-mask-sp.webp');
  mask-image: url('../images/frontpage/intro-photo-mask-sp.webp');
}
.front-page .feature-card > img[src$='/market-closure-card.webp'] {
  object-fit: cover;
  filter: brightness(.65);
  -webkit-mask-image: url('../images/frontpage/market-closure-mask-pc.webp');
  mask-image: url('../images/frontpage/market-closure-mask-pc.webp');
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.front-page .hero-pagination { z-index: 5; pointer-events: auto; }
.front-page .hero-pagination button {
  position: relative;
  display: block;
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--blue);
  cursor: pointer;
}
.front-page .hero-pagination button::before { content: ''; position: absolute; inset: -10px; }
.front-page .hero-pagination button[aria-pressed='true'] { background: var(--navy); }
.front-page .hero-pagination button:focus-visible { outline: 2px solid var(--navy); outline-offset: 5px; }
.front-page .hero-pagination button:hover { background: var(--navy); }
@media (max-width: 699px) {
  .front-page .hero-pagination button { width: 14px; height: 14px; flex-basis: 14px; }
  .front-page .feature-card > img[src$='/market-closure-card.webp'] {
    -webkit-mask-image: url('../images/frontpage/market-closure-mask-sp.webp');
    mask-image: url('../images/frontpage/market-closure-mask-sp.webp');
  }
}