:root {
  --gutter: 20px;
}

.app {
  padding: var(--gutter) 0;
  display: grid;
  grid-gap: var(--gutter) 0;
  grid-template-columns: var(--gutter) 1fr var(--gutter);
  align-content: start;
}

.app {
    width: 94%;
    margin-left: auto;
    margin-right: auto;
    max-width: 1400px;
}

.app > * {
  grid-column: 2 / -2;
}

.app > .full {
  grid-column: 1 / -1;
}

.hs {
  display: grid;
  grid-gap: calc(var(--gutter) / 4);
  grid-template-columns: 10px;
  grid-template-rows: minmax(150px, 1fr);
  grid-auto-flow: column;
/*  grid-auto-columns: calc(50% - var(--gutter) * 2); */
  grid-auto-columns: calc(25% - var(--gutter) * 2);

  overflow-x: scroll;
  scroll-snap-type: x proximity;
  padding-bottom: calc(.75 * var(--gutter));
  margin-bottom: calc(-.25 * var(--gutter));
}

.hs:before,
.hs:after {
  content: '';
  width: 10px;
}


/* Demo styles */

/* html,
body {
  height: 100%;
}

body {
  display: grid;
  place-items: center;
}
*/

.app ul {
  list-style: none;
  padding: 0;
}

.app {
/*   width: 375px;
  height: 667px;  */
  overflow-y: hidden;
}

.hs > li,
.item {
  scroll-snap-align: center;
 /* padding: calc(var(--gutter) / 2 * 1.5); */
  padding: calc(var(--gutter) / 2 * 1.5);
  display: flex;
  flex-direction: column;
  justify-content: top;
  align-items: center;
  text-align: center;
  background: #fff;
}
.item img {
    width: 85%;
	margin-bottom: 10px;
}



.no-scrollbar {
  scrollbar-width: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}


/*---- MEDIA QUERIES ----*/

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

	.hs {
	  grid-auto-columns: calc(50% - var(--gutter) * 2); 
	}
	
	
}


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

	.hs {
	  grid-auto-columns: calc(70% - var(--gutter) * 1); 
	}
	
	
}