: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 > * {  grid-column: 2 / -2;}

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

.hs {  display: grid;
  grid-gap: calc(var(--gutter) / 2);
  grid-template-columns: 50px;
  grid-template-rows: minmax(150px, 1fr);
  grid-auto-flow: column;
  /* grid-auto-columns: calc(50% - var(--gutter) * 2); */
  grid-auto-columns: 162px;
  overflow-x: scroll; /* this one enables nice horizontal scrolling */
  /* scroll-snap-type: x proximity; mislim da neki zajebava */
  scroll-snap-type: none;
  padding-bottom: calc(.75 * var(--gutter));
  margin-bottom: calc(-.25 * var(--gutter));}

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

/* .app h2 {
  font-family: 'Sansita',  sans-serif;
  color: black;
} */

.app h2 {
  font-weight: 600;
  font-family: 'Lato',  sans-serif;
  font-size: 1.25rem;
  text-align: center;
  /* padding: 0px 0px 10px 0px; */
  text-transform: uppercase;
  color: #000;
}

.app p {
  font-weight: 500;
  font-family: 'Lato',  sans-serif;
  font-size: 0.875rem;
  text-align: center;
  /* padding: 0px 0px 10px 0px; */
  color: #000;
}

@media (max-width: 420px) {
    .app {  
        width: 420px;
  }
}
.app {  
  width: 100%;
  /* height: 667px; */
  /* background: #DBD0BC; */
  /* overflow-y: scroll;} */
}
.hs > .item {  
  scroll-snap-align: center;
  /* padding: calc(var(--gutter) / 2 * 1.5); */
  padding: 15px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* background: #fff; */
  border-radius: 8px;}

/* li a > * {  width: 50px;
  scroll-snap-align: center;
  padding: calc(var(--gutter) / 2 * 1.5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #fff;
  border-radius: 8px;} */

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

.no-scrollbar::-webkit-scrollbar {  display: none;}