.ascw-wrapper{
  display:grid;
  gap:30px;
}

.ascw-card{
  position:relative;
  padding:50px;
  border-radius:20px;
  background:#ffffff;
  overflow:hidden;
  text-decoration:none;
  transition:.4s;
  min-height:270px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  height:100%;
	border: 1px solid #12121233;
}

/* HOVER BG */
.ascw-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:#000;
  opacity:0;
  transition:.4s;
}
.ascw-card:hover::before{ opacity:1; }

/* CONTENT ABOVE BG */
.ascw-title,
.ascw-excerpt{
  position:relative;
  z-index:2;
}
.ascw-title {
  font-family: Urbanist;
  font-weight: 600;
  font-size: 24px;
  line-height: 100%;
  letter-spacing: 0%;
  color: #000;
}
.ascw-icon img {
  width: 61px;
  height: 61px;
}
.ascw-excerpt {
  font-family: DM Sans;
  font-weight: 400;
  font-size: 18px;
  line-height: 30px;
  letter-spacing: 0%;
  color: #878C8F;
}
.ascw-card:hover .ascw-title {
  color: #FFF;
}
.ascw-card:hover .ascw-excerpt {
  color: #878C8F;
}

/*.ascw-excerpt{ max-width:317px; }*/

/* NUMBER STYLE (default RIGHT) */
.ascw-card::after{
  content: attr(data-number);
  position: absolute;
  top: 73%;
  transform: translateY(-50%);
  font-size: 280px;
  opacity: .05;
  right: 40px;
  left: auto;
  transition: .4s;
  color: #121212 !important;
  font-family: Urbanist;
	font-weight: 500;
}

.ascw-card:hover::after {
  color: #121212 !important;
  opacity: 1;
}
/*.ascw-card:hover .ascw-icon img {
  width: 61px;
  height: 61px;
}*/
/* =========================
   CARDS 1 & 2 → NUMBER LEFT | TEXT RIGHT
   ========================= */
.ascw-card:nth-child(4n+1),
.ascw-card:nth-child(4n+2){
  text-align:right;
  padding-right: 40px;
  padding-left: 37%;
}

.ascw-card:nth-child(4n+1)::after,
.ascw-card:nth-child(4n+2)::after{
  left:0px;
  right:auto;
}

/* =========================
   CARDS 3 & 4 → NUMBER RIGHT | TEXT LEFT
   ========================= */
.ascw-card:nth-child(4n+3),
.ascw-card:nth-child(4n+4){
  text-align:left;
  padding-left: 40px;
  padding-right: 25%;
}

.ascw-card:nth-child(4n+3)::after,
.ascw-card:nth-child(4n+4)::after{
  right:0px;
  left:auto;
}

/* SVG HOVER */
.svg{
  position:absolute;
  opacity:0;
  transition:.4s;
  z-index:2;
}

.svg1{ top:0; right:0; }
.svg2{ bottom:-5px; left:-40px; }

.ascw-card:hover .svg{ opacity:1; }

@media (max-width: 767px) {
	.ascw-card::after {
	  top: 84%;
  	  font-size: 140px;
	}
	.svg2 {
  		bottom: 20px;
  		left: -40px;
	}
}