.card {
    position: relative;
    background-size: cover; background-repeat: no-repeat; background-position: center; border-radius: 1vw;
    overflow: hidden; image-rendering: pixelated;
} .card-overlay {
      position: absolute;
      background-color: rgb(0, 0, 0); opacity: 0;
      width: 100%; height: 100%;
      top: 0; left: 0; 
      pointer-events: none; transition: opacity 0.5s ease;
  } .card a {
      position: absolute;
      background-color: #FF4556;
      color: #FFFFFF; text-align: center; text-decoration: none;
      padding: 0 25% 0 25%; top: calc(50% - 2em); left: 100%; z-index: 0; 
      transition: background-color 0.5s ease, color 0.5s ease, transform 0.5s ease 
  } .card:hover .card-overlay {opacity: 0.5}
    .card:hover a {transform: translate(-112.5%, 0%)}
    .card a:hover {
        background-color: #FFFFFF;
        color: #FF4556;
    }