<figure>
  <a href="#">
    <img src='https://images.unsplash.com/photo-1686349472661-ff361a66834b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODY5MjcyMjR8&ixlib=rb-4.0.3&q=80&w=400' alt=''>
  </a>
 </figure>

body {
  max-width: 50vw;
}

figure:has(a) {
  --color: #D33939;
  --padding: 1.5rem;
  
  border-block-end: 2px solid var(--color);
  margin: 0;
  padding-block-end: var(--padding);
  transition: all .25s ease-out;
  
  & img {
    width: min(100%);
  }
}

figure:has(a:hover) {
  border: 2px solid var(--color);
  padding: var(--padding);
}