.hovertiles {
  position: relative;
}
.hovertiles .hovertile {
	position: relative;
	overflow: hidden;
	background-repeat: no-repeat;
	background-size: 0 0;
	border-right: 1px solid #e5e7ea;
	border-bottom: 1px solid #e5e7ea;
}
.hovertiles .hovertileicon {
  position: relative;
  display: inline-block;
}
.hovertiles .hovertileicon i {
  font-size: 55px;
  color: var(--bs-primary);
  fill: var(--bs-primary);
  width: 1em;
  height: 1em;
  position: relative;
  display: block;
  z-index: 3;
}
.hovertiles .hovertileicon i::before {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(111.8deg,var(--bs-primary) 21.93%,var(--bs-secondary) 90.29%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  transition: background .3s ease,color .3s ease;
}
.hovertiles .hovertile:hover .hovertileicon i::before {
  color: #fff;
  -webkit-text-fill-color: #fff;
  background: 0 0;
}
.hovertiles .hovertileicon::after {
	position: absolute;
	content: "";
	width: 50px;
	height: 50px;
	bottom: -20px;
	right: -20px;
	z-index: 0;
	background-color: #f5f9fd;
	border-radius: 100px;
	-ms-transition: all .3s ease;
	-o-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
}
.hovertiles .hovertile:hover .hovertileicon::after {
  visibility: hidden;
  opacity: 0;
}
.hovertiles .hovertile h5 a {
	font-size: 20px;
	color: inherit;
}
.hovertiles .hovertile p {
	font-size: 16px;
}
.hovertiles .hovertile:hover {
	background-size: cover;
}
.hovertiles .hovertile:hover .hovertileicon i,
.hovertiles .hovertile:hover h5,
.hovertiles .hovertile:hover p {
	color: #ffffff;
	position: relative;
	z-index: 3;
}

.hovertiles .hovertile::before {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(28,36,65,.64);
  visibility: hidden;
  opacity: 0;
  -ms-opacity: 0;
  -o-opacity: 0;
  -moz-opacity: 0;
  -webkit-opacity: 0;
  filter: alpha(opacity=0);
  -ms-transition: all .3s ease;
  -o-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}

.hovertiles .hovertile:hover::before {
	opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -moz-opacity: 1;
  -webkit-opacity: 1;
  filter: alpha(opacity=100);
  visibility: visible;
}

.hovertiles .hovertile .innertile {
	overflow: hidden;
}

.hovertiles .hovertile .innertile::before {
	content: "";
  position: absolute;
  width: 155px;
  height: 258px;
  z-index: 2;
  display: block;
  border-radius: 18px;
  opacity: 0;
  -ms-opacity: 0;
  -o-opacity: 0;
  -moz-opacity: 0;
  -webkit-opacity: 0;
  filter: alpha(opacity=0);
  -ms-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
	top: -200px;
  left: -150px;
  transform: rotateZ(42.33deg);
  background: linear-gradient(111.8deg,var(--bs-primary) 21.93%,var(--bs-secondary) 90.29%);
}

.hovertiles .hovertile .innertile::after {
	content: "";
  position: absolute;
  width: 155px;
  height: 258px;
  z-index: 2;
  display: block;
  border-radius: 18px;
  opacity: 0;
  -ms-opacity: 0;
  -o-opacity: 0;
  -moz-opacity: 0;
  -webkit-opacity: 0;
  filter: alpha(opacity=0);
  -ms-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
	outline: 1px ridge rgba(255,255,255,.54);
  outline-offset: 20px;
	right: -150px;
  bottom: -100px;
  transform: rotateZ(42.33deg);
  background: linear-gradient(111.8deg,var(--bs-primary) 21.93%,var(--bs-secondary) 90.29%);
}

.hovertiles .hovertile:hover .innertile::before {
	top: -130px;
  left: 25px;
  opacity: .8;
  -ms-opacity: .8;
  -o-opacity: .8;
  -moz-opacity: .8;
  -webkit-opacity: .8;
  filter: alpha(opacity=80);
}

.hovertiles .hovertile:hover .innertile::after {
	right: -110px;
  bottom: -30px;
  opacity: .8;
  -ms-opacity: .8;
  -o-opacity: .8;
  -moz-opacity: .8;
  -webkit-opacity: .8;
  filter: alpha(opacity=80);
}
.hovertiles .hovertile .stretched-link::after { z-index: 3; }