.fullscreen {
   z-index: 3;
   background: rgba(0, 0, 0, 0.8);
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   display: none;
   justify-content: center;
   transition: display 1s linear;
   opacity: 0;
}

.arrow-left {
   width: 0;
   height: 0;
   border-top: 10px solid transparent;
   border-bottom: 10px solid transparent;
   border-right: 10px solid white;
}

.arrow-right {
   width: 0;
   height: 0;
   border-top: 10px solid transparent;
   border-bottom: 10px solid transparent;
   border-left: 10px solid white;
}

.slideButton {
   width: 70px;
}

.fullscreen_show {
   opacity: 1;
   display: flex;
   backdrop-filter: blur(10px);
}

.fullscreen-content {
   display: grid;
   /* grid-template-rows: 1fr 150px; */
   grid-template-rows: repeat(2fr, auto);
   grid-template-columns: 1fr;
   row-gap: 20px;
   justify-items: center;
}

.fullscreen-content-image {
   align-self: center;
   grid-row: 1 / 2;
   grid-column: 1 / 2;
   justify-items: center;
   align-items: center;
   position: relative;
}

.fullscreen-content-image-img {
   margin: 0;
   position: relative;
   max-width: 100%;
   height: auto;
   max-height: 720px;
}

.fullscreen-controls {
   align-self: end;
   justify-self: center;
   grid-row: 2 / 3;
   grid-column: 1 / 2;
   display: flex;
   gap: 20px;
}

.fullscreen-closeButton {
   background: rgba(45, 55, 61, 1);
   width: 70px;
}

@media screen and (max-width: 1000px) {
   .fullscreen-content {
   }

   .fullscreen-img {
   }
}

@media screen and (max-width: 1400px) {
   .fullscreen-content {
      display: grid;
      grid-template-rows: 1fr;
      grid-template-columns: 100%;
   }

   .fullscreen-controls {
      display: none;
   }
}