<style type="text/css">
    .products {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        word-break: break-word;
    }

    .product {
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        width: 280px;
        padding: 15px;
        box-shadow: 0px 2px 4px #00000029;
        margin: auto auto 30px auto;
        border-radius: 10px;
    }

    .product-image-container {
        height: 160px;
        position: relative;
    }

    .product-image {
        height: 70%;

        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .product-title {
        text-align: center;
        margin: 0 0 10px 0 !important;
    }

    #product-title-link {
        font-weight: bold;
        font-size: 15pt;
        color: #CB1959;
        text-decoration: none;
    }

    #product-title-link:hover {
        text-decoration: underline;
    }

    .product-desc {
        margin: 0 !important;
        text-align: center;
        font-size: 15px;
        letter-spacing: 0px;
        color: #494440;
    }
</style>

<section class="products">
    <div id="product-plataforma" class="product">
        <div class="product-image-container">
            <img class="product-image" src="https://tdn.totvs.com/download/attachments/66618185/plataforma.png" alt="">
        </div>
        <h2 class="product-title">
            <a id="product-title-link" href="https://tdn.totvs.com/x/hYP4Aw">TOTVS Fluig Plataforma</a>
        </h2>
        <p class="product-desc">
            Unifique processos, pessoas e sistemas com uma interface fácil de usar e intuitiva.
        </p>
    </div>

    <div id="product-nodecode" class="product">
        <div class="product-image-container">
            <img class="product-image" src="https://tdn.totvs.com/download/attachments/66618185/no-code.png" alt="">
        </div>
        <h2 class="product-title">
            <a id="product-title-link" href="https://tdn.totvs.com/x/PzkzJg">TOTVS Fluig No-Code</a>
        </h2>
        <p class="product-desc">
            Resolva diversas necessidades do dia a dia sem precisar de linhas de código.
        </p>
    </div>
 
    <div id="product-identity" class="product">
        <div class="product-image-container">
            <img class="product-image" src="https://tdn.totvs.com/download/attachments/66618185/identity.png" alt="">
        </div>
        <h2 class="product-title">
            <a id="product-title-link" href="https://tdn.totvs.com/x/NnA9I" >TOTVS Identity</a>
        </h2>
        <p class="product-desc">
            Tenha autenticação única para acessar sistemas da empresa com <i>single sign-on</i>.
        </p>
    </div>
    <div id="product-flows" class="product">
        <div class="product-image-container">
            <img class="product-image" src="https://tdn.totvs.com/download/attachments/66618185/Icon%20flows%20TDN-03.png?api=v2" alt="">
        </div>
        <h2 class="product-title">
            <a id="product-title-link" href="https://tdn.totvs.com/x/oFVzL" >TOTVS Flows</a>
        </h2>
        <p class="product-desc">
            Solução de processos pré-definidos que permite otimizar a implantação de processos na sua empresa. Basta instalar os processos e começar a usar.
        </p>
        </div> 
</section>