* {
  box-sizing: border-box;
}
.wrapper {
  max-width: 1440px;
  margin: 0 auto;
  margin-bottom: 10px;
}

.wrapper > div {
  //border: 2px solid #e5eaef;
  border-radius: 5px;
  background-color: #e5eaef;
  //padding: 1em;
  color: #000;
}

.wrapper > div.bg-red {
  background-color: #ed1b2e;
}

.wrapper > div.bg-red > .blockquote > div.text{
  color: #fff;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  grid-auto-rows: minmax(80px, auto);
}
  .showMobile{
	display: none;
	}
.image {
  width: 100%;
  height: 100%;
  object-fit:cover;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #ed1b2e;
  display: flex;
}

.overlayHover {
  position: relative;
  display: flex;
  justify-content: center;
}
.overlayHover:hover .overlay {
  opacity: 1;
}
.text {
  color: #000;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 30%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-20%, -50%);
  text-align: center;
}

.overlay div.text{
  color: #fff;
}
@media only screen and (min-width: 992px) {
.one {
  grid-column: 1 / 3;
  grid-row: 1;
 }
.two {
  grid-column: 3 / 4;
  grid-row: 1 / 3;
  min-height: 275px;
}
.three {
  grid-column: 4 / 5;
  grid-row: 1;
}
.four {
  grid-column: 5 / 6;
  grid-row: 1;
}
.five {
  grid-column: 1 / 4;
  grid-row: 5 / 7;
  min-height: 300px;
}
.six {
  grid-column: 1 / 2;
  grid-row: 2 / 4;
}
.Seven{
  grid-column: 2;
  grid-row: 2 / 4;
}
.Eight{
  grid-column: 4 / 6;
  grid-row: 2 / 4;
  min-height: 300px;
}
.Nine{
  grid-column: 1 / 3;
  grid-row: 4 / 5;
}
.Ten{
    grid-column: 3;
  grid-row: 3 / 5;
}
.Eleven{
  grid-column: 4 / 5;
  grid-row: 5 / 7;
}
.Eleven-2{
  grid-column: 4 / 6;
  grid-row: 7 / 9;
}
.Twelve{
  grid-column: 4 / 6;
  grid-row: 7 / 9;
}
.Thirteen{
  grid-column: 4 / 6;
  grid-row: 4 ;
  min-height:200px;
}
.Fourteen{
    grid-column: 5 / 6;
  grid-row: 5 / 7;
}
.Fifteen{
  grid-column: 1 / 2;
  grid-row: 8 / 9 ;
  min-height:250px;
}
.Sixteen{
  grid-column: 2 / 4;
  grid-row: 7 / 9;
}
.Steventeen {
    grid-column: 1 / 2;
    grid-row: 7 / 8;
    height: 250px;
  }
.Eighteen {
    grid-column: 2 / 3;
    grid-row: 6;
  }
  .Fifteen-two{
    grid-column: 1;
    grid-row: 7 / 8 ;
    height: 200px;
  }
  .Fifteen-three{
    grid-column: 5/6;
    grid-row: 5 / 7 ;
  }
  .Nine-two{
  grid-column: 2;
  grid-row: 4 / 6;
  }
  .Twelve-two{
    grid-column: 1 / 2;
  grid-row: 5 / 6;
}
.one-2 {
  grid-column: 4 / 5;
  grid-row: 1;
  height: 250px;
 }
.three-2 {
  grid-column: 1 / 3;
  grid-row: 1;
 }
 .six-2 {
  grid-column: 1 / 2;
  grid-row: 2 / 5;
}
.Nine-2{
  grid-column: 2 / 3;
  grid-row: 4 / 5;
}
.Twelve-2{
    grid-column: 2 / 4;
  grid-row: 7 / 9;
}
.Fourteen-2{
    grid-column: 4 / 5;
  grid-row: 5 / 7 ;
}
.Sixteen-2{
  grid-column: 1/2;
  grid-row: 8/9;
  height: 200px;
}
.six-3 {
  grid-column: 1 / 2;
  grid-row: 2 / 5;
}
.Nine-3{
  grid-column: 2 / 3;
  grid-row: 4 / 5;
  height: 300px;
}
.Eleven-3{
    grid-column: 5 / 6;
  grid-row: 5 / 7;
}
.Twelve-3{
    grid-column: 1 / 3;
  grid-row: 7 / 9;
}
.Fourteen-3{
    grid-column: 4 / 6;
  grid-row: 7 / 9;
}
.Fifteen-3{
  grid-column: 4/5;
  grid-row: 5/7;
}
.Sixteen-3{
  grid-column: 3/4;
  grid-row: 7/9;
}
}
@media only screen and (max-width: 991px) {
  .text{
    left: 10%;
    transform: translate(-5%, -50%);
  }
  .wrapper {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(350px, auto);
  }
  .showMobile{
	display: block;
	}
  .text{
    font-size:16px;
  }
  .three-mobile-1 {
    grid-column: 1 / 2;
    grid-row: 1;
  }
  .two-mobile-1 {
    grid-column: 2 / 3;
    grid-row: 1;
  }
  .one-mobile-1 {
    grid-column: 1 / 2;
    grid-row: 2;
   }
  .four-mobile-1 {
    grid-column: 2 / 3;
    grid-row: 2;
  }
  .five-mobile-1 {
    grid-column: 1 / 3;
    grid-row: 3;
  }
  .six-mobile-1 {
    grid-column: 1 / 2;
    grid-row: 4;
  }
  .Seven-mobile-1 {
    grid-column: 2 / 3;
    grid-row: 4;
  }
  .Eight-mobile-1 {
    grid-column: 1 / 2;
    grid-row: 5;
  }
  .Nine-mobile-1 {
    grid-column: 2 / 3;
    grid-row: 5;
  }
  .Ten-mobile-1 {
    grid-column: 1 / 2;
    grid-row: 6;
  }
  .Eleven-mobile-1 {
    grid-column: 2 / 3;
    grid-row: 6;
  }
  .Twelve-mobile-1 {
    grid-column: 1 / 3;
    grid-row: 7;
  }
  .Thirteen-mobile-1 {
    grid-column: 1 / 2;
    grid-row: 8;
    height: 350px;
  }
  .Fourteen-mobile-1 {
    grid-column: 2 / 3;
    grid-row: 8;
  }
  .Fifteen-mobile-1 {
    grid-column: 1 / 3;
    grid-row: 9;
  }
  .Sixteen-mobile-1 {
    grid-column: 1 / 2;
    grid-row: 10;
    height: 350px;
  }
  .Steventeen-mobile-1 {
    grid-column: 2 / 3;
    grid-row: 10;
  }
  .one-mobile-2 {
    grid-column: 1 / 2;
    grid-row: 1;
  }
  .two-mobile-2 {
    grid-column: 2 / 3;
    grid-row: 1;
  }
  .three-mobile-2 {
    grid-column: 1 / 2;
    grid-row: 2;
  }
  .four-mobile-2 {
    grid-column: 2 / 3;
    grid-row: 2;
  }
  .five-mobile-2 {
    grid-column: 1 / 2;
    grid-row: 3;
  }
  .six-mobile-2 {
    grid-column: 2 / 3;
    grid-row: 3;
  }
  .Seven-mobile-2 {
    grid-column: 2 / 3;
    grid-row: 4;
  }
  .Eight-mobile-2 {
    grid-column: 1 / 2;
    grid-row: 4;
  }
  .Nine-mobile-2 {
    grid-column: 1 / 2;
    grid-row: 5;
  }
  .Ten-mobile-2 {
    grid-column: 2 / 3;
    grid-row: 5;
  }
  .Eleven-mobile-2 {
    grid-column: 2 / 3;
    grid-row: 6;
  }
  .Twelve-mobile-2 {
    grid-column: 1 / 2;
    grid-row: 6;
  }
  .Thirteen-mobile-2 {
    grid-column: 1 / 2;
    grid-row: 7;
  }
  .Fourteen-mobile-2 {
    grid-column: 2 / 3;
    grid-row: 7;
  }
  .Fifteen-two-mobile-2 {
    grid-column: 1 / 2;
    grid-row: 8;
    height: 350px;
  }
  .Fifteen-three-mobile-2 {
    grid-column: 2 / 3;
    grid-row: 8;
  }
  .Sixteen-mobile-2 {
    grid-column: 1 / 3;
    grid-row: 9;
  }
  .one-mobile-3 {
    grid-column: 1 / 3;
    grid-row: 1;
  }
  .two-mobile-3 {
    grid-column: 1 / 2;
    grid-row: 2;
    height: 350px;
  }
  .three-mobile-3 {
    grid-column: 2 / 3;
    grid-row: 2;
  }
  .four-mobile-3 {
    grid-column: 2 / 3;
    grid-row: 3;
    height: 350px;
  }
  .five-mobile-3 {
    grid-column: 1 / 2;
    grid-row: 3;
  }
  .six-mobile-3 {
    grid-column: 1 / 2;
    grid-row: 4;
  }
  .Seven-mobile-3 {
    grid-column: 2 / 3;
    grid-row: 4;
  }
  .Eight-mobile-3 {
    grid-column: 2 / 3;
    grid-row: 5;
  }
  .Nine-mobile-3 {
    grid-column: 1 / 2;
    grid-row: 5;
  }
  .Ten-mobile-3 {
    grid-column: 1 / 2;
    grid-row: 6;
    height: 350px;
  }
  .Thirteen-mobile-3 {
    grid-column: 2 / 3;
    grid-row: 6;
  }
  .Eleven-mobile-3 {
    grid-column: 1 / 2;
    grid-row: 7;
  }
  .Twelve-mobile-3 {
    grid-column: 2 / 3;
    grid-row: 7;
  }
  .Fourteen-mobile-3 {
    grid-column: 1 / 3;
    grid-row: 8;
    height: 350px;
  }
  .Fifteen-mobile-3 {
    grid-column: 1 / 2;
    grid-row: 9;
  }
  .Sixteen-mobile-3 {
    grid-column: 2 / 3;
    grid-row: 9;
  }
}

div.overlayHover div.blockquote:before{
    font-family: Georgia, serif;
    color: #ADB3B8;
    position: absolute;
    font-size: 6em;
    line-height: 1;
    top: 10px;
    left: 10px;
    content: "\201C";
}
div.overlayHover div.blockquote:after {
    font-family: Georgia, serif;
    color: #ADB3B8;
    position: absolute;
   /* display: block; don't use this, it raised the quote too high from the bottom - defeated line-height? */
    float:right;
    font-size:6em;
    line-height: 1;
    right:10px;
    bottom:-0.5em;
    content: "\201D";
}

div.overlayHover  div.overlay  div.blockquote:before{
  color: #ED948E;
}

div.overlayHover  div.overlay  div.blockquote:after{
  color: #ED948E;
}

div.bg-red > div.blockquote:before{
  color: #ED948E;
}

div.bg-red > div.blockquote:after{
  color: #ED948E;
}