.gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.375rem;
  filter: blur(3rem);
  width: calc(100% - 3rem);
  height: calc(100% - 3rem);
  overflow-x: hidden;
  overflow-y: scroll;
  transition: 0.625s filter linear, 0.625s -webkit-filter linear;
  -o-transition: 0.625s -o-filter linear;
  -ms-transition: 0.625s -ms-filter linear;  
  -moz-transition: 0.625s -moz-filter linear;
  -moz-transition: 0.625s filter linear;
  -webkit-transition: 0.625s -webkit-filter linear;
}

.gallery__item img {
  width: 100%;
  object-fit: cover;
  aspect-ratio: 16/9;
  cursor: pointer;
}

.preview {
  display: flex;
  position: absolute;
  left: calc(50% - 3.25rem);
  background: var(--color-white);
  box-shadow: var(--shadow-outset);
  transform: rotate(-90deg);
  cursor: pointer;
}

.preview:hover {
  background: var(--color-white-100);
}

.preview--prev {
  bottom: 0;
  padding: 1.25rem 1rem 1.25rem 1.5rem;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

.preview--next {
  top: 0;
  padding: 1.25rem 1.5rem 1.25rem 1rem;
  border-radius: var(--border-radius) 0 0 var(--border-radius);
}
