div.cards { display: flex; flex-wrap: wrap;
--gap: 32px;
    --padding:24px;
    gap:var(--gap);
    padding:0 0 calc(var(--gap) / 2) 0;
}

div.cards > article {
    border-radius: 8px; overflow: hidden;
    position: relative;


    display: flex; flex-direction: column;

    width: calc(33.3333% - (var(--gap)) * 0.666666);
    min-height: 360px;
}

.cards > article a {
    text-decoration: none;
    color: inherit;
}
/*.cards > article a::after {
    content: '';
    position: absolute;
    z-index: 5;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}*/
.cards > article a.stretch {
    position: absolute;
    inset: 0;
    z-index: 5;
}

.cards > article:has(a:focus-visible) {
    outline: 3px solid white;
    box-shadow: 0 0 0 6px var(--erasmus_blue);
}


div.cards > article > div{
    padding: var(--padding);
    position: relative;
}

div.cards > article.fullbg > picture{
    position: absolute;
    z-index: 0;top: 50%; left: 50%; transform: translate(-50%,-50%); width: var(--overflow); height: var(--overflow);
}

div.cards > article.colour{
    background: var(--erasmus_lighterblue);
}
div.cards > article.colour > picture{
    display: block; width:100%; height: 0; padding-bottom: 56.25%;
}

div.cards > article.fullbg { justify-content: flex-end; }
div.cards > article.fullbg div { color:white;
    z-index: 1;}
div.cards > article.fullbg div :is(.cardheading,p) {  }
div.cards > article.fullbg div::before {
    position: absolute;
    z-index: -1; bottom: 0; left: 0; width: 100%;
    height: calc(150% + var(--padding));
    background: linear-gradient(
            to 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%
    );

    content:""; display: block;

}
@media screen and (min-width:851px) and (max-width:1199px){

}
@media all and (max-width:850px) {


    div.cards > article {
        width: calc(50% - (var(--gap)) * 0.5);
    }

}
@media all and (max-width:600px) {


    div.cards > article {
        width: calc(100%);
    }

}