link(href="https://fonts.googleapis.com/css?family=Macondo+Swash+Caps" rel="stylesheet")

.card
  .card__img-wrapper
    img.card__img(src="https://i.pinimg.com/originals/69/59/fa/6959fa736605235642d0f057e6cf9795.jpg")
  p.card__title Forest Road

*{
  padding: 0;
  margin: 0;
  will-change: transform;
}

body {
  background: linear-gradient(to bottom, #355c7d, #6c5b7b, #c06c84);
  display: flex;
  flex-flow: row;
  height: 100vh;
  perspective: 1000px;
  transform-style: preserve-3d;
  overflow: hidden;
  font-family: 'Macondo Swash Caps', cursive;
}

.card {
  margin: auto;
  position: relative;
  $self: &;
 
  &__img-wrapper {
    border-radius: 15px;
    width: 300px;
    height: 450px;
    background: transparent;
    overflow: hidden;
  }
  
  &__img {
    display: block;
    margin: -20% 0 0 -20%;
    width: 140%;
    height: 140%;
    object-fit: cover;
    backface-visible: hidden;
    vertical-align: middle;
  }
  
  &__title {
    position: absolute;
    bottom: 0;
    color: #fff;
    padding: 5px;
    font-size: 30px;
    width: 100%;
    transition: all .3s ease;
    cursor: default;
    background: transparent;
    transition: all .3s ease;
  }
}