html {
  scroll-behavior: smooth;
  overflow: hidden; }

body {
  margin: 0;
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center; }

#elm {
  overflow: visible;
  font-size: 0;
  white-space: nowrap; }

.item {
  display: inline-block;
  width: 340px;
  height: 200px;
  -webkit-transition: -webkit-transform 160ms ease, -webkit-filter 40ms ease;
  transition: -webkit-transform 160ms ease, -webkit-filter 40ms ease;
  -o-transition: transform 160ms ease, filter 40ms ease;
  transition: transform 160ms ease, filter 40ms ease;
  transition: transform 160ms ease, filter 40ms ease, -webkit-transform 160ms ease, -webkit-filter 40ms ease;
  padding: 2rem;
  border-radius: 0.5rem; }
  .item:not(:last-of-type) {
    margin-right: 1rem; }
  .item.active {
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05); }

.before {
  -webkit-transform: translateX(-0.5rem);
  -ms-transform: translateX(-0.5rem);
  transform: translateX(-0.5rem); }

.after {
  -webkit-transform: translateX(0.5rem);
  -ms-transform: translateX(0.5rem);
  transform: translateX(0.5rem); }

.color1 {
  background-color: #e1cd6d; }

.color2 {
  background-color: #87b8c2; }

.color3 {
  background-color: #b1748f; }

.color4 {
  background-color: #e46f57; }