.card { display: flex; flex-direction: column;
}
.card article {  border-radius: var(--border-radius); overflow: hidden;display: flex; flex-direction: column; flex: 1;position: relative;

    box-shadow: 0px 8px 16px 0px rgba(167, 141, 252, 0.20), 0px 0px 16px 0px rgba(0, 0, 0, 0.12); color: black;

    /*box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);*/
}



.card div:not(.meta):not(.meta div){ flex: 1; padding:32px; background: white; transition: all 0.2s ease-out; display: flex; flex-direction: column; }

/*.card a:is(:hover,:focus-visible) div:not(.meta):not(.meta div) {
    background: var(--green-darkest); color: white;
}
.card a:focus-visible {
    box-shadow: var(--focus);
}*/


/* END GRANTS */

.card picture{   height: 0;  padding-bottom: 50%; }
.card.event picture{   padding-bottom:32%; }
.card picture img{}

.cards {  margin: var(--gutter) 0;  }
.cards:last-child{  margin-bottom:0;  }

.cards.large .card { margin: calc(var(--gutter) / 2); width: calc(33.333% - var(--gutter));  }







.cards .card { margin: calc(var(--gutter) / 2); width: calc(33.333% - var(--gutter));  }



p.cat {
    display: inline-block; line-height: 1;
    width: fit-content; width:-moz-fit-content;
    font-size: 12px !important; padding: 8px;
}

a:is(:hover,:focus-visible) p.cat { border-color: rgba(255,255,255,0.2); }

.newscard p.cat { border: none; color: white !important; background: var(--blue-news); }



 .newscard div.meta { padding: 0; order: -1; position: absolute; top: 0; left: 0; width: 100%;}
.newscard div.meta p.cat {  position: absolute; bottom: 0; left: 0; }
 .newscard :is(picture,.image_placeholder) ~ div.meta::before { display: block; content:"";  width: 100%; height: 0;  padding-bottom: 50%;  }

/*.cards*/ .newscard div.meta div { display: flex; flex-wrap:wrap; padding: 12px 0 0 12px;   width: 100%;
               position: absolute; top: 0; }

.authors picture,
    /*.cards*/ .card div.meta div :is(picture,p,div) { padding: 0 !important; border-radius: 50%; width: 48px; height: 48px; border: 1px solid white; margin: 0 8px 8px 0; }

.authors picture,
    /*.cards*/ .card div.meta div picture { background-color: var(--dark-purple);
    box-shadow: 0px 4px 8px 0px #110E1A; }


.cards .card div p {font-size: 14px; line-height: 140%;  }
/*.cards*/ .card div p:first-child+p:not(.date):not(.series) {font-size: 16px; line-height: 140%;  }
/*.cards*/ .card div:not(.meta) p:not(:last-child) { margin-bottom: 1em;  }
/*.cards*/ .card div p:first-child {font-size: 20px; font-weight: 700; line-height: 120%;  }
.card div p strong { font-weight: 700;}

.card div p.cta:last-child { margin:auto 0 0;}

.cards.large .card div:not(.meta) { padding:48px; }
.cards.large .card div p {font-size: 18px; line-height: 140%;  }
.cards.large .card div p:first-child {font-size: 28px; font-weight: 700; line-height: 120%;  }

.card a[href*="//"]:not([href*="//ria.newgraphic.ie"]):not([href*="//ria.ie"]):not([href*="//www.ria.ie"]):not([href^="mailto:"]) div p:first-child::after {
    content: '\E808';  font-family: 'social'; font-weight: normal !important;

    font-size: 14px;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
    top: -0.5em; margin-left: 4px;


}



.cards.two .card { margin: calc(var(--gutter) / 2); width: calc(50% - var(--gutter));  }

@media all and (min-width: 1200px) {
    .cards.large .card div.meta div :is(picture,p,div)  {width: 64px; height: 64px; }
}
.cards.large .card div.meta div {  padding: 32px; }



@media all and (min-width: 900px) {

    .cards.two .card { margin: calc(var(--gutter_big) / 2); width: calc(50% - var(--gutter_big));  }

    .cards .card div.meta div :is(picture,p,div) { padding: 0 !important; border-radius: 50%; width: 48px; height: 48px; border: 1px solid white; margin: 0 8px 8px 0; }



}

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

}

@media all and (max-width: 1199px) {
    .cards .card { width: calc(33.333% - var(--gutter)); }
    .cards .card div:not(.meta):not(.meta div){ padding:24px; }

    header.cardheader + .cards:not(.large) .card { width: calc(50% - var(--gutter)); }
}

@media all and (max-width: 899px) {
    .cards .card,
    .cards.large .card { width: calc(50% - var(--gutter)); }

}


@media all and (max-width: 599px) {
    .cards .card div:not(.meta):not(.meta div){ padding:24px; }
    .cards .card,
    .cards.large .card { width: 100%; margin: var(--gutter) 0; }

    header.cardheader + .cards:not(.large) .card { width: 100%; }
}