.items {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-gap: 20px;
}

.item {
   display: flex;
   padding-bottom: 56.25%;
   background: #222222;
}

.item--wide {
   grid-column: 1/3;
}


/*--- ScrollFade Specific ---*/

.scrollFade-right {
   opacity: 1;
   pointer-events: all;
   transform: translateX(0);
}

.scrollFade--visible {
   opacity: 1;
   pointer-events: all;
   transform: translateX(0);
}

.scrollFade--hidden-left {
   opacity: 0;
   pointer-events: none;
   transform: translateX(-60px);
}

.scrollFade--hidden-right {
   opacity: 0;
   pointer-events: none;
   transform: translateX(60px);
}

.scrollFade--animate {
   transition: all 0.8s ease-in-out;
}

/*------*/

@media(max-width: 750px) {
   body {
      padding: 0 25px;
   }

   .items {
      grid-template-columns: repeat(1, 1fr);
   }

   .item--wide {
      grid-column: 1;
   }
}


@media(max-width: 576px) {
   .scrollFade--hidden-left {
      opacity: 0;
      pointer-events: none;
      transform: translateX(-20px);
   }

   .scrollFade--hidden-right {
      opacity: 0;
      pointer-events: none;
      transform: translateX(20px);
   }
}