#title {
  font-size: 1.2rem;
  font-weight: 300;
}

.scene {
  width: 300px;
  height: 325px;
  perspective: 300px;
}

.card {
  margin:20px;
  max-height: 325px;
  min-height: 325px;
  max-width: 300px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: auto;
  transition: transform 1s;
  transform-style: preserve-3d;
  position: relative;
}

.card__face {
  position: absolute;
  height: 100%;
  width: 100%;
  backface-visibility: hidden;
}

.card__face--front {
  background: whitesmoke;
  max-height: 325px;
  min-height: 325px;
  max-width: 300px;
}

.card__face--back {
  background: whitesmoke;
  transform: rotateY( 180deg );
  max-height: 325px;
  min-height: 325px;
  max-width: 300px;
}

.card.is-flipped {
  transform: rotateY(180deg);
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.card-image {
  max-height: 180px;
  min-height: 180px;
  display: flex;
  justify-content: center;
  width: auto;
}


.card-title {
font-family: 'Open Sans', sans-serif;
overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.card-title-back {
  max-height: 60px;
  min-height: 60px;
  font-size: 1.4rem;
  font-weight: bold;
  overflow: hidden;
  white-space: normal;
  text-overflow: unset;
  font-family: 'Open Sans', sans-serif;
}

.card-text-back {
  max-height: 225px;
  min-height: 225px;
  max-width: 300px;
  overflow: auto;
  overflow-y: scroll;
  overflow-x: hidden;
  word-wrap: normal;
  white-space: normal;
  font-family: 'Open Sans', sans-serif;
}

.container-outer {
  overflow: hidden;
}

.container-inner {
  white-space: nowrap;
  overflow-x: scroll;
  overflow-y: hidden;
}