*:before,
*:after {
  box-sizing: border-box;
}


.col {
  padding: 1rem;
}
@media (min-width: 650px) {
  .col {
    width: 50%;
    float: left;
  }
  .col:nth-of-type(2n+1) {
    clear: left;
  }
}

.card {
  display: block;
  text-align: center;
  color: #eeeeee;
}
.card .content {
  padding: 4rem 1rem;
}
.card .title {
  font-size: 1.25rem;
  background-color: gray;
  border-radius: 3px;
  padding: 0.5rem;
}

.card-1 .content {
  background-color: #cab5a2 !important;
  border-radius: 3px;
}
.card-1:before, .card-1:after {
  border-radius: 3px;
}
.card-1:before {
  background-color: #ae8f71 !important;
}
.card-1 .title, .card-1:after {
  background-color: #86694c !important;
}

.card-2 .content {
  background-color: #ceccac !important;
  border-radius: 3px;
}
.card-2:before, .card-2:after {
  border-radius: 3px;
}
.card-2:before {
  background-color: #b2ae7c !important;
}
.card-2 .title, .card-2:after {
  background-color: #8e8a53 !important;
}

.card-3 .content {
  background-color: #cfa4cf !important;
  border-radius: 3px;
}
.card-3:before, .card-3:after {
  border-radius: 3px;
}
.card-3:before {
  background-color: #1dcad3 !important;
}
.card-3 .title, .card-3:after {
  background-color: #1dcad3 !important;
}

.card-4 .content {
  background-color: #ddc9c1 !important;
  border-radius: 3px;
}
.card-4:before, .card-4:after {
  border-radius: 3px;
}
.card-4:before {
  background-color: #c29e90 !important;
}
.card-4 .title, .card-4:after {
  background-color: #a7735f !important;
}

.card-5 .content {
  background-color: #c8d5d3 !important;
  border-radius: 3px;
}
.card-5:before, .card-5:after {
  border-radius: 3px;
}
.card-5:before {
  background-color: #9db4b0 !important;
}
.card-5 .title, .card-5:after {
  background-color: #72938d !important;
}

.card-6 .content {
  background-color: #e6d9dc !important;
  border-radius: 3px;
}
.card-6:before, .card-6:after {
  border-radius: 3px;
}
.card-6:before {
  background-color: #c7abb1 !important;
}
.card-6 .title, .card-6:after {
  background-color: #a87d86 !important;
}

.card-7 .content {
  background-color: #a7b8ce !important;
  border-radius: 3px;
}
.card-7:before, .card-7:after {
  border-radius: 3px;
}
.card-7:before {
  background-color: #7691b2 !important;
}
.card-7 .title, .card-7:after {
  background-color: #4f6b8d !important;
}

.card-8 .content {
  background-color: #a3c8a9 !important;
  border-radius: 3px;
}
.card-8:before, .card-8:after {
  border-radius: 3px;
}
.card-8:before {
  background-color: #73ac7c !important;
}
.card-8 .title, .card-8:after {
  background-color: #4e8457 !important;
}

.card-9 .content {
  background-color: #dfcecb !important;
  border-radius: 3px;
}
.card-9:before, .card-9:after {
  border-radius: 3px;
}
.card-9:before {
  background-color: #c2a29c !important;
}
.card-9 .title, .card-9:after {
  background-color: #a5766d !important;
}

.card-10 .content {
  background-color: #b3cfa0 !important;
  border-radius: 3px;
}
.card-10:before, .card-10:after {
  border-radius: 3px;
}
.card-10:before {
  background-color: #8bb56d !important;
}
.card-10 .title, .card-10:after {
  background-color: #658e48 !important;
}

[class*='stacked--'] {
  position: relative;
  transition: -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
  will-change: transform;
}
[class*='stacked--']:before, [class*='stacked--']:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: currentColor;
  transition: -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
  will-change: transform;
}
[class*='stacked--']:before {
  z-index: -1;
}
[class*='stacked--']:after {
  z-index: -2;
}

.stacked--left:before, .stacked--left:after {
  -webkit-transform-origin: right center;
          transform-origin: right center;
}
.stacked--left:hover {
  -webkit-transform: translate(-5px, 0);
          transform: translate(-5px, 0);
}
.stacked--left:hover:before {
  -webkit-transform: translate(5px, 0) scale(0.95);
          transform: translate(5px, 0) scale(0.95);
}
.stacked--left:hover:after {
  -webkit-transform: translate(10px, 0) scale(0.9);
          transform: translate(10px, 0) scale(0.9);
}

