/* Scss Document */
.grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 340px;
  margin: 0 auto; }
  @media screen and (min-width: 768px) {
    .grid {
      max-width: 1200px; } }

.card {
  position: relative;
  flex: 1 1 100%;
  margin: 31px 0;
  padding: 20px;
  background: white; }
  @media screen and (min-width: 768px) {
    .card {
      flex-basis: calc(33.33% - (62px + 40px));
      margin: 0 31px; } }

.card__thumb {
  overflow: hidden; }

.card__img {
  margin: -20px -20px 0; }
  .card__img img {
    max-width: 100%;
    height: auto;
    border: 0;
    vertical-align: middle;
    box-sizing: border-box; }

.card__desc {
  margin-top: 20px; }

.card__two .card__img {
  padding: 20px; }

.card__one {
  transition: transform .5s; }
  .card__one::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 2s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.15);
    content: '';
    opacity: 0;
    z-index: -1; }
  .card__one:hover, .card__one:focus {
    transform: scale3d(1.006, 1.006, 1); }
    .card__one:hover::after, .card__one:focus::after {
      opacity: 1; }

.card__two::before, .card__two::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: opacity .38s ease-in-out, transform .35s ease-in-out;
  content: '';
  opacity: 0;
  pointer-events: none; }
.card__two::before {
  transform: scale3d(0, 1, 1);
  transform-origin: left top;
  border-top: 1px solid #acacac;
  border-bottom: 1px solid #acacac; }
.card__two::after {
  transform: scale3d(1, 0, 1);
  transform-origin: right top;
  border-right: 1px solid #acacac;
  border-left: 1px solid #acacac; }
.card__two:hover::before, .card__two:hover::after, .card__two:focus::before, .card__two:focus::after {
  transform: scale3d(1, 1, 1);
  opacity: 1; }

.card__three::before, .card__three::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: scale3d(0, 0, 1);
  transition: transform .3s ease-out 0s;
  background: rgba(255, 255, 255, 0.1);
  content: '';
  pointer-events: none; }
.card__three::before {
  transform-origin: left top; }
.card__three::after {
  transform-origin: right bottom; }
.card__three:hover::before, .card__three:hover::after, .card__three:focus::before, .card__three:focus::after {
  transform: scale3d(1, 1, 1); }