Как сделать изображения и текст одинакового размера?

Question

Я попытался сделать анимацию переворачивания карты, конечно, это сработало ~
первый класс работал, так как изображение и фон были того же размера, что я узнал об этом эффекте / анимации на w3schools.com

Но... в другом классе, вроде этого, я не могу найти разницы между первым и третьим классами..

     /* This container is needed to position the front and back side */
        .yoink3 {
            position: relative;
            width: 300px;
            height: 200px;
            text-align: center;
            transition: transform 0.8s;
            transform-style: preserve-3d;
            background: url("https://lh3.googleusercontent.com/proxy/z78bjcT-OIUdZ6Ae99jo_cWAaXnFk2HNQAP0qhCJ5eOzkw9JnF5cjId4DQjRAK6Hy_8sLheANHKNq-C97nxyR0_1jEF_zZTRLJ3C-7W32Vxsq2s1SzjWJLo_TBXDhJvOHa4VNtbomSe563bhgQ");
            background-size: cover;
               border-radius: 30px;
               float: right;
    
    }

и это формат html ~

    <!--First Image-->
            <div class="pic1">
                <div class="yoink">
                    <div class="Work">
                    <a href="Pic1.jpg" target="_blank">
                    <img src="Pic1.jpg" alt="WoRk" height="300" width="300" style="border-radius: 30px;">
                    </a>
                    </div>
                    <div class="desc1">
                    <p>As we can all see in this image,<br>
                    She is working at her home</p>
                    </div>
                </div>
            </div>
            <!--Second Image-->
            <div class="pic2">
                <div class="yoink2">
                    <div class="song1">
                        <a href="Songs1.jpg" target="_blank">
                        <img src="Songs1.jpg" alt="SoNgS" height="300" width="300" style="border-radius: 30px">
                        </a>
                    </div>
                    <div class="desc2">
                    <p>In this image,<br>
                    it is a written song<br>
                    named "Somewhere in Time"<br>
                    It is also a movie from 2019<br>
                    </p>
                    </div>
                </div>
            </div>
            <!--Third Image-->
            <div class="pic3">
                <div class="yoink3">
                    <div class="Poem1">
                    <a href="Creative Poems.png" target="_blank">
                    <img src="Creative Poems.png" alt="Poem1" class="shaped" style="background-size: auto;">
                    </a>
                    </div>
                    <div class="desc3">
                        <p>This is a poem..<br>
                        And
                    </div>
                </div>
            </div>

Спасибо (￣︶￣*)), и я чувствую, что здесь что-то не так... но я не могу это найти... Пожалуйста, найдите это для меня:)