html, body {
     margin: 0;
     padding: 0;
     height: 100%;
     background: var(--black);
     overflow: hidden;
}
.slider-container {
     position: relative;
     width: 100%;
     height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
}
.slider-container img {
     max-width: 100%;
     max-height: 100%;
     display: block;
}
.nav-arrow {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     font-size: 3em;
     color: var(--white);
     text-decoration: none;
     padding: 10px;
     cursor: pointer;
     user-select: none;
     z-index: 100;
}
.nav-left {
     left: 20px;
}
.nav-right {
     right: 20px;
}
.nav-arrows {
     display: none;
}
@media (max-width: 768px) {
     .slider-container {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          padding-bottom: 20px;
     }
     .slider-container img {
          width: 100%;
          height: auto;
          max-height: calc(100vh - 80px);
          object-fit: contain;
     }
     .nav-arrow {
          display: none;
     }
     .nav-arrows {
          display: flex;
          justify-content: center;
          align-items: center;
          position: absolute;
          bottom: 50px;
          left: 0;
          right: 0;
     }
     .nav-arrows a {
          font-size: 2.5em;
          margin: 0 20px;
          color: var(--white);
          text-decoration: none;
     }
}
.close-button {
     position: absolute;
     top: 20px;
     left: 20px;
     font-size: 1.5em;
     color: white;
     text-decoration: none;
     z-index: 100;
 }
 
 .close-button:hover {
     color: var(--red);
 }