: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: 10px repeat(var(--total), calc(40% - var(--gutter) * 2)) 10px;
  grid-template-rows: minmax(330px, 1fr);

  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: '';
}


/* Other styles */


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

.app {
  width: 100%;
  height: 400px;
  background: #0C5DB8;
  overflow-y: scroll;
}

.hs > li,
.item {
  scroll-snap-align: center;
  padding: calc(var(--gutter) / 2 * 1.5);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  background: #fff;
  border-radius: 8px;
}

h2 {
	color: #FFFFFF;
	margin: 0;
	width: 200px;
	float: left;
}
.scroll-helper {
	float: right;
	color: #FFFFFF;
	vertical-align: baseline;
}
.scroll-icon {
	width: 24px;
	height: 24px;
	float:right;
	margin-left: 8px;
}

span.date {
	font-size: 38px;
	font-weight: 700;
	margin-bottom: 20px;
}
.item p {
	font-size: 17px;
	font-weight: 400;
	margin-bottom: 0;
}

/* dates */

#date-1 {
	background-image: url(/content/yard1.png);
	background-size: cover;
	background-position: center;
	color: #FFFFFF;
}
#date-2 {
	background-image: url(/content/yard8.jpeg);
	background-size: cover;
	background-position: center;
	color: #FFFFFF;
}
#date-3 {
	background-image: url(/content/copart-goes-nationwide.jpeg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: #FFFFFF;
}
#date-4 {
	background-image: url(/content/1996-website.jpeg);
	background-size: cover;
	background-position: center;
	color: #FFFFFF;
}
#date-5 {
	background-image: url(/content/cas.jpeg);
	background-size: cover;
	background-position: center top;
	color: #FFFFFF;
}
#date-6 {
	background-image: url(/content/vb2-logo.png);
	background-size: cover;
	background-position: center;
	color: #FFFFFF;
}
#date-7 {
	background-image: url(/content/uk2008.jpg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: #FFFFFF;
}
#date-8 {
	background-image: url(/content/open.jpg);
	background-size: cover;
	background-position: bottom;
	background-repeat: no-repeat;
	color: #FFFFFF;
}
#date-9 {
	background-image: url(/content/nascar.jpeg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: #FFFFFF;
}
#date-10 {
	background-image: url(/content/2010.jpeg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: #FFFFFF;
}
#date-11 {
	background-image: url(/content/de.jpg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: #FFFFFF;
}
#date-12 {
	background-image: url(/content/ipad.jpeg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: #FFFFFF;
}
#date-13 {
	background-image: url(/content/bahrain.jpg);
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	color: #FFFFFF;
}
#date-14 {
	background-image: url(/content/crashedtoys-opening.jpg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: #FFFFFF;
}
#date-15 {
	background-image: url(/content/npa.jpeg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: #FFFFFF;
}
#date-16 {
	background-image: url(/content/finland.jpeg);
	background-size: cover;
	background-position: center bottom;
	background-repeat: no-repeat;
	color: #FFFFFF;
}

.item {
	-moz-transition: all .25s linear;
	-webkit-transition: all .25s linear;
	-ms-transition: all .25s linear;
	-o-transition: all .25s linear;
	transition: all .25s linear;
}
.item:hover {
	color: transparent !important;
}
.item span, .item p {
	z-index: 2;
}

.tint {
	position: relative;
	margin-bottom: 20px;
}

.tint:before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(47, 57, 66, .85);
	-moz-transition: all .3s linear;
	-webkit-transition: all .3s linear;
	-ms-transition: all .3s linear;
	-o-transition: all .3s linear;
	transition: all .3s linear;
	border-radius: 8px;
}

.tint:hover:before {
	background: none;
}



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

	.hs {
    grid-template-columns: 10px repeat(var(--total), calc(60% - var(--gutter) * 2)) 10px;
	}

}

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

	.hs {
    grid-template-columns: 10px repeat(var(--total), calc(100% - var(--gutter) * 2)) 10px;
	}

}