.horus-diaporama{width:100%;}
.horus-diaporama-viewport{position:relative;width:100%;background:#fff;overflow:hidden}
/* Use CSS aspect-ratio for modern browsers */
.horus-diaporama-viewport{aspect-ratio: var(--horus-aspect, 4/3);}
.horus-diaporama-slide{position:absolute;inset:0;margin:auto;max-width:100%;max-height:100%;object-fit:contain;display:none;opacity:0;transition:opacity .35s ease}
.horus-diaporama-slide.active{display:block;opacity:1}
.horus-arrow { 
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   border: none;
   background: rgba(0,0,0,.4);
   color: #fff;
   width: 50px;
   height: 50px; 
   border-radius: 25px; 
   cursor: pointer; 
   user-select: none;
}

.horus-arrow span {
   display: block;
   text-align: center; 
   font-size: 48px; 
   font-weight: 900;
   margin-top: -20px;
   margin-left: -10px;
}
.horus-arrow.left{left:10px}
.horus-arrow.right{right:10px}
.horus-arrow:focus{outline:2px solid rgba(255,255,255,.8)}
@media (hover:hover){
  .horus-arrow:hover{background:rgba(0,0,0,.6)}
}