/********** CREATIVE PROCESS ***********/

.creative-process {
  display:flex;
}
.creative-process ul {
  display:grid;
  grid-template-columns: 1fr; 
  grid-template-rows:auto;
  gap:1em;
  margin:0;
  padding:0;
}
.creative-process ul li {
  display:flex;
  flex-wrap:wrap;
  flex-direction:column;
  border:solid 1px #233347;
}
.cp-title {
  background-color:#287CB3;
  display:flex;
  justify-content: center;
  align-items: center;
  padding:0 1em;
  position:relative;
  min-height: 80px;
}
.cp-title:before {
  content:"";
  background-color:#233347;
  position:absolute;
  width:60px;
  height:80px;
  top:0;
  left:0;
}
.cp-title h3 {
  color:#fff;
  font-size:24px;
  margin:0;
}
.cp-desc {
display:flex;
flex-wrap:wrap;
justify-content: center;
align-items: center;
padding:1em;
}

/** ICONS **/

.meeting:before,
.research:before,
.sketch:before,
.concepts:before,
.presentation:before,
.amendments:before,
.sign-off:before,
.launch:before {
    background-size:32px;
    background-position:center;
    background-repeat:no-repeat;
} 




.meeting:before {
    background-image:url(../images/icons/meeting.svg);
} 
.research:before {
    background-image:url(../images/icons/research.svg);
} 
.sketch:before {
    background-image:url(../images/icons/sketch.svg);
} 
.concepts:before {
    background-image:url(../images/icons/concepts.svg);
} 
.presentation:before {
    background-image:url(../images/icons/presentation.svg);
} 
.amendments:before {
    background-image:url(../images/icons/amendments.svg);
} 
.sign-off:before {
    background-image:url(../images/icons/sign-off.svg);
} 
.launch:before {
    background-image:url(../images/icons/launch.svg);
} 


@media screen and (min-width: 640px) {

  .creative-process ul {
    grid-template-columns: 1fr 1fr; 
    gap:1.75em;
  }
  .creative-process ul li {
    position:relative;
  }

}

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

  .creative-process ul {
    grid-template-columns: 1fr 1fr 1fr; 
    gap:1.75em 2.5em;
    
  }
  .creative-process ul li:before {
    content: "";
    width: 2.6em;
    height: 5px;
    position: absolute;
    right: -42px;
    top: 50%;
    background-color: orange;
}
.creative-process ul li:nth-child(3n):before, .creative-process ul li:last-of-type:before {
  content: "";
  width: 0;
    height: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.creative-process ul li {
border-right:solid 2px orange;
}
.creative-process ul li:nth-child(3n), .creative-process ul li:last-of-type  {
  border-right:solid 1px #233347;
  }

}