.ysp-werkzaamheden-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    position:relative;	
	z-index:1;
}
.ysp-werkzaamheden-item-image{
	position:relative;
}
.ysp-werkzaamheden-item-image:before{
		content: "";
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute;
    background: linear-gradient(180deg, rgba(0,0,0,0.2) 100%, #000000 100%);	
}
.ysp-werkzaamheden-item-image img{
	height:360px;
	width:100%;
	object-fit:cover;	
}
@media(max-width:991px){
  .ysp-werkzaamheden-grid {
    grid-template-columns: repeat(2, 1fr); 
  }  
}
@media(max-width:767px){
  .ysp-werkzaamheden-grid {
    grid-template-columns: repeat(1, 1fr); 
    grid-auto-flow: column;
    overflow-x: scroll;
    gap:16px
}	
 .ysp-werkzaamheden-item{
    width: 79vw;
}
.ysp-werkzaamheden-item-image img{
    height: 280px;
}
}

.ysp-werkzaamheden-item-title{
	text-transform:uppercase;
	color:#fff;
	font-family:'Barlow',sans-serif;
	background:#000;
	padding:28px;
	position:relative;
	transition:300ms;
}

.ysp-werkzaamheden-item-title:before {
    content: '\f178';
    right: 7%;
    top: 27px;
    display: block;
    z-index: 2;
    color: #000;
    position: absolute;
    font-size: 1.2rem;
    font-weight: 600;
    font-family: "Font Awesome 6 Pro";
    transition: margin var(--global-transition) ease-in-out;
}

.ysp-werkzaamheden-item-link:hover .ysp-werkzaamheden-item-title{
	background:var(--color-1);
	color:#000;
}