.image-viewer {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       z-index: 1000;
       background-color: rgba(0, 0, 0, 0.8);
       display: flex;
       justify-content: center;
       align-items: center;
   }

   .hidden {
       background-color: rgba(128, 128, 128, 0.39);
       padding: 20px;
       text-align: center;
       display: none;
   }

   .images-in-viewer {
       max-height: 80%;
       max-width: 80%;
   }

   .prev-image,
   .next-image {
       position: absolute;
       background-color: rgba(255, 255, 255, 0.24);
       opacity: 0.5;
       border: none;
       font-size: 2rem;
       cursor: pointer;
   }

   .prev-image:focus,
   .next-image:focus {
       position: absolute;
       background-color: rgba(255, 255, 255, 0.24);
       opacity: 0.5;
       border: none;
       font-size: 2rem;
       cursor: pointer;
   }

   .prev-image {
       left: 10px;
   }

   .next-image {
       right: 10px;
   }

   .prev-image:hover,
   .next-image:hover {
       background-color: rgba(255, 255, 255, 0.8);
   }