[CSS][HTML]Ułożenie napisu na obrazku w Bootstrap 4 Opcje

[trifek]

Witam serdecznie,
Robię mały projekt w Bootstrap 4 i napotkałem na mały problem.

Mam taką stronę (podgląd problemu) http://serwer1356363.home.pl/_nauka/
Chciałbym uzyskać taki efekt: https://ibb.co/Hddz7gG

Tj na pomarańczowych "planszach" ma się znaleść:
- strzałka (jest dodana w kodzie - ale nie wyświetla się na stronie),
- napis "poznaj ofertę" ma być na dole pomarańczowego boxa

Mój aktualny kod:

[HTML] pobierz, plaintext 
<section class="front-banners">
        <div class="container">
            <div class="row">
                <div class="col-12 col-md-6 pb-4 mb-md-1">
                    <div class="card bg-dark text-white">
                        <a href="/produkty">
                            <img class="card-img" src="img/front1.jpg" alt="Produkt 1">
                        </a>
                        <a href="/produkty">
                            <div class="card-img-overlay front-banner-overlay">
                                <h5 class="card-title">Produkt 1 </h5>
                                <i class="fa fa-long-arrow-right" aria-hidden="true"></i>
                                <p>Poznaj ofertę</p>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="col-12 col-md-6 pb-4 mb-md-1">
                    <div class="card bg-dark text-white">
                        <a href="/produkty">
                            <img class="card-img" src="img/front1.jpg" alt="Produkt 1">
                        </a>
                        <a href="/produkty">
                            <div class="card-img-overlay front-banner-overlay">
                                <h5 class="card-title">Produkt 2</h5>
                                <i class="fa fa-long-arrow-right" aria-hidden="true"></i>
                                <p>Produkt 2</p>
                            </div>
                        </a>
                    </div>
                </div>
 
            </div>
        </div>
    </section>
.front-banner-overlay{
    background-color:#FFC700;
    width: 180px;
    height: 180px;
    margin: 20px;
}
 
.front-banner-overlay h5{
    font-family: Inter;
    font-style: normal;
    font-weight: 500;
    font-size: 36px;
}
 
.front-banner-overlay p{
    font-family: Inter;
    font-style: normal;
    font-size: 13px;
    line-height: 16px;
}
 
[HTML] pobierz, plaintext 

W jaki sposób mogę to zrobić?

Bardzo proszę o pomoc

Ten post edytował trifek 20.07.2020, 15:11:59

[trueblue]

Brakuje pliku fontawesome.css - https://fontawesome.com/v4.7.0/get-started/

Dla kwadratu nadaj display:flex, flex-direction:column, a dla <p> margin-top:auto. Możesz to ustawić nadając dedykowane klasy z Bootstrap.