.columns-wrapper-3 {
    --bg-color="var(--grey-1)"
    --margin-bottom="-108px"
    --padding-bottom="calc(50px + 108px)
}

.columns-wrapper-3 .section {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: var(--gap);
}

.columns-wrapper-3 ul {
   display: flex;
	 flex-wrap: wrap;
	 padding: 0;
	 margin: 0;
	 list-style: none;
	 top: 15px;
	 left: 15px;
	 z-index: 1;
	 position: absolute;
}

.columns-wrapper-3 .figure {
   order: -1;
   background: var(--primary);
   margin: -1.5rem -1.5rem 1.5rem;
}
.columns-wrapper-3 .figure-1 img,
.columns-wrapper-3 .figure img {
   max-width: 100%;
   width: 100%;
}

.columns-wrapper-3 a {
    transition: 500ms ease-out;   
   color: #5dc5ea;
	 display: flex;
	 flex-direction: column;
	 height: 100%;
	 padding: 1.5rem 1.5rem 2.5rem;
	 text-decoration: none;
	 position: relative;
}
.columns-wrapper-3 a i {
	 position: absolute;
	 bottom: 20px;
	 right: 20px;
	 transition: all 0.125s var(--ease-out);
}
.columns-wrapper-3 a:hover i {
	 transform: translateX(0.25rem);
}
.columns-wrapper-3 a h1 {
	 font-size: var(--h5-size);
	 font-style: normal;
}
.columns-wrapper-3 a p:last-of-type {
	 margin-bottom: 0;
}



@media (max-width: 50em){
.columns-wrapper-3 .section {
 grid-template-columns: repeat(2, minmax(0, 1fr));
}
  
  @media (max-width: 40em){
.columns-wrapper-3 .section {
 grid-template-columns: repeat(1, minmax(0, 1fr));
}
}