.hero-arrow{
  position:absolute;
  z-index:8;
  top:calc(50% - 38px);
  width:48px;
  height:48px;
  padding:0;
  display:grid!important;
  place-items:center;
  border:1px solid rgba(255,255,255,.28);
  border-radius:50%;
  background:rgba(3,49,39,.58);
  color:#fff;
  box-shadow:0 8px 24px rgba(3,34,27,.16);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  cursor:pointer;
  transition:background-color .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.hero-arrow span{
  font-size:21px;
  line-height:1;
  transform:translateY(-1px);
}
.hero-arrow-prev{left:24px}
.hero-arrow-next{right:24px}
.hero-arrow:hover{
  background:#9a742b;
  border-color:rgba(255,255,255,.55);
  box-shadow:0 10px 28px rgba(3,34,27,.24);
}
.hero-arrow-prev:hover{transform:translateX(-2px)}
.hero-arrow-next:hover{transform:translateX(2px)}
.hero-arrow:focus-visible{
  outline:2px solid #fff;
  outline-offset:3px;
}
@media(max-width:1180px){
  .hero-arrow{width:42px;height:42px}
  .hero-arrow-prev{left:14px}
  .hero-arrow-next{right:14px}
}
@media(max-width:760px){
  .hero-arrow{
    top:190px;
    width:38px;
    height:38px;
    background:rgba(3,49,39,.68);
  }
  .hero-arrow span{font-size:18px}
  .hero-arrow-prev{left:10px}
  .hero-arrow-next{right:10px}
}
@media(prefers-reduced-motion:reduce){
  .hero-arrow{transition:none}
}