.stacked--right:before, .stacked--right:after {
  -webkit-transform-origin: left center;
          transform-origin: left center;
}
.stacked--right:hover {
  -webkit-transform: translate(5px, 0);
          transform: translate(5px, 0);
}
.stacked--right:hover:before {
  -webkit-transform: translate(-5px, 0) scale(0.95);
          transform: translate(-5px, 0) scale(0.95);
}
.stacked--right:hover:after {
  -webkit-transform: translate(-10px, 0) scale(0.9);
          transform: translate(-10px, 0) scale(0.9);
}

.stacked--up:before, .stacked--up:after {
  -webkit-transform-origin: center bottom;
          transform-origin: center bottom;
}
.stacked--up:hover {
  -webkit-transform: translate(0, -5px);
          transform: translate(0, -5px);
}
.stacked--up:hover:before {
  -webkit-transform: translate(0, 5px) scale(0.95);
          transform: translate(0, 5px) scale(0.95);
}
.stacked--up:hover:after {
  -webkit-transform: translate(0, 10px) scale(0.9);
          transform: translate(0, 10px) scale(0.9);
}

.stacked--down:before, .stacked--down:after {
  -webkit-transform-origin: center top;
          transform-origin: center top;
}
.stacked--down:hover {
  -webkit-transform: translate(0, 5px);
          transform: translate(0, 5px);
}
.stacked--down:hover:before {
  -webkit-transform: translate(0, -5px) scale(0.95);
          transform: translate(0, -5px) scale(0.95);
}
.stacked--down:hover:after {
  -webkit-transform: translate(0, -10px) scale(0.9);
          transform: translate(0, -10px) scale(0.9);
}

.stacked--up-left:hover {
  -webkit-transform: translate(-5px, -5px);
          transform: translate(-5px, -5px);
}
.stacked--up-left:hover:before {
  -webkit-transform: translate(5px, 5px);
          transform: translate(5px, 5px);
}
.stacked--up-left:hover:after {
  -webkit-transform: translate(10px, 10px);
          transform: translate(10px, 10px);
}

.stacked--up-right:hover {
  -webkit-transform: translate(5px, -5px);
          transform: translate(5px, -5px);
}
.stacked--up-right:hover:before {
  -webkit-transform: translate(-5px, 5px);
          transform: translate(-5px, 5px);
}
.stacked--up-right:hover:after {
  -webkit-transform: translate(-10px, 10px);
          transform: translate(-10px, 10px);
}

.stacked--down-left:hover {
  -webkit-transform: translate(-5px, 5px);
          transform: translate(-5px, 5px);
}
.stacked--down-left:hover:before {
  -webkit-transform: translate(5px, -5px);
          transform: translate(5px, -5px);
}
.stacked--down-left:hover:after {
  -webkit-transform: translate(10px, -10px);
          transform: translate(10px, -10px);
}

.stacked--down-right:hover {
  -webkit-transform: translate(5px, 5px);
          transform: translate(5px, 5px);
}
.stacked--down-right:hover:before {
  -webkit-transform: translate(-5px, -5px);
          transform: translate(-5px, -5px);
}
.stacked--down-right:hover:after {
  -webkit-transform: translate(-10px, -10px);
          transform: translate(-10px, -10px);
}

.stacked--fan-left {
  -webkit-transform-origin: center bottom;
          transform-origin: center bottom;
}
.stacked--fan-left:before, .stacked--fan-left:after {
  -webkit-transform-origin: center bottom;
          transform-origin: center bottom;
}
.stacked--fan-left:hover {
  -webkit-transform: translate(-2.5px, 0) rotate(-2.5deg);
          transform: translate(-2.5px, 0) rotate(-2.5deg);
}
.stacked--fan-left:hover:before {
  -webkit-transform: translate(2.5px, 0) rotate(2.5deg);
          transform: translate(2.5px, 0) rotate(2.5deg);
}
.stacked--fan-left:hover:after {
  -webkit-transform: translate(5px, 0) rotate(5deg);
          transform: translate(5px, 0) rotate(5deg);
}

.stacked--fan-right {
  -webkit-transform-origin: center bottom;
          transform-origin: center bottom;
}
.stacked--fan-right:before, .stacked--fan-right:after {
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
}
.stacked--fan-right:hover {
  -webkit-transform: translate(2.5px, 0) rotate(2.5deg);
          transform: translate(2.5px, 0) rotate(2.5deg);
}
.stacked--fan-right:hover:before {
  -webkit-transform: translate(-2.5px, 0) rotate(-2.5deg);
          transform: translate(-2.5px, 0) rotate(-2.5deg);
}
.stacked--fan-right:hover:after {
  -webkit-transform: translate(-5px, 0) rotate(-5deg);
          transform: translate(-5px, 0) rotate(-5deg);
}