html, body { width: 100%; height: 100%; }

body { margin: 0 }

.box-slides { display: flex; width: 100%; height: 100%; overflow: auto; scroll-snap-type: x mandatory; background-color: antiquewhite; }

@media (orientation: landscape) {
  .slide { width: 100%; height: 100%; flex-shrink: 0; scroll-snap-align: start; background-size: auto 100%; background-repeat: no-repeat; background-position: center;}
}

@media (orientation: portrait) {
  .slide { width: 100%; height: 100%; flex-shrink: 0; scroll-snap-align: start; background-size: 100% auto; background-repeat: no-repeat; background-position: center; }
}