@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
body {
  background: #e3e3e3;
  font-family: 'Roboto', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

#app {
  filter: drop-shadow(0px 10px 5px rgba(0, 0, 0, 0.1));
}

.card {
  background: white;
  width: 650px;
  -webkit-clip-path: inset(0 0 130px 0);
  clip-path: inset(0 0 130px 0);
  transition: 0.5s all ease;
  transform: translateY(0);
}

.card-image {
  width: 100%;
  height: 400px;
  overflow: hidden;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/845908/sasha.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center 20%;
}
.card-image img {
  width: 100%;
}

.card-details {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 15px;
}
.card-details .card-thumbnail {
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: 100%;
  margin-right: 20px;
}
.card-details .card-thumbnail img {
  width: 100%;
}

.card-detail {
  width: calc(100% - 50px);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card-detail .chevron {
  cursor: pointer;
}
.card-detail .card-name {
  font-size: 20px;
}

.bottom .card-mobile, .bottom .card-email {
  display: flex;
  align-items: center;
  padding: 15px;
}
.bottom .mobile-icon, .bottom .email-icon {
  width: 40px;
  height: 40px;
  margin-right: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bottom .mobile-icon i, .bottom .email-icon i {
  color: #a2a2a2;
}

.contact-type, .email-type, .card-type {
  font-size: 13px;
  color: #a2a2a2;
  margin-top: 3px;
}

.open {
  -webkit-clip-path: inset(0 0 0 0);
  clip-path: inset(0 0 0 0);
  transform: translateY(-50px);
}

@media (max-width: 450px) {
  #app {
    width: 100%;
  }

  .card {
    width: 100%;
  }
}