.gallery {
  width: var(--content-width);
  height: 20em;
  position: relative;
  margin-bottom: 3em;
}

.gallery .slide {
  width: var(--content-width);
  height: 20em;
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: black;
  background-position: center;
}

.gallery .caption {
  position: absolute;
  top: 33em;
}

.gallery .left-arrow,
.gallery .right-arrow {
  position: absolute;
  top: 0;
  height: 100%;
  width: 50%;
  background-color: transparent;
  color: white;
  display: flex;
  align-items: middle;
  padding: 1em;
}

.gallery .left-arrow svg,
.gallery .right-arrow svg {
  width: 10%;
}

.gallery .left-arrow {
  left: 0;
  justify-content: start;
}

.gallery .right-arrow {
  right: 0;
  justify-content: end;
}

.gallery .right-arrow svg {
  transform: rotate(180deg);
}

.gallery .left-arrow:hover {
  background: linear-gradient(0.25turn, rgba(0,0,0,0.5), rgba(0,0,0,0));
}

.gallery .right-arrow:hover {
  background: linear-gradient(0.25turn, rgba(0,0,0,0), rgba(0,0,0,0.5));
}