<div class="wildcards">
    <a class="wildcards__item" href="https://www.youtube.com/watch?v=SDqH91tRoQc&ab_channel=Rustica"  target="_blank"><img src="https://images.unsplash.com/photo-1444021465936-c6ca81d39b84?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=600&q=80" width="600" height="600" alt=""><span class="wildcards__footer">Dahlia</span><span class="wildcards__action">
    <svg viewBox="0 0 448 512" title="play">
      <path d="M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z" />
    </svg>
  </span></a>
    <a class="wildcards__item" href="https://www.youtube.com/watch?v=f4c_OqyRBIM&ab_channel=Rustica" target="_blank"><img src="https://images.unsplash.com/photo-1502977249166-824b3a8a4d6d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=600&q=80" width="600" height="600" alt=""><span class="wildcards__footer">Lys</span><span class="wildcards__action">
    <svg viewBox="0 0 448 512" title="play">
      <path d="M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z" />
    </svg>
  </span></a>
    <a class="wildcards__item" href="https://www.youtube.com/watch?v=-syaDoi2jYg&ab_channel=Rustica" target="_blank"><img src="https://images.unsplash.com/photo-1542324216541-c84c8ba6db04?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=600&q=80" width="600" height="600" alt=""><span class="wildcards__footer">Rose</span><span class="wildcards__action">
    <svg viewBox="0 0 448 512" title="play">
      <path d="M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z" />
    </svg>
  </span></a>
</div>

body {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    background: #FFF5F4;
}
.wildcards {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-evenly;
    gap: 10px;
    &__item {
        overflow: hidden;
        position: relative;
        width: 300px;
        height: 300px;
        border-radius: 5px;
        img {
            display: block;
            max-width: 100%;
            height: auto;
            transition: transform 0.2s linear;
        }
        .wildcards__footer {
            position: absolute;
            bottom: 0;
            display: block;
            width: 100%;
            padding: 20px;
            font-size: 1.4rem;
            font-weight: bold;
            color: black;
            background: rgba(white, 0.6);
            backdrop-filter: blur(2px);
        }
        .wildcards__action {
            position: absolute;
            bottom: -100%;
            right: 20px;
            display: flex;
            justify-content: center;
            align-item: center;
            width: 56px;
            height: 56px;
            background: white;
            border-radius: 10px;
            transition: all 0.2s linear;
            svg {
                width: 20px;
            }
            &:hover {
                background: #E2220B;
                svg {
                    fill: white;
                }      
            }

        }        
        &:hover {
            img {
                transform: rotate(-5deg) scale(1.1);
            }
            .wildcards__action {
                bottom: 40px;
            }
        }
    }
}