.list {
  display: flex;
  overflow-x: scroll;
  padding: 20px;
  list-style-type: none;

  /* prevent accidentally going back or triggering other swipe events */
  overscroll-behavior: contain;

  /* hide scroll bar */
  scrollbar-width: none;
  -ms-overflow-style: none;

  /* momentum scroll on iOS */
  -webkit-overflow-scrolling: touch;

  /* disbable vertical scroll for touch */
  /* touch-action: pan-x; */
}

/* hide scroll bar */
.list::-webkit-scrollbar {
  display: none;
}

.itemzscroll {
  height: 500px;
  width: auto;
  flex-shrink: 0;
}

/* Portrait and Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) {
  .itemzscroll {
    max-width: 100%;
    height: 30%;
  }
}
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) {
  .itemzscroll {
    max-width: 25%;
    height: 25%;
  }
}

.itemzscroll:not(:last-child) {
  margin-right: 10px;
}

/* hacky fix for padding at the end of the list */
.itemzscroll:last-child {
  position: relative;
}

.itemzscroll:last-child::after {
  position: absolute;
  left: 100%;
  height: 1px;
  width: 20px;
  display: block;
  content: "";
}