.c-portfolio-item {
    position: relative;
    display: block;
    padding-top: 70%;
    background-color: #eee;
    margin-bottom: 2rem;
    overflow: hidden;
    background-size: cover;
    background-position: center;
}

.c-portfolio-item h3 {
    position: absolute;
    left: 1.3125rem;
    bottom: .7rem;
    right: 5.8125rem;
    font-size: clamp(20px,2.5vw,26px);
    line-height: 1.9375rem;
    letter-spacing: .03125rem;
    font-weight: bold;
    color: #fff;
}

.c-portfolio-item h3 strong {
    font-weight: normal;
}

.c-portfolio-item__hover-graphic {
    position: absolute;
    width: 10rem;
    height: 10rem;
    background-color: var(--color-2);
    border-radius: 20px 0 20px 0;
    bottom: -5rem;
    right: -10rem;
    transition: 300ms;
}

.c-portfolio-item__hover-graphic:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #fff;

    -webkit-mask-image: url(https://vanwijkhoveniers.nl/wp-content/plugins/ysp-vanwijk-portfolio/assets/img/arrow-right-long-light.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: top 1.5rem left 1.8rem;
    -webkit-mask-size: 1.825rem;

    mask-image: url(https://vanwijkhoveniers.nl/wp-content/plugins/ysp-vanwijk-portfolio/assets/img/arrow-right-long-light.svg);
    mask-repeat: no-repeat;
    mask-position: top 1.5rem left 1.8rem;
    mask-size: 1.825rem;
}

.c-portfolio-item:hover .c-portfolio-item__hover-graphic,
.c-portfolio-item:active .c-portfolio-item__hover-graphic,
.c-portfolio-item:focus .c-portfolio-item__hover-graphic {
      background-color: var(--color-1);
}
@media(max-width:767px){
	.c-portfolio-item__hover-graphic{
		width: 9.5rem;
    height: 9.5rem;
	}
	.c-portfolio-item__hover-graphic:after{
		-webkit-mask-position: top 1.4rem left 1.5rem;
		 mask-position: top 1.4rem left 1.5rem;
	}
}
.c-portfolio-item .c-portfolio-item__hover-graphic{
    right: -5rem;
}

.c-portfolio-filters {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .25rem;
    background-color: #f2f2f2;
    border-radius: 20px 0px 20px 0px;
    padding: .25rem;
    margin-bottom: 2rem;
}

.c-portfolio-filters__item {
    display: inline-block;
    border: none;
    background-color: transparent;
    color: var(--color-default, #412458);
    font-size: var(--font-size-sm, .875rem);
    line-height: var(--global-line-height, 1.8);
    padding: .5rem 1.25rem;
    border-radius: 20px 0px 20px 0px;
    cursor: pointer;
    transition: background-color var(--global-transition, .3s) ease-in-out, color var(--global-transition, .3s) ease-in-out;
}

.c-portfolio-filters__item.is-active {
    background-color: var(--color-1);
    color: #fff;
}

button#portfolio-load-more-posts {
    margin: 0 auto;
    display: block;
}