/* Container */
.projcard-container {
  margin-left: auto;
  margin-right: auto;
  width: 90%;
}

.projcard-container,
.projcard-container * {
  box-sizing: border-box;
}

/* Card */
.projcard {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;      /* stretch children */
  position: relative;
  width: 100%;
  margin-bottom: 40px;
  border-radius: 14px;
  background-color: #fff;
  border: 1px solid #e4e7eb;
  font-size: 18px;
  overflow: hidden;
  box-shadow: 0 6px 28px -18px rgba(0,0,0,.45);
  transition: box-shadow .35s ease, transform .35s ease;
}

.projcard:hover {
  box-shadow: 0 18px 38px -20px rgba(0,0,0,.35);
  transform: translateY(-6px);
}

.projcard::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.07;
  border-radius: 14px;
}

/* alternating colours: green first, blue second */
.projcard:nth-child(odd)::before {
  background-image: linear-gradient(-70deg,#40BD00,transparent 50%);
}

.projcard:nth-child(even)::before {
  background-image: linear-gradient(-70deg,#0088FF,transparent 50%);
}

.projcard:nth-child(odd):nth-child(2n)::before {
  background-image: linear-gradient(-250deg,#40BD00,transparent 50%);
}

.projcard:nth-child(even):nth-child(2n)::before {
  background-image: linear-gradient(-250deg,#0088FF,transparent 50%);
}

/* image container to keep image aligned */
.projcard-img-container {
  width: 300px;
  flex-shrink: 0;
  order: 0;
  display: flex;
}

.projcard-img {
  width: 100%;
  height: 100%;      /* fills container height */
  object-fit: cover;
  transition: transform .35s ease;
}

.projcard:hover .projcard-img {
  transform: scale(1.06) rotate(.6deg);
}

/* text */
.projcard-textbox {
  flex: 1;
  padding: 22px 28px;
  line-height: 1.65;
  display: flex;
  flex-direction: column;
  order: 1;
}

/* title & bar */
.projcard-title {
  font-family: 'Voces','Open Sans',arial,sans-serif;
  font-size: 25px;
  color: #2c2c2c;
  margin-bottom: 6px;
  letter-spacing: .2px;
}

.projcard-bar {
  width: 100%;
  height: 5px;
  margin: 14px 0 18px 0;
  border-radius: 5px;
}

.projcard:nth-child(odd) .projcard-bar {
  background-color: #40BD00;
}

.projcard:nth-child(even) .projcard-bar {
  background-color: #0088FF;
}

/* description */
.projcard-description {
  font-size: 15px;
  color: #424242;
}

.projcard-description p {
  margin-bottom: 14px;
}

.projcard-description ul {
  margin: 12px 0 16px 22px;
}

.projcard-description li {
  margin-bottom: 7px;
}

/* mobile stacking 
@media (max-width: 768px) {
  .projcard {
    flex-direction: column;
    align-items: stretch;
  }

  .projcard-img-container {
    width: 100%;
  }

  .projcard-img {
    height: auto;
  }

  .projcard-textbox {
    width: 100%;
    padding: 16px 20px;
  }*/
}