Dodawanie ikonki oraz tekstu na zdjęciu w Bootstrap 5

Witam serdecznie,
Mam taki kod:

    &-box3 {
            h1 {
                font-size: 3rem;
                line-height: 1.5;
                color: #0E3374;
            }
    
            .news {
                font-weight: bolder;
    
                &-item-title {
                    font-size: 1.125rem;
                    color: #0E3374;
                }
    
                &-item-img {
                    width: 100%;
                    height: 170px;
                    background-position: center;
                }
    
                &-show-more {
                    font-size: 1.125rem;
                    background-color: #0E3374;
                    color: #FFFFFF;
                    display: inline-block;
                    padding: 10px 15px;
                }
    
                &-show-more:hover{
                    text-decoration: underline;
                }
    
            }
    
        }
    
    
    
    <section class="home-box3 animate__animated animate__fadeInLeft pb-5">
            <div class="container">
                <div class="row">
                    <div class="col-12 news pb-5">
                        <h1 class="pt-3">Co nowego</h1>
                        <div class="row">
    
                            <div class="col-12 col-md-6 col-lg-4 py-3">
                                <div class="news-item text-center text-md-start">
                                    <a href="https://name.ovh/pl/aktualnosc/zajecia-z-pania-karolina">
                                        <div class="news-item-img position-relative img-fluid m-auto m-md-0 text-center"
                                             style="background-image: url('https://name.ovh/upload/DZ_PRODUCT/thumbs3/bb5fd2254063f700550dd784a17532d2.jpg');background-repeat: no-repeat">
                                        </div>
                                        <h5 class="news-item-title mt-3">Zajęcia z Panią Karoliną !!</h5>
                                    </a>
                                </div>
                            </div>
    
    </div>
    </div>

W efekcie mam coś takiego: https://ibb.co/HNNx5wq

Chciałbym uzyskać taki efekt: https://ibb.co/8jMpJN6 (zielony obrazek na zdjęciu oraz data).

Wie ktoś jak to zrobić? :)

No to jak jest .news-item-img to dorzuć do niego jakiś wrapper z position: relative;. W środku wstaw datę z position: absolute; bottom: 0; left: 0; background: green;. I na sam koniec ten kształt przez transform (https://developer.mozilla.org/en-US/docs/Web/CSS/transform), możliwe, że będzie potrzebny także border-radius.