/***************************************************************/
/* RESOURCE PAGE LIST */
/***************************************************************/

.listWrapper {
    width:100%;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:0 28px;
    margin:0;
    padding:0;
    line-height:1.3;
}

.listContainer {
    width:100%;
    margin:0;
    padding:0;
    background:transparent;
    border-bottom:1px solid rgba(0,43,37,.12);
    box-sizing:border-box;
}

.thumbnail {
    width:100%;
    display:grid;
    grid-template-columns:64px minmax(0,1fr) 18px;
    gap:12px;
    align-items:center;
    margin:0;
    padding:10px 0;
    box-sizing:border-box;
    transition:background .2s ease;
}

.listContainer:hover .thumbnail {
    background:rgba(0,147,126,.025);
}


/***************************************************************/
/* THUMBNAIL */
/***************************************************************/

.thumbnail > a:first-child {
    width:64px;
    height:48px;
    display:block;
    overflow:hidden;
    border-radius:4px;
    text-decoration:none;
}

.thumbnail > a:first-child picture {
    width:100%;
    height:100%;
    display:block;
}

.thumbnail > a:first-child img {
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    margin:0;
    padding:0;
    float:none;
}


/***************************************************************/
/* CONTENT */
/***************************************************************/

.pagelistContent {
    min-width:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.pagelistContent > a {
    display:block;
    text-decoration:none;
}

.pagelistTitle {
    margin:0 0 3px;
    color:#002b25;
    font-family:"Montserrat",sans-serif;
    font-size:.82em;
    font-weight:700;
    line-height:1.25;
    transition:color .2s ease;
}

.listContainer:hover .pagelistTitle {
    color:#00937e;
}

.pagelistDate {
    color:#87909a;
    font-size:.62em;
    font-style:normal;
    line-height:1.2;
    letter-spacing:.04em;
    text-transform:uppercase;
}


/***************************************************************/
/* ARROW */
/***************************************************************/

.thumbnail::after {
    content:"→";
    color:#00937e;
    font-size:1em;
    line-height:1;
    text-align:right;
    transition:transform .2s ease;
}

.listContainer:hover .thumbnail::after {
    transform:translateX(3px);
}


/***************************************************************/
/* NARROW AREAS */
/***************************************************************/

.content.leftsidebar .listWrapper,
.content.rightsidebar .listWrapper {
    grid-template-columns:1fr;
}


/***************************************************************/
/* RESPONSIVE */
/***************************************************************/

@media screen and (max-width:900px) {

    .listWrapper {
        grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
        gap:0 18px;
    }

}

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

    .listWrapper {
        grid-template-columns:1fr;
    }

    .thumbnail {
        grid-template-columns:58px minmax(0,1fr) 16px;
        gap:10px;
        padding:9px 0;
    }

    .thumbnail > a:first-child {
        width:58px;
        height:44px;
    }

    .pagelistTitle {
        font-size:.78em;
    }

}