* { padding: 0; margin: 0; border: 0; box-sizing: border-box; } 

body {
  --section-size: 3;
  --slider-index: 1;
  color:white;
  background-color: #121212;
  background: linear-gradient(0deg, black, #2c2c2c);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 16px;
  height: 100vh;
}

h1 {
  font-size: 3rem;
  margin: 2rem 0;
}

header {
  display: grid;
  justify-items: center;
  padding: 1rem;
  text-align: center;
}

.searchbar {
  display: flex;
  justify-content: center;
}

.searchbox {
  width: 500px;
  padding: 1rem;
}

.carousel-wrap {
  display: grid;
  grid-template-columns: 4vw calc(92vw) 4vw;
  position: relative;
  overflow-x: hidden;
  padding:2rem 0;
  background-color: #343434;
  box-shadow: 5px 5px 15px black;
}

.slider {
  display: flex;
  transition: transform 250ms ease;
}

.slider img {
  /* opacity: 0; */
  flex:0 0 calc(calc(92vw)/var(--section-size));
  min-width: 100px;
  width: 100%;
  padding: 0 .5vw;
  font-size: .9rem;
  transition: transform 200ms ease;
  transform: translateX(-200%);
}

.slide-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
  z-index: 100;
  border: none;
  cursor: pointer;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, .4);
  box-shadow: 0 0 15px black;
}

.slide-btn svg {
  height: 40px;
  pointer-events: none;
  fill: white;
}

.slide-btn:hover {
  background-color: rgb(86, 136, 177);
}

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

  .slider {
    transform: translateX(-100%);
  }

  .carousel-wrap {
    grid-template-columns: 8vw calc(84vw) 8vw;
  }

  .slider img {
    flex:0 0 calc(calc(84vw)/var(--section-size));
  }

}