/* End of container */
.card-item {
  cursor: pointer;
  height: 360px;
  width: 312px;
  float: left;
  margin-left: -29px;
  z-index: 1;
  position: relative;
}

.card-item:hover .card-content img {
  -webkit-transform: scale(0.96);
  -moz-transform: scale(0.96);
  -ms-transform: scale(0.96);
  -o-transform: scale(0.96);
  transform: scale(0.96);
}

.card-item:hover .card-content span {
  font-size: xx-large;
  color: red;
  background: linear-gradient(to left, #ffffff35, #ffffffdd, #ffffff35);
  -webkit-text-fill-color: white;
}

.card-content {
  color: red;
  display: block;
  height: 100%;
  width: 100%;
  margin: 0 auto;
  position: relative;
  text-align: center;
  transform: rotate(-5deg);
 }

.card-content .card-content-inner {
  left: 50%;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.card-content .card-content-inner-bottom {
  left: 50%;
  position: absolute;
  top: 75%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.card-content .title {
  display: block;
  padding: 0.1ex;
  font-family: "Barlow", sans-serif;
  font-size: large;
  letter-spacing: 0.1ex;
  line-height: 2ex;
  text-transform: uppercase;
  color: white;
  -webkit-text-fill-color: white;
  -webkit-text-stroke: 1px;
}

.card-content .black-text {
  color: #101010;
  -webkit-text-fill-color: #101010;
}