.slider {
display:grid;
 grid-column: 2;
 grid-row: 1;
}

.slider .slide {
 grid-column: 1;
 grid-row: 1;
 background-size: cover;
 background-position: center;
 animation: slider 17.5s infinite;
}

.slider .slide:nth-child(1) {
   background-image: url(/content/pic1.png);
   animation-delay: 0s;
}

.slider .slide:nth-child(2) {
   background-image: url(/content/pic6.png);
   animation-delay: -3.5s;
}

.slider .slide:nth-child(3) {
   background-image: url(/content/pic3.png);
   animation-delay: -7s;
}

.slider .slide:nth-child(4) {
   background-image: url(/content/pic4.png);
   animation-delay: -10.5s;
}

.slider .slide:nth-child(5) {
   background-image: url(/content/pic5.png);
   animation-delay: -14s;
}


@keyframes slider {
  0%, 17%, 100% {
    opacity: 1;
    animation-timing-function: ease;
    z-index: 0;
  }
  20% {
    opacity: 0;
    animation-timing-function: step-end;
    z-index: 0;
  }
  97% {
    opacity: 1;
    animation-timing-function: step-end;
    z-index: -1;
  }
}

@media screen and (max-width: 860px) {

  .slider {
    grid-column:1;
    grid-row: 2;
    height:400px;
    width:100%;
    max-width:400px;
    justify-self:center;
    margin-bottom:20px;
  }