.slider {
  display: flex;
  position: relative;
  justify-content: center;
  -webkit-justify-content: center;
  height: 550px;
  width: 810px;
}

.slides {
  display: flex;
  align-items: center;
  -webkit-align-items: center;
}

.slider img {
  display: none;
  object-fit: contain;
  width: 100%;
  height: 100%;
}

img.displaySlide {
  display: block;
  animation: fade;
  animation-duration: 1500ms;
}

@keyframes fade {
  from {
    opacity: 0.5;
  }
  to {
    opacity: 1;
  }
}