.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;
   padding: 0;
   margin: -1.5rem -1.5rem 1.5rem;
}

.columns-wrapper-3 .figure img {
   max-width: 100%;
   width: 100%;
   filter: saturate(0);
   opacity: 0.75;
   transition: opacity 0.275s var(--ease-in-out),filter 0.125s var(--ease-out);
}

  
.columns-wrapper-3 a:hover .figure img{
    filter: saturate(1);
    opacity: 1;
}

.columns-wrapper-3 a {
   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 h3 {
	 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));
  }
  
  .columns-wrapper-3 .figure img{
    filter: saturate(1) !important;
    opacity: 1 !important;
  }
}
  
  @media (max-width: 40em){
.columns-wrapper-3 .section {
 grid-template-columns: repeat(1, minmax(0, 1fr));
}
}