.card{
  position:relative;
  
  padding:42px 32px;
  
  clip-path: circle(5%);
  transition: all ease-in-out .3s;
  background-color:#ffffff;
  
  &__infoicon{    
    top:10px;
    right:28px;
    
    font-size:1.4em;
    color:#000000;
    transition:ease-out .3s;
  }
  &__title{
    margin:0;
    
    font-size: 3em;
    line-height:1.8;
  }
  &__description{
    margin:0;
    
    font-size: 1.1em;
    line-height:1.6;
  }
  &__credits{
    margin:0;
    padding: 4px 0;
    
    font-size: 1.1em;
  }
  &__reference{
    display:inline-block;
    
    border-bottom: 1px solid transparent;
    color:#0099ff;
    text-decoration:none;
    transition: ease-in .3s;
    &:hover{
      border-bottom-color: #0099ff;
    }
  }
  
  &:hover, &:focus{
    clip-path: circle(75%);
    border-radius:20px;
    box-shadow: 0px 3px 9px rgba(0,0,0,0.12),
                0px 3px 18px rgba(0,0,0,0.08);
    background:#ffffff;
    
    outline:none;
    .card__infoicon{
      opacity: 0;
    }
  }
  &:focus{
    box-shadow: 0px 3px 9px rgba(0,0,0,0.12), 
                0px 3px 18px rgba(0,0,0,0.08), 
                0px 0px 0px 4px rgba(0,0,0,0.2);
  }
}