.card {  width: 100%;  min-width: 250px;  position: relative; border-radius: 5px;}
.card figure {  width: 100%;}
.card .overflow-wrapper {
  overflow: hidden;  position: relative;}
.card .overflow-wrapper figure {  width: 100%;}
.card .front {
  position: relative;  z-index: 2;  margin: 0 auto;  background-color: white;}
.card .front img {  width: 100%; margin: 0 auto; display: block;}
.card .back {  height: 100%;  position: absolute;  top: 0;  left: 50%;  transform: translateX(-50%);
  padding: 0;  text-align: left;  color: white;  font-weight: 400;}
.rosa .card .back{background: #fb3fb6;}
.azul .card .back{background: #00a1ac;}
.naranja .card .back{background: #f8b133;}
.card .back > * {
  padding: 0 30px;}
.card .back h5 {
  padding-top: 35px;  font-size: 2vw;  line-height: 2.2vw;}
.card .back .title {
  padding-bottom: 0.8vw;  color: #444;}
.card .back .bio {
  padding-bottom: 1vw;  font-size: 18px;  line-height: 30px;}
.fadeIn:hover .front {
  opacity: 0;  transition: opacity 500ms linear;}
.trio .rosa .card{border: 15px solid #fb3fb6;}
.trio .azul .card{border: 15px solid #00a1ac;}
.trio .naranja .card{border: 15px solid #f8b133;}
.trio .tercio h2{font-size: 20px; margin-bottom: 10px; font-weight: 300;}
.trio .rosa h2{color: #fb3fb6;}
.trio .azul h2{color: #00a1ac;}
.trio .naranja h2{color: #f8b133;}