.grid {
    width: 98%; 
    margin: 0 auto;
}

.grid-item {
    width: 30%;
    margin-bottom: 10px;
}

.grid-item img {
    width: 100%;
    display: block;
}

.grid-sizer {
    width: 30%;
}


/**
* Base styles
*/
.imageContainer {
    font: 100% / 1.414 "Poiret One", "Roboto", sans-serif;
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  

  
  /**
  * Button component
  */
  .imgBtn {
    position: relative;
    top: 0;
    margin-top: 50%;
    opacity: 0;
    font-size: 1rem;
    color: #fff;
    border-radius: 2.1875rem;
    transform: translateY(-50%);
    transition: all .25s ease-in-out;
  }
  
  .imgBtn:focus,
  .imgBtn:hover {
    color: #111;
    background-color: #fff;
    border-color: #fff;
  }
  
  /**
  * Grid styles
  */
  .item__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(17, 17, 17, 0.45);
    transition: background-color .55s ease-in-out;
  }
  
  .item__overlay:focus,
  .item__overlay:hover {
    background-color: rgba(17, 17, 17, 0.05);
  }
  
  .item__overlay:focus > button,
  .item__overlay:hover > button {
    opacity: 1;
  }
  
  .grid__sizer,
  .grid__item {
    position: relative;
    width: 20%;
    min-width: 16.25rem;
  }
  
  .grid__item {
    margin-bottom: .9375rem;
    border-radius: 0.25rem;
    overflow: hidden;
  }
  
  .grid__item--high,
  .grid__item--high img {
    height: 30rem;
  }
  
  .photoImg {
    width: 100%;
    max-width: 100%;
    height: auto;
  }
  
  /**
  * Link styles
  */
  a,
  .fa {
    color: #bbb;
    transition: color .25s ease-in-out;
  }
  
  a:focus,
  a:hover,
  .fa:focus,
  .fa:hover {
    text-decoration: none;
    color: #666;
  }
  
  .active .fa {
    color: #f62459;
  }