.malcom.archive-single {

  width: 32.5%;
  float: left;

  background-size: cover;
  background-position: center center;

  position: relative;

  height: 350px;

  margin-bottom: 1.25%;

}

.archive-container a:nth-of-type( 3n-1 ) .malcom.archive-single {

  margin-left: 1.25%;
  margin-right: 1.25%;

}

.malcom.archive-single .image {

  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;

  filter: grayscale( 100% );
  -webkit-filter: grayscale( 100% );

  z-index: 0;

  transition: 300ms;

}

.malcom.archive-single .color-overlay {

  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;

  z-index: 1;

}

.malcom.archive-single .overlay {

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX( -50% ) translateY( -50% );
  -webkit-transform: translateX( -50% ) translateY( -50% );

  text-align: center;

  width: 80%;

  z-index: 2;

}

.malcom.archive-single .overlay h2 {

  text-transform: uppercase;

}

.malcom.archive-single .overlay .button {

  padding: 15px;
  text-align: center;
  width: 65%;
  margin: 10px auto;
  margin-top: 15px;

  text-transform: uppercase;

  transition: 300ms;

}

.malcom.archive-single:hover .image {

  filter: grayscale( 10% );
  -webkit-filter: grayscale( 10% );

}

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

  .malcom.archive-single {

    width: 45%;

  }

  .archive-container a:nth-of-type( 3n-1 ) .malcom.archive-single {

    margin-left: auto;
    margin-right: auto;

  }

  .archive-container a:nth-of-type( 2n-1 ) .malcom.archive-single {

    margin-right: .5%;
    margin-left: 4.5%;

  }

  .archive-container a:nth-of-type( 2n ) .malcom.archive-single {

    margin-left: .5%;
    margin-right: 4.5%;

  }

}

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

  .archive-container a .malcom.archive-single {

    width: 99%!important;
    margin-left: .5%!important;
    margin-right: .5%!important;

  }

}