#mainmenu .card { }


.card { display: flex; flex-direction: column;
    }
.card a {  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(--dark-purple); color: white;
 }
.card a:focus-visible {
    box-shadow: var(--focus);
}


/* GRANTS */

.cards.grants { margin: 0 ;}
/*.cards*/ .card.grant  div:not(.meta):not(.meta div){ background: transparent !important; }

/*.cards*/ .card.grant a {  background: var(--bg-purple);  border:1px solid #221D33;  color:#221D33; }

/*.cards*/ .card.grant.closed a { background: #F2F2F2; border-color:#716C80; color: #716C80; }
.submenu aside .card.grant a {background: white;}
/*.cards*/ .card:is(.grant,.grant.closed) a:is(:hover,:focus-visible) {  background: var(--dark-purple);   color:#FFFFFF; }

/*.cards*/ .card.grant a dl {
display: flex; flex-wrap: wrap; margin: 0 0 12px;
}
/*.cards*/ .card.grant a dl :is(dt,dd) {
    font-size: 14px; line-height: 1; white-space: nowrap;
}
/*.cards*/ .card.grant a dl dt,
/*.cards*/ .card.grant a dl :is(dt,dd) :is(span,strong) {
    display: inline-block; border: 1px solid transparent;   padding:10px 0;
}
/*.cards*/ .card.grant a dl dt::after { content:":\00a0";}
/*.cards*/ .card.grant a dl :is(dt,dd) strong {font-weight: 700;}

/*.cards*/ .card.grant a dl dd:not(:last-child) { margin: 0 1em 0 0; }

/*.cards*/ .card.grant dd span.status { font-weight: 700;
background: #FC8D8D; color: var(--black) !important; padding:11px 8px; border-radius: 4px; border: 1px solid #221D33;
}
/*.cards */.card.grant dd span.status.open{
    background: #8DFCA5;
}
/*.cards*/ .card.grant dd span.status.soon{
    background: #FCD08D;
}



/* END GRANTS */


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

.cards {  margin: 32px 0;  }

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







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


/*.cards*/ .card div.meta { padding: 0; order: -1; position: absolute; top: 0; left: 0; width: 100%;}
/*.cards*/ .card div.meta p.cat {  position: absolute; bottom: 0; left: 0; }
/*.cards*/ .card picture ~ div.meta::before { display: block; content:"";  width: 100%; height: 0;  padding-bottom: 50%;  }
/*.cards*/ .card.event picture ~ div.meta::before {  padding-bottom: 32%;  }


/*.cards*/ .card 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: 0.5em;  }
/*.cards*/ .card div p:first-child {font-size: 20px; font-weight: 700; line-height: 120%;  }
.card div p strong { font-weight: 700;}



.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%; }
}