h1, h2, h3, h4, h5, h6 {
  text-transform:none;
}

.p-item {
  width:100%;
  aspect-ratio: 1 / .56;
  background-color:var(--lightgray);
  min-height:120px;
  padding:25px;
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  text-decoration: none !important;
  color:var(--orange);
  background-size:cover;
  background-position:center;
  margin-bottom:30px;
  z-index:1;
  position:relative;
  overflow:hidden;
}
.p-item.large {
    aspect-ratio: 1 / .25;
}
.p-item:hover {
  color:var(--orange);
}

.p-item:after {
  content:" ";
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  z-index:-1;
  *background:rgba(0,0,0,.50);

  backdrop-filter:grayscale(1);
}
  .p-item .p-content {
    display:flex;
    width:100%;
  }
    .p-item .p-content .text {
        width:65%;
        z-index:2;
    }
    .p-item .p-content h3 {
      font-size:14px;
      color:black;
    }
    .p-item .p-content p {
      font-size:12px;
      color:black;
    }
    .p-item .p-content .img {
      height:calc(100% + 25px);
      width:calc(35% + 50px);
      position:relative;
      margin-right:-25px;
      margin-left:-25px;
      bottom:0px;
      z-index:2;
      filter:grayscale(1);
      background-size:contain;
      background-position:top right;
      background-repeat:no-repeat;
    }

    .p-item .p-content .circle {
      position:absolute;
      bottom:-20%;
      right:-10%;
      aspect-ratio:1;
      background-color:gray;
      width:50%;
      z-index:1;
      border-radius:50%;
    }





  .p-item .p-foot {
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    display:flex;
    justify-content:flex-end;
    align-items:flex-end;
    gap:10px;
    padding:15px 25px;
    z-index:3;
  }
    .p-item .p-foot .tags {
      gap:5px 10px;
      display:flex;
      overflow:hidden;
      flex-wrap:wrap;
      flex:1;
    }
    .p-item .p-foot .tags span {
      border-radius:50px;
      padding:5px 15px;
      background-color:gray;
      color:white;
      font-size:10px;
      font-weight:600;
        white-space:nowrap;
    }

  .p-item .p-foot .arrow {
    height:30px;
    width:30px;
    border-radius:50%;
    text-align:center;
    line-height:32px;
    font-size:16px;
    background-color:white;
    transition:.3s;
  }
    .p-item:hover .p-foot .arrow {
      color:white !important;
      background-color:var(--orange);
    }


    .p-item.large .p-content h3 {
      font-size:25px;
      color:black;
    }
    .p-item.large .p-content p,
    .p-item.large .p-foot .tags span  {
      font-size:14px;
    }
    .p-item.large .p-content .circle {
      bottom:-100%;
    }

    .p-item.objectief-selecteren:hover .p-foot .arrow,
    .p-item.objectief-selecteren .p-foot .tags span,
    .p-item.objectief-selecteren .circle {
    	background-color:var(--pink);
    }
    .p-item.objectief-selecteren .p-foot .arrow,
    .p-item.objectief-selecteren .p-content .text span  {
      color:var(--pink);
    }

    .p-item.teamoptimalisatie:hover .p-foot .arrow,
    .p-item.teamoptimalisatie .p-foot .tags span,
    .p-item.teamoptimalisatie .circle {
    	background-color:var(--green);
    }
    .p-item.teamoptimalisatie .p-foot .arrow,
    .p-item.teamoptimalisatie .p-content .text span {
      color:var(--green);
    }

    .p-item.talentmanagement:hover .p-foot .arrow,
    .p-item.talentmanagement .p-foot .tags span,
    .p-item.talentmanagement .circle {
    	background-color:var(--darkblue);
    }
    .p-item.talentmanagement .p-foot .arrow,
    .p-item.talentmanagement .p-content .text span {
      color:var(--darkblue);
    }

    .p-item.consultancy:hover .p-foot .arrow,
    .p-item.consultancy .p-foot .tags span,
    .p-item.consultancy .circle {
    	background-color:var(--blue);
    }
    .p-item.consultancy .p-foot .arrow,
    .p-item.consultancy .p-content .text span {
      color:var(--blue);
    }

    .p-item.coaching-ontwikkeling:hover .p-foot .arrow,
    .p-item.coaching-ontwikkeling .p-foot .tags span,
    .p-item.coaching-ontwikkeling .circle {
    	background-color:var(--yellow);
    }
    .p-item.coaching-ontwikkeling .p-foot .arrow,
    .p-item.coaching-ontwikkeling .p-content .text span {
      color:var(--yellow);
    }

    .p-item.inclusiviteit:hover .p-foot .arrow,
    .p-item.inclusiviteit .p-foot .tags span,
    .p-item.inclusiviteit .circle {
    	background-color:var(--orange);
    }
    .p-item.inclusiviteit .p-foot .arrow,
    .p-item.inclusiviteit .p-content .text span {
      color:var(--orange);
    }