.herocards { /*width: calc(100% + (var(--gutter_big) * 2));  right:calc(var(--gutter_big) / 2);*/  }
.herocards .herocard { /*margin:0 calc(var(--gutter_big) / 2);*/   }


.herocards .herocard { padding: var(--gutter_big) 0  }


.herocard picture { height: 0; padding-bottom: 50%;
   /*  width: 100%;display:block;  position: relative; overflow: hidden;*/ }

.herocard picture img { /*object-fit: cover; width:var(--overflow);  height:var(--overflow); left: 50%; top: 50%; transform: translate(-50%,-50%);
    position: absolute; */}

.herocard div { background:var(--red); color: black; padding: 40px; border-radius: 12px;
    position: relative; max-width: 480px;
    margin:-105px 32px var(--gutter) 32px;
    display: flex; flex-direction: column;
    transition: all 0.2s ease;
}

.herocard.red div { background:var(--red); }

body.young-academy-ireland .herocard.red div,
body.single-young_academy .herocard.red div { background:var(--yai-red); }

.herocard.yellow div { background:var(--yellow); }
.herocard.orange div { background:var(--orange); }
.herocard.purple div { background:var(--purple); }
.herocard.teal div { background:var(--teal); }
.herocard.sky div { background:var(--sky); }

 .herocard.yai div
{
    background: rgb(47,51,83);
    background: linear-gradient(130deg, rgba(232,17,75,1) 0%, rgba(47,51,83,1) 25%) !important;
    color:white !important;
    transition: none;
}


.herocard div p:first-child { font-size: 36px; line-height: 1.1; font-weight: 700;  font-family: var(--headingfont); }
.herocard div p:first-child+p:not(.cat),
.herocard div p:first-child ~ p:not(.cat)+p:not(.cat)
{ font-size: 18px; line-height: 1.4; margin-top: 16px; }

.herocard div p.cat { order: -10; margin:-8px 0 16px;}


.herocard 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:6px;


}



.herocard a:is(:hover,:focus-visible) div { background: var(--dark-purple) !important; color: white !important; }
.herocard a:focus-visible div { box-shadow:var(--focus); }

body[class*="template_exhibition-php"] .section .herocard a:is(:hover,:focus-visible) div { background: white !important; color: var(--black) !important; }


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

    .herocard div p:first-child { font-size: 32px; }
    .herocard div p:first-child+p:not(.cat) { font-size: 16px;   }

    .herocard div {
        padding: 32px;
        margin:-64px 16px var(--gutter) 16px;
    }

}

@media all and (max-width: 599px) {
    .herocard div p.cat { order: -10; margin:-4px 0 12px;}

    .herocard div p:first-child { font-size: 24px;  }
    .herocard div p:first-child+p:not(.cat) { font-size: 14px;  margin-top: 12px; }

    .herocard div {
        padding: 24px;
        margin:-48px 16px 0  16px;
    }


    .herocard a[href*="//"]:not([href*="//ria.newgraphic.ie"]):not([href*="//ria.ie"]):not([href*="//www.ria.ie"]):not([href^="mailto:"]) div p:first-child::after {
        font-size: 14px;
        top: calc(-0.5em + 1px);

    }


}