body[class*="template_video-php"] #loadhere ,
body[class*="template_audio-php"] #loadhere {
    overflow:visible;
}
body[class*="template_video-php"] .resource_area ,
body[class*="template_audio-php"] .resource_area {
    background:#FBFAFF;
}


.resourcelist { display:flex; flex-wrap:wrap; width:calc(100% + var(--gutter)); position:relative; right:calc(var(--gutter) / 2);

    --resource-padding:32px;
}
.resourcelist li { margin:calc(var(--gutter) / 2); width:calc(25% - var(--gutter)); position:relative; /*border-radius:8px;     overflow: hidden;*/  display:flex; flex-direction:column;

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



.resourcelist li>a.link { position:absolute; display:block; top:0; left:0; width:100%; height:100%;  z-index:5;  }

.resourcelist li:has(a.link:hover) > div { background:var(--dark-purple); color:white; }
.resourcelist li:has(a.link:hover) img { transform:translate(-50%, -50%) scale(1.1,1.1); }
.resourcelist li:has(a.link:focus-visible) { box-shadow: 0 0 0 2px #fbfafc, 0 0 0 5px var(--orange); }

.resourcelist li dl.meta dd a { position:relative; z-index:6;}


.resourcelist li > div { padding:var(--resource-padding); overflow:hidden; flex:1; }

.resourcelist li {  border-radius:8px; overflow:hidden; background:white; }



/*
.resourcelist li > :first-child {  border-top-left-radius:8px;  border-top-right-radius:8px;  }
.resourcelist li > :last-child { border-bottom-left-radius:8px;  border-bottom-right-radius:8px; }
*/

.resourcelist li > picture{ padding-bottom:56.25%;}
.resourcelist.audiolist li > picture{ padding-bottom:100%;}



ul.resourcelist li > div p:not(:first-child) { font-size:14px; margin-top:1em; }
ul.resourcelist li > div p.date { font-weight:600;  }
ul.resourcelist li > div p:first-child { margin-bottom:16px; }
ul.resourcelist li > div p:first-child span { display:block;  line-height:140%;  font-weight:600;  font-size:var(--bodytext_size);   }




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

    .resourcelist { --resource-padding:24px; }
}
@media all and (max-width:1199px) {


    .resourcelist { --resource-padding:32px; }
    .resourcelist li { width:calc(33.333% - var(--gutter)); }
}


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

    .resourcelist { --resource-padding:24px; }
    .resourcelist li { width:calc(50% - var(--gutter)); }
}


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

    .resourcelist { width:100%; right:0; }

    .resourcelist li { width:100%; margin-left:0; margin-right:0;   }

}