.variants {
  background: #f4f4f4;
  border-radius: 5px;
  padding: 30px 45px 35px;
}
.variants-item {
  border-radius: 5px;
  overflow: hidden;
  background: #FEFDFD;
}
.variants-item .number {
  display: block;
  font-size: 30px;
  font-weight: 700;
  line-height: 1em;
  color: var(--color-2);
  text-align: center;
  padding: 21px 10px 15px;
  background: var(--color-4);
  position: relative;
  overflow: hidden;
}
.variants-item .number:before,
.variants-item .number:after {
  content: '';
  display: block;
  width: 70%;
  height: 25px;
  position: absolute;
  bottom: -18px;
  background: #FEFDFD;
}
.variants-item .number:before {
  left: -10px;
  transform: rotate(7deg);
}
.variants-item .number:after {
  right: -10px;
  transform: rotate(-7deg);
}
.variants-item p {
  margin: 1em 0;
  padding: 10px 25px;
  font-size: 14px;
  line-height: 1.3em;
  color: #222427;
  text-align: center;
}
.variants-item p a {
	text-decoration: none;
	border-bottom: 1px dashed #060606;
	transition: var(--transition);
}
.variants-item p a:hover {
	text-decoration: none;
	color: var(--color-2);
	border-color: var(--color-2);
}
.variants-item p strong {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-2);
}
.variants-item .btn {
  width: 100%;
}
@media screen and ( max-width: 767px ) {
	.variants {
		padding: 30px 15px 35px;
	}
	.variants-item .number:before, .variants-item .number:after {
		height: 34px;
		bottom: -23px;
	}
}