ul.directory>li {
    --directory-padding:32px;
    --directory-spacing:8px;
    display: flex; flex-direction: column;
}

ul.directory>li>article ,
ul.directory>li>article>a {
    flex: 1;
    display: flex; flex-direction: column;
}

ul.directory>li a {
    border-radius: 12px;
    overflow: hidden;
    display: block;
    background-color: white;
    box-shadow: 0px 287px 80px 0px rgba(0, 0, 0, 0.00), 0px 184px 74px 0px rgba(0, 0, 0, 0.01), 0px 103px 62px 0px rgba(0, 0, 0, 0.04), 0px 46px 46px 0px rgba(0, 0, 0, 0.07), 0px 11px 25px 0px rgba(0, 0, 0, 0.08);

    box-shadow: var(--shadow);
    color: black;
    transition: all 0.2s ease;

}
ul.directory>li a div{
    padding: var(--directory-padding);
}
ul.directory>li picture {
    height: 0; padding-bottom: 50%;
}


ul.directory>li a:is(:hover,:focus-visible) {
    background: var(--yellow-lighter);
}

ul.directory>li a:hover {
    box-shadow: var(--shadow_hover);

}
ul.directory>li a:focus-visible {
    box-shadow: 0 0 0 2px white,0 0 0 5px var(--green);

}

ul.directory>li a div p:not(:last-child){ margin-bottom: var(--directory-spacing); }
ul.directory>li a div p{
    font-size: 15px; line-height: 1.4;
}

@media all and (max-width: 899.98px) {
    ul.directory>li {
        --directory-padding:24px;
    }

}
@media all and (max-width: 599.98px) {
    ul.directory>li {
        --directory-padding:20px;
    }

}