.rule .rule-item {
  position: relative;
  height: 100%;
  border-radius: 8px;
  box-shadow: 0 0 45px rgba(0, 0, 0, 0.08);
}
.rule-content::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 0;
  top: 0;
  left: 0;
  bottom: auto;
  background: var(--main-500);
  border-radius: 8px;
  transition: 1s;
}
.rule-item:hover .rule-content::after {
  height: 100%;
  opacity: 1;
}
.rule-item .rule-content-icon {
  position: relative;
  z-index: 2;
}
.rule-item .rule-content-icon > i {
  color: var(--main-500);
}
.rule-item .rule-content-icon i,
.rule-item .rule-content-icon p {
  transition: 1s;
}
.rule-item:hover .rule-content-icon,
.rule-item:hover .rule-content-icon > i {
  color: var(--main-50);
}
.rule-item:hover .rule-content-icon p {
  color: var(--main-50);
}
.rule-item:hover .rule-content-icon a.btn-danger {
  background: var(--main-50);
  color: var(--main-500);
}
.rule-item .rule-content-icon a.btn-danger {
  transition: 1s;
}