body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.slider-container {
  width: 90%;
  height: 80%;
  overflow: hidden;
  position: relative;
}

.slider {
  display: flex;
  width: calc(300% + 60px); /* 3 slides and 20px gap between them */
  transition: transform 0.5s ease-in-out;
}

.slide {
  width: calc(33.3333% - 40px); /* minus gap */
  height: 100%;
  margin: 0 20px; /* gap */
  background-color: #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2em;
}