.plans {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.plans .plan {
  background-color: #191919;
  text-align: center;
  border: 2px solid;
  padding: 10px 30px;
  border-radius: 5px;
  margin: 50px 30px;
  width: 270px;
  min-height: 435px;
  transition: all 0.3s;
  position: relative;
  top: 0;
}

.plans .plan:hover {
  top: -7px;
  box-shadow: 12px 12px 25px 0 #111;
}

.plans #standard {
  border-color: #bbb;
}

.plans #premium {
  border-color: #ff664b;
}

.plans #gold {
  border-color: gold;
}

.plans #platinum {
  border-color: transparent;
  background-clip: padding-box;
  position: relative;
}

.plans #standard h3 {
  color: #eee;
}

.plans #premium h3 {
  color: #ff664b;
}

.plans #gold h3 {
  color: gold;
}

.plans #platinum:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  margin: -4px;
  border-radius: inherit;
  background: linear-gradient(
    120deg,
    rgba(207, 3, 3, 1) 0%,
    rgba(236, 211, 0, 1) 50%,
    rgba(0, 148, 255, 1) 100%
  );
}

@media only screen and (max-width: 790px) {
  .plans .plan {
    margin: 20px;
  }
}