.hero-visual {
  flex: 1 1 45%;
  position: relative;
  height: 480px;
  /* 右側不外溢，避免放大字級時圖片被側邊欄壓住 */
  margin: -50px 0 -50px -50px;
}

.hero-visual > img {
  /* 不用 mask / -webkit-mask 簡寫：iPad Safari 會把 mask 當成 mask-border，遮罩會消失 */
  -webkit-mask-image: url("../../assets/logo-mask.webp");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-source-type: luminance;
  mask-image: url("../../assets/logo-mask.webp");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  mask-mode: luminance;
  max-width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.hero-visual.is-empty {
  display: none;
}

@media (max-width: 860px) {
  .hero-visual {
    height: 280px;
    margin: 0;
    align-self: stretch;
    max-width: none;
  }
}

@media (max-width: 599px) {
  .hero-visual {
    height: 220px;
  }
}