body {
  margin: 0 20px;
  font-family: NewhouseDTCondensed;
  text-align: center;
  font-size: 16px;
}

a {
  color: #333;
}

ul {
  max-width: 1000px;
  margin: 0 auto;
  display: block;
  list-style-type: none;
  padding: 0;
}

.photo-tile {
  position: relative;
  overflow: hidden;
  margin: 3em 0;
}
.photo-tile:before {
  content: "";
  display: block;
  padding-top: 21%;
}
.photo-tile > a {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  text-indent: -9999px;
}
.photo-tile > a:after {
  opacity: 0;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: block;
  transition: opacity 0.25s ease;
}
.photo-tile > a:hover:after {
  opacity: 1;
}
.photo-tile > a, .photo-tile > a:after {
  background-size: cover;
}

.photo-tiles .soundcloud > a {
  background-image: url(./images/top.jpg);
}
.photo-tiles .soundcloud > a:after {
  background-image: url(./images/top_hover.jpg);
}
.photo-tiles .merch > a {
  background-image: url(./images/middle.jpg);
}
.photo-tiles .merch > a:after {
  background-image: url(./images/middle_hover.jpg);
}
.photo-tiles .facebook > a {
  background-image: url(./images/bottom.jpg);
}
.photo-tiles .facebook > a:after {
  background-image: url(./images/bottom_hover.jpg);
}