@charset "utf-8";

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

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

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

.thumbnail {
    width:100%;
    display:flex;
    flex-direction:column;
}


/***************************************************************/
/* IMAGE + TITLE PANEL */
/***************************************************************/

.thumbnailVisual {
    width:100%;
    position:relative;
}

.thumbnailImageLink {
    width:100%;
    display:block;
    overflow:hidden;
    border-radius:7px 7px 0 0;
}

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

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


/***************************************************************/
/* GREEN TITLE BUBBLE */
/***************************************************************/

.thumbnailTitleLink {
    width:calc(100% - 8px);
    min-height:78px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    margin:-18px 0 0 -8px;
    padding:14px 18px;
    position:relative;
    z-index:2;
    box-sizing:border-box;
    background:linear-gradient(135deg,#146b5f 0%,#2d897b 100%);
    border-radius:18px;
    border-top: solid 3px #fee992;
    border-left: solid 2px #fee992;
    box-shadow:0 7px 18px rgba(0,43,37,.16);
    color:#fff;
    text-decoration:none;
    
}


/* carrot now on right side */

.thumbnailTitleLink::after {
    content:"";
    width:14px;
    height:14px;

    position:absolute;
    top:50%;
    right:-6px;

    background:#2d897b;

    transform:
        translateY(-50%)
        rotate(45deg);
}


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

.pagelistTitle {
    display:block;
    color:#fff;
    font-size:.76em;
    font-weight:700;
    line-height:1.25;
    letter-spacing:.015em;
}


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

.pagelistDate {
    margin: 0 0px 6px 4px;
    padding: 0 0 0 20px;

    color:#00937e;
    background-image:url("blog-clock.png");
    background-repeat: no-repeat;
    background-position:left center;

    font-size:.62em;
    font-weight:700;
    font-style:normal;
    line-height:1.2;
    letter-spacing:.05em;
    text-transform:uppercase;
}


/* date when inside title bubble */

.pagelistDate.insideBubble {
    margin:0 0 5px;

    color:rgba(255,255,255,.72);

    font-size:.58em;
    letter-spacing:.06em;
}


/***************************************************************/
/* CONTENT BELOW */
/***************************************************************/

.pagelistContent {
    flex:1;
    display:flex;
    flex-direction:column;

    padding:11px 8px 0;

    color:#4d5665;

    box-sizing:border-box;
}


/***************************************************************/
/* 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;
    }

}