.further_reading {
    --padding: var(--gutter);
    --eyebrow: 22px;
    --para: 18px;
    --head: 28px;
    --imgwidth: 250px;
--icon:32px;

}

.further_reading article{
    border-radius: var(--radius); overflow: hidden;
    background-color: var(--ttl_blue);
    display: flex; /*align-items: center;*/
   /* gap: var(--padding);*/
    position: relative;
    margin: calc(var(--gutter)) 0;
}
.further_reading article:last-child{
    margin-bottom: 0;
}
.further_reading article{
    color:var(--ttl_black);
}
.further_reading article picture {
    width: var(--imgwidth); min-width: var(--imgwidth);
}
.further_reading article > div {align-self:center;
    padding: var(--padding);/* padding-left: 0;*/ flex: 1; display: flex; gap: var(--gutter);
}
.further_reading article > div > div {
    display: flex;
    flex-direction: column;
    gap: 12px; flex: 1;
}
.further_reading article p { font-size:  var(--para);  line-height: 1.5; }
.further_reading article .eyebrow_small { font-size: var(--eyebrow);  line-height: 1.2; }
.further_reading article .heading { font-size: var(--head);
    font-weight: 700; line-height: 1.2; }
.further_reading article .heading a { color:inherit;}

.further_reading .heading a:focus-visible {display: inline-block; background: none; }
.further_reading article .icon { order:10; align-self:center;  font-style: normal !important; width:calc((var(--icon) * 2) + 8px); height: calc((var(--icon) * 2) + 8px); min-width: calc((var(--icon) * 2) + 8px); background: var(--ttl_black); color:white; border-radius: 50%;
display: flex; justify-content: center; align-items: center;}
.further_reading article .icon::after { font-family: "ttl_icons";  font-size: var(--icon);   content:"\E809";  }


.further_reading > article a::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;

}


.further_reading > article:focus-within,
.further_reading > article:has(a:hover) {
    background: linear-gradient(
            rgba(255, 255, 255, 0.2),
            rgba(255, 255, 255, 0.2)
    ),
    var(--ttl_blue);


}

.further_reading > article:has(a:focus-visible){
    /* outline:2px solid var(--ttl_error); outline-offset: 2px; */ outline: 3px solid black; box-shadow: 0 0 0 6px white;
}


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

    .further_reading {
        --padding: var(--gutter);
        --eyebrow: 16px;
        --para: 16px;
        --head: 24px;
        --imgwidth: 120px;
        --icon: 20px;
    }
}
@media all and (max-width: 599.98px) {

    .further_reading article picture {
        display: none;
    }

    .further_reading article > div{ display: block; padding: var(--padding)}
    .further_reading article .icon { margin-bottom: 12px;}
    .further_reading {
        --padding: var(--gutter);
        --eyebrow: 16px;
        --para: 16px;
        --head: 20px;
        --imgwidth: 64px;
        --icon: 20px;
    }
}