.rule .rule-item {
  position: relative;
  height: 100%;
  border-radius: 8px;
  box-shadow: 0 0 45px var(--secundario-oscuro);
}

.rule-item .rule-content-icon {
  position: relative;
  z-index: 2;
}
.rule-item .rule-content-icon > i {
  color: var(--secundario-oscuro);
}
.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,
.rule-item:hover .rule-content-icon h4,
.rule-item:hover .rule-content-icon p {
  color: var(--neutral);
}
.rule-item:hover .rule-content-icon a.btn-danger {
  background: var(--neutral);
  color: var(--secundario-oscuro);
}
.rule-item .rule-content-icon a.btn-danger {
  transition: 1s;
}

.rule-content::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 0;
  top: 0;
  left: 0;
  bottom: auto;
  border-radius: 8px;
  transition: 1s;
}
.rule-item:hover .rule-content::after {
  height: 100%;
  opacity: 1;
}

.color-1::after {
  background: var(--secundario);
}
.color-2::after {
  background: var(--amarillo);
}
.color-3::after {
  background: var(--purpura);
}
.color-4::after {
  background: var(--rosa);
}
.color-5::after {
  background: var(--azul);
}
.color-6::after {
  background: var(--naranja);
}
.color-7::after {
  background: var(--divertido);
}
.color-8::after {
  background: var(--verde);
}
.color-9::after {
  background: var(--verde-claro);
}
.color-10::after {
  background: var(--verde-oscuro);
}
.color-11::after {
  background: var(--principal);
}
.color-12::after {
  background: var(--black);
}
.color-13::after {
  background: var(--label);
}
.color-14::after {
  background: var(--principal);
}
.color-15::after {
  background: #83e85a;
}
.color-16::after {
  background: #00d1ff;
}
.color-17::after {
  background: #a6acec;
}
.color-18::after {
  background: #00fff0;
}
.color-19::after {
  background: var(--principal);
}
.color-20::after {
  background: var(--principal);
}
.color-21::after {
  background: var(--main-300);
}

.rule-content-icon i {
  font-size: 68px !important;
}