.card{
    position: relative;
    border: 1px solid rgba(0,0,0,.21);
    border-radius: .618em;
    padding: 1ch;
    background-color: #fff}

.feature.card,
.card:has(a){
    border-color:rgba(0,0,0,.13);
    transition: all .3s ease;
    box-shadow:0 0 1ch rgba(0,0,0,.03),0 .146ch .236ch rgba(0,0,0,.03),.146ch .236ch .382ch rgba(0,0,0,.03),.236ch .382ch .618ch rgba(0,0,0,.03);}

.card article{
    display: flex;
    flex-direction: column;
    height: 100%;
    gap:1ch}

.card:not(.has-img) article{
    text-align: center;
    justify-content: space-between}

.card header{flex-direction: column}
.card.has-img header{order: 2}
.card.has-img img{border-radius: .236em}
.card_description small{display: block}

.card_description p{
    line-height: 1.382;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;  
    overflow: hidden}

.card a:not(.button){
    font-size: var(--base-unit,1em);
    color: inherit;
    text-decoration: none}

.card footer{margin-top: auto}
.card .button{margin: 0 auto}

.card:hover a:not(.button),
.card:focus-within a:not(.button){
        color: #06f;
        text-decoration: underline}

@media(hover:hover){
    .card:has(a) img{transition: all .3s ease}
    .card:has(a):hover img{filter: brightness(1.2)} 
}