browse-products.scss

* {
  box-sizing: border-box;
}

// body {
//   background: #E8E8E8;
//   font-family: lato;
//   color: #10222B;
// }

h4 {
  font-size: 1.6rem;
  font-weight: 700;
}

.card-wrapper {
  padding: 0 15px;
}

.card {
  max-width: 450px;
  height: 450px;
  background: white;
  margin: 50px auto;
  box-shadow: 0 3px 5px rgba(0,0,0,0.1);
  position: relative;
  overflow: hidden;
  .image-wrapper {
    height: 70%;
    width: 100%;
    overflow: hidden;
    transition: height 100ms ease-out;
  }
  &:hover {
    .image-wrapper {
      height: 35%;
    }
  }
  .content-wrapper {
    padding: 15px;
    .price {
      margin: 10px 0;
      font-weight: 300;
    }
    .description {
      margin: 25px 0 0 0;
      font-size: 1.1rem;
      line-height: 1.5rem;
      // display: none;
      // opacity: 0;
      transition: opacity 200ms ease-out;
      &.show {
        display: block;
        opacity: 1;
      }
    }
    .actions {
      position: absolute;
      bottom: 0;
      left: 0;
      padding: 10px;
      width: 100%;
      background: #fff;
      .button {
        width: 48%;
        margin: 0 1% 0 1%;
        float: left;
      }
    }
  }
}

//Button Styling

.browse-products {
  padding: 10px 15px;
  border: none;
  background: none;
  font-size: 1rem;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: all 100ms linear;
  &.flip {
    perspective: 1000;
  &.flipped {
    transform: rotateX(180deg);
  }
  &.flipper {
  transition: 0.6s;
	transform-style: preserve-3d;
	position: relative;
  }
  }
  &.green-solid {
  border: solid 2px #95AB63;
  color: #fff;
  background: #95AB63;
    &:hover {
      background: #BDD684;
      border: solid 2px #BDD684;
    }
  }
  .backside {
    display: none;
    &.show {
      display: inline-block;
      transform: rotateX(180deg);
    }
  }
  .front.hide {
    display: none;
  }
  &.black-simple {
    border: solid 2px #10222B;
    &:hover {
     background: #10222B;
     color: #fff;
    }
  }
  &.cart {
    &:before {
      display: inline-block;
      content: '\f07a';
      font-family: fontawesome;
      padding: 0 10px 0 0;
    }
    &.added:before {
      content: '\f058';
      transform: rotateX(180deg);
    }
  }
  &.more {
    &:before {
      content: '\f067';
      font-family: fontawesome;
      padding: 0 10px 0 0;
    }
  }
}

.image {
  max-width: 100%;
  height: auto;
}

img {
  width:100%;
  height:100%;
}
// Media Queries

@media (max-width: 768px) {
  .card .image-wrapper {
  height: 55%;
  }
 .card .content-wrapper .actions .button {
    width: 100%;
    float: none;
    margin: 0 0 2% 0;
  }
}