div#currently { display: flex; margin-right: 1.43266475644699% !important;}
div#currently p { font-size: inherit; line-height: inherit; margin: 0; }
div#currently p+p { margin-left: auto; }



div.projectlist { display: flex; margin-right: 1.43266475644699% !important; flex-wrap: wrap; box-sizing: border-box;  }
div.projectlist div.project {
    position: relative; display: flex; flex-direction: column;

    margin-bottom: 24px;
}
div.projectlist div.project a { flex: 1;display: flex; flex-direction: column; }
div.projectlist div.project picture {
    position: relative;background: #666666;
    display: block; width: 100%; height: 0; padding-bottom: 72%;
}

div.projectlist div.project picture img{
    position: absolute;
    width: 100%; height: 100%; left: 0; top: 0; object-fit: cover;
}

div.projectlist div.project div {
    position: relative;
    padding: 20px; background: #666666; color:white;  flex: 1;display: flex; flex-direction: column; transition: all 0.2s ease;
}
div.projectlist div.project div::before {
    display: block; content:"";
    width: 0;
    height: 0;
    border-left: 24px solid transparent;
    border-right: 24px solid transparent;
    border-bottom: 28px solid #666; transition: all 0.2s ease;
    position: absolute; bottom:100%; left: 20px;
}

div.projectlist div.project div p.readarticle{
    margin-top: auto; margin-bottom: 0;

}


#content div.projectlist div.project a:hover { text-decoration:none; }
div.projectlist div.project a:hover div { background:#1caf4d; color: white; }
div.projectlist div.project a:hover div::before {border-bottom: 28px solid #1caf4d; }

p.category,
ul.categories {
    position: absolute; top: 0; left: 0; width: 100%;

    display: flex; flex-wrap: wrap;
    z-index: 3;
}

p.category::before ,
ul.categories::before {
    width: 100%;
    height: calc(100% + 60px);
    opacity: 0.666;
    opacity: 0.75;
    z-index: 0;
    content: "";
    display: block;
    pointer-events: none;
    position: absolute;
    left: 0;
    top: 0;

    background: -webkit-linear-gradient(top,
    hsl(0, 0%, 0%) 0%,
    hsla(0, 0%, 0%, 0.738) 19%,
    hsla(0, 0%, 0%, 0.541) 34%,
    hsla(0, 0%, 0%, 0.382) 47%,
    hsla(0, 0%, 0%, 0.278) 56.5%,
    hsla(0, 0%, 0%, 0.194) 65%,
    hsla(0, 0%, 0%, 0.126) 73%,
    hsla(0, 0%, 0%, 0.075) 80.2%,
    hsla(0, 0%, 0%, 0.042) 86.1%,
    hsla(0, 0%, 0%, 0.021) 91%,
    hsla(0, 0%, 0%, 0.008) 95.2%,
    hsla(0, 0%, 0%, 0.002) 98.2%,
    hsla(0, 0%, 0%, 0) 100%
    );
    background: linear-gradient(top,
    hsl(0, 0%, 0%) 0%,
    hsla(0, 0%, 0%, 0.738) 19%,
    hsla(0, 0%, 0%, 0.541) 34%,
    hsla(0, 0%, 0%, 0.382) 47%,
    hsla(0, 0%, 0%, 0.278) 56.5%,
    hsla(0, 0%, 0%, 0.194) 65%,
    hsla(0, 0%, 0%, 0.126) 73%,
    hsla(0, 0%, 0%, 0.075) 80.2%,
    hsla(0, 0%, 0%, 0.042) 86.1%,
    hsla(0, 0%, 0%, 0.021) 91%,
    hsla(0, 0%, 0%, 0.008) 95.2%,
    hsla(0, 0%, 0%, 0.002) 98.2%,
    hsla(0, 0%, 0%, 0) 100%
    );

}

p.category span,
ul.categories li  { display: block;font-family:TGC, sans-serif; font-size: 18px; padding: 0.5em; margin: 0 4px 4px 0;

    background:#1caf4d; color: white;color: black;
    position: relative;
    z-index: 4; /* font-weight: bold;  */    letter-spacing: 0.02em; }
ul.categories li.level {   background:#00ccff; color: black;  }
ul.categories li.region {   background:#ff009a; background: var(--pink); color: black;  }

@media all and (min-width: 1024px) {
div.projectlist div.project { width: calc(33.33333% - (48px / 3)); margin-right: 24px;  box-sizing: border-box;  }
div.projectlist div.project:nth-child(3n+3) { margin-right: 0; }

}
@media all and (min-width: 501px) {
    p.category span,
    ul.categories li { font-weight: 16px; }

}