.card--research {
  background-image: url(../../assets/placeholder.png);
  width: 100%;
  height: 370px;
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.card--research:before {
  content: '';
  width: 100%;
  display: block;
  height: 100%;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  transition: opacity 300ms ease;
}

.card--research--title {
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  padding: 0 1rem;
}

.card--research:hover:before {
  opacity: 0.7;
  transition: opacity 300ms ease;
}

.card--research:hover {
  padding: 50px;
  cursor: pointer;
}

.card--research:hover .card--research--title {
  text-align: center;
  width: 100%;
}

.card--research:hover .card--research--logo {
  display: none;
}

.card--research:hover .card--research--description {
  display: block;
  position: relative;
  z-index: 11;
}

.card--research:hover .card--research--title {
  width: 60%;
  text-align: center;
  position: relative;
  z-index: 11;
  font-weight: 400;
  font-size: 1.125rem;
}

.card--research--logo {
  width: 100px;
  height: 100px;
  margin-bottom: 2em;
  position: relative;
  z-index: 11;
}

.card--research--description {
  display: none;
}

.white {
  color: #FFF;
}

.area-1.color-tile {
  border-color: var(--orange);
}

.area-1.color-tile:before {
  background: var(--orange);
}

.area-2.color-tile {
  border-color: var(--dark_green);
}

.area-2.color-tile:before {
  background: var(--dark_green);
}

.area-3.color-tile {
  border-color: var(--light_blue);
}

.area-3.color-tile:before {
  background: var(--light_blue);
}

.area-4.color-tile {
  border-color: var(--purple);
}

.area-4.color-tile:before {
  background: var(--purple);
}

.area-5.color-tile {
  border-color: var(--dark_blue);
}

.area-5.color-tile:before {
  background: var(--dark_blue);
}

.area-6.color-tile {
  border-color: var(--light_green);
}

.area-6.color-tile:before {
  background: var(--light_green);
}