@import url("style.css");

.album{
  position: relative;
  width: 100%;
}

.album-cover {
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
    height: 100%;
    border: 1px solid black;
}

.album-cover img, .album-cover-bw img {
    flex-shrink:0;
    width:100%;
    object-fit: cover;
    height:100%;
}

.album-cover-bw{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
    border: 1px solid black;
}

.album-overlay{
  background: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
  background: -o-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
  background: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height:calc(50% - 1px);
  color: white;
  text-align: center;
  padding-bottom: 5px;
  margin: 0 1px;
}

.album-title{
  position: relative;
  top: 100%;
  transform: translateY(-100%);
  display: inline-block;
  font-size: 16pt;
  font-family: GothamBook;
  padding: 0 5px;
}

.album-date{
  font-family: AvenirBook;
  font-size: 10pt;
}


.album-overlay-wrapper{
  height: 100%;
  width: 100%;
}

* { box-sizing: border-box; }

/* ---- grid ---- */

.grid {
  width: 80%;
  margin: auto;
  padding-top: 100px;
}

/* clearfix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- grid-item ---- */


.grid-item, .grid-sizer { width: 100%; }
.grid-item--width2 { width: 100%;}
.grid-item--width3 { width: 100%;}
.grid-item--width4 { width: 100%;}

@media (min-width: 768px) {
  .grid-item, .grid-sizer { width: 50%;}
  .grid-item--width2 { width: 100%;}
}

@media (min-width: 992px) {
  .grid-item, .grid-sizer { width: 33.33%; }
  .grid-item--width2 { width: 66.67%;}
  .grid-item--width3 { width: 100%;}
}

@media (min-width: 1200px) {
  .grid-item, .grid-sizer { width: 25%; }
  .grid-item--width2 { width: 50%;}
  .grid-item--width3 { width: 75%;}
  .grid-item--width4 { width: 100%;}
}


.grid-item {
  height: 175px;
  float: left;
  padding: 2px;
}

.grid-item--height2 { height: 350px; }