.gallery {
  .folders, .images { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; }
  .item { text-align: center; margin-bottom: 12px; font-size: 16pt; }
  .item a:hover { text-decoration: none; }
  .image { margin: 0 6px; height: 100%; background-color: #fff9ef; display: flex; flex-flow: column; }
  .image img { width: 100%; }
  .caption { padding: 6px 8px; flex: 1 1 auto; display: flex; justify-content: center; align-items: center; } 
} 

.carousel { width: 75%; margin: 0 auto; }
.carousel .carousel__slide { width: 55%; padding: 1px; }
.carousel .carousel__slide img { width: 100%; }

.scroll-left, .scroll-right { position: absolute; top: 0; height: 250px; width: 80px; border: 0; background-color: rgba(255,255,255,0.2); color: #fff; }
.scroll-left { left: 0;  }
.scroll-right { right: 0; }

@media only screen and (min-width: 1px) and (max-width: 250px) {
  .gallery .item { width: 99.99999%; }
  .carousel { width: 100%; }
}

@media screen and (min-width: 250px) {
  .gallery .item { width: 49.99999%; }
  .carousel { width: 100%; }
}

@media screen and (min-width: 600px){
  .gallery .item { width: 33.33333%; }
  .carousel { width: 100%; }
}

@media screen and (min-width: 992px){
  .gallery .item { width: 24.99999%; }
  .carousel { width: 75%; margin: 95px auto; }
}