@charset "utf-8";

/***************************************************************/
/* BLOG ARTICLE PAGE LIST */
/***************************************************************/

.thumbnailWrapper {
    width:94%;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:stretch;
    gap:14px;
    margin:0 auto;
    padding:18px 0;
    box-sizing:border-box;
}

.thumbnailContainer {
    display:flex;
    flex:1 1 220px;
    max-width:220px;
    min-width:190px;
    padding:0;
    box-sizing:border-box;
}

.thumbnail {
    width:100%;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    background:#fff;
    border:1px solid rgba(0,43,37,.10);
    border-radius:7px;
    box-shadow:0 4px 14px rgba(0,43,37,.06);
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.thumbnail:hover {
    transform:translateY(-3px);
    border-color:rgba(0,147,126,.22);
    box-shadow:0 9px 20px rgba(0,43,37,.10);
}


/***************************************************************/
/* IMAGE */
/***************************************************************/

.thumbnailImageLink {
    width:100%;
    display:block;
    overflow:hidden;
    background:#e9f1ec;
}

.thumbnailImageLink img {
    width:100% !important;
    max-width:none !important;
    height:auto !important;
    display:block;
    aspect-ratio:16 / 8;
    object-fit:cover;
    object-position:center;
    transition:transform .4s ease;
}

.thumbnail:hover .thumbnailImageLink img {
    transform:scale(1.04);
}


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

.pagelistContent {
    flex:1;
    display:flex;
    flex-direction:column;
    padding:13px 15px 15px;
    color:#4d5665;
    box-sizing:border-box;
}

.pagelistContent > a {
    color:inherit;
    text-decoration:none;
}


/***************************************************************/
/* ACCENT */
/***************************************************************/

.pagelistContent::before {
    content:"";
    width:25px;
    height:2px;
    display:block;
    margin:0 0 8px;
    background:#e0bd55;
}


/***************************************************************/
/* DATE */
/***************************************************************/

.pagelistDate {
    margin:0 0 6px;
    padding:0;
    color:#00937e;
    background:none;
    font-size:.62em;
    font-weight:700;
    font-style:normal;
    line-height:1.2;
    letter-spacing:.05em;
    text-transform:uppercase;
}


/***************************************************************/
/* TITLE */
/***************************************************************/

.pagelistTitle {
    margin:0 0 7px;
    color:#002b25;
    font-size: clamp(0.7em,1vw,0.85em);
    font-weight:600;
    line-height:1.25;
}

.pagelistContent > a:hover .pagelistTitle {
    color:#00937e;
}


/***************************************************************/
/* DESCRIPTION */
/***************************************************************/

.pagelistDescription {
    margin:0;
    color:#5f6874;
    font-size:.72em;
    line-height:1.4;
}


/***************************************************************/
/* OPTIONAL LINK */
/***************************************************************/

.pagelistAltLink {
    margin-top:auto;
    padding-top:10px;
    color:#00937e;
    font-size:.62em;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
}

.pagelistAltLink::after {
    content:" →";
}


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

@media screen and (max-width:650px) {
    .thumbnailContainer {
        flex:1 1 45%;
        max-width:245px;
        min-width:160px;
    }
}

@media screen and (max-width:400px) {
    .thumbnailContainer {
        flex:1 1 100%;
        max-width:100%;
        min-width:0;
    }
}