Blocos de Informações para Loja Online HTML + CSS

<div class="informacoes-loja container">
    <div class="itens" id="item-1">
        <div class="imagem">
          <svg width="141" height="141" viewBox="0 0 141 141" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect width="141" height="141" rx="8"/>
            <path d="M34.3223 26C29.7505 26 26.0413 29.7092 26.0413 34.281V42.5619H17.7603C16.2421 42.5619 15 43.8041 15 45.3223C15 46.8404 16.2421 48.0826 17.7603 48.0826H26.0413H61.9255C63.4437 48.0826 64.6858 49.3247 64.6858 50.8429C64.6858 52.3611 63.4437 53.6032 61.9255 53.6032H26.0413H23.281C21.7628 53.6032 20.5206 54.8454 20.5206 56.3636C20.5206 57.8817 21.7628 59.1239 23.281 59.1239H26.0413H56.4048C57.923 59.1239 59.1652 60.366 59.1652 61.8842C59.1652 63.4024 57.923 64.6445 56.4048 64.6445H26.0413H17.7603C16.2421 64.6445 15 65.8867 15 67.4048C15 68.923 16.2421 70.1652 17.7603 70.1652H26.0413H50.8842C52.4024 70.1652 53.6445 71.4073 53.6445 72.9255C53.6445 74.4437 52.4024 75.6858 50.8842 75.6858H26.0413V97.7684C26.0413 106.912 33.4597 114.33 42.6032 114.33C51.7468 114.33 59.1652 106.912 59.1652 97.7684H81.2478C81.2478 106.912 88.6661 114.33 97.8097 114.33C106.953 114.33 114.372 106.912 114.372 97.7684H119.892C122.946 97.7684 125.413 95.3014 125.413 92.2477C125.413 89.1941 122.946 86.7271 119.892 86.7271V75.6858V70.1652V66.939C119.892 64.0062 118.736 61.1941 116.666 59.1239L103.33 45.7881C101.26 43.7178 98.448 42.5619 95.5152 42.5619H86.7684V34.281C86.7684 29.7092 83.0592 26 78.4874 26H34.3223ZM108.851 66.939V70.1652H86.7684V53.6032H95.5152L108.851 66.939ZM42.6032 89.4874C44.7995 89.4874 46.9058 90.3599 48.4588 91.9129C50.0117 93.4658 50.8842 95.5721 50.8842 97.7684C50.8842 99.9646 50.0117 102.071 48.4588 103.624C46.9058 105.177 44.7995 106.049 42.6032 106.049C40.407 106.049 38.3007 105.177 36.7477 103.624C35.1947 102.071 34.3223 99.9646 34.3223 97.7684C34.3223 95.5721 35.1947 93.4658 36.7477 91.9129C38.3007 90.3599 40.407 89.4874 42.6032 89.4874ZM89.5287 97.7684C89.5287 95.5721 90.4012 93.4658 91.9542 91.9129C93.5071 90.3599 95.6134 89.4874 97.8097 89.4874C100.006 89.4874 102.112 90.3599 103.665 91.9129C105.218 93.4658 106.091 95.5721 106.091 97.7684C106.091 99.9646 105.218 102.071 103.665 103.624C102.112 105.177 100.006 106.049 97.8097 106.049C95.6134 106.049 93.5071 105.177 91.9542 103.624C90.4012 102.071 89.5287 99.9646 89.5287 97.7684Z"/>
          </svg>
        </div>
        <div class="info">
            <p class="titulo">Frete Grátis</p>
            <p class="texto">Compras acima de <strong>R$149,90</strong></p>
        </div>
    </div>
    
    <div class="itens" id="item-2">
        <div class="imagem">
          <svg width="141" height="141" viewBox="0 0 141 141" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect width="141" height="141" rx="8"/>
            <path d="M68.138 24.1098C65.9 24.5449 64.4391 25.1355 62.5845 26.3581C61.7245 26.9176 60.4708 28.1402 52.2131 36.3876C47.0326 41.5474 42.8053 45.8057 42.8053 45.8472C42.8053 45.899 43.7585 45.9301 44.9189 45.9301C47.9029 45.9301 49.571 46.272 51.6122 47.2977C53.5393 48.2717 53.6222 48.3442 61.8178 56.5087C66.0969 60.7671 69.7543 64.3313 69.9512 64.4349C70.4589 64.7042 71.8265 64.7042 72.3342 64.4349C72.5311 64.3313 76.1471 60.8085 80.364 56.6123C87.0158 49.9812 88.1555 48.883 89.0051 48.3235C91.5021 46.6761 93.4707 46.0648 96.6204 45.9612L98.4647 45.899L89.2641 36.688C84.1976 31.6215 79.732 27.2284 79.3279 26.9176C77.7012 25.6639 75.9709 24.8247 73.9505 24.3066C73.0388 24.0787 72.6347 24.0372 70.8837 24.0062C69.4746 23.9854 68.6457 24.0165 68.138 24.1098Z"/>
            <path d="M32.869 55.7213C27.8439 60.7671 26.8907 61.7721 26.3416 62.601C25.2848 64.1966 24.746 65.4192 24.2797 67.2634C24.0207 68.2892 24 68.5171 24 70.5893C24 72.5683 24.0311 72.9205 24.2487 73.8012C24.7564 75.8631 25.637 77.7073 26.9011 79.3444C27.2119 79.7381 29.999 82.6081 33.097 85.706L38.7334 91.3321L42.453 91.3217C46.6285 91.301 47.2916 91.2388 48.7421 90.7519C50.8558 90.037 50.5967 90.2545 59.3311 81.5616C67.1951 73.7287 67.2055 73.7287 68.0861 73.2935C70.1273 72.2989 72.3238 72.3196 74.3338 73.3453C75.0177 73.708 75.6808 74.3296 82.747 81.3648C87.368 85.9651 90.6835 89.1977 91.1083 89.4878C91.9269 90.068 93.0458 90.5964 94.1027 90.9073C94.8072 91.1145 95.1595 91.1456 98.4439 91.2077C100.413 91.2388 102.091 91.301 102.174 91.3424C102.288 91.3942 103.904 89.8401 108.245 85.4885C113.302 80.4116 114.255 79.4065 114.804 78.5777C115.156 78.0389 115.56 77.3758 115.705 77.1064C117.726 73.1174 117.726 68.0612 115.705 64.0722C115.56 63.8028 115.156 63.1397 114.804 62.601C114.255 61.7721 113.302 60.7671 108.245 55.6902C103.904 51.3385 102.288 49.7844 102.174 49.8362C102.091 49.8776 100.413 49.9398 98.4439 49.9709C95.1595 50.0331 94.8072 50.0641 94.1027 50.2714C93.0458 50.5822 91.9269 51.1106 91.1083 51.6908C90.6939 51.9809 87.3369 55.2446 82.6952 59.8657C74.3856 68.1338 74.6343 67.9058 73.0594 68.3928C71.2463 68.9419 69.2466 68.6725 67.6199 67.6675C67.3194 67.481 63.8174 64.0722 59.2793 59.5652C50.6071 50.9345 50.8558 51.152 48.7421 50.4268C47.333 49.9502 46.4731 49.8673 42.3597 49.8466L38.7541 49.8155L32.869 55.7213Z"/>
            <path d="M70.2102 76.6712C69.7232 76.8163 69.1637 77.3447 61.8696 84.6181C53.6222 92.8344 53.5393 92.907 51.6122 93.8809C49.5814 94.9066 47.8926 95.2485 44.9086 95.2485C43.7482 95.2485 42.8053 95.2796 42.8053 95.3314C42.8053 95.3729 47.0326 99.6313 52.2131 104.791C60.4708 113.038 61.7245 114.261 62.5845 114.821C64.1801 115.877 65.4027 116.416 67.2469 116.882C68.2727 117.141 68.5006 117.162 70.5728 117.162C72.5518 117.162 72.9041 117.131 73.7847 116.913C75.8466 116.406 77.6909 115.525 79.3279 114.261C79.732 113.95 84.1976 109.557 89.2641 104.491L98.4647 95.2796L96.6204 95.2175C93.4707 95.1139 91.5021 94.5026 89.0051 92.8552C88.1555 92.2957 87.0054 91.187 80.3122 84.5145C72.8315 77.065 72.5725 76.8163 72.0337 76.6609C71.3395 76.464 70.894 76.464 70.2102 76.6712Z"/>
          </svg>
        </div>
        <div class="info">
            <p class="titulo">PIX</p>
            <p class="texto"><strong>5%</strong> de desconto</p>
        </div>
    </div>
    
    <div class="itens" id="item-3">
        <div class="imagem">
          <svg width="141" height="141" viewBox="0 0 141 141" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect width="141" height="141" rx="8"/>
            <path d="M70.4049 27C71.1985 27 71.9921 27.1725 72.7167 27.5003L105.202 41.2847C108.998 42.8891 111.827 46.6328 111.81 51.1528C111.724 68.2668 104.685 99.5792 74.9595 113.812C72.0784 115.192 68.7315 115.192 65.8504 113.812C36.1252 99.5792 29.0863 68.2668 29.0001 51.1528C28.9828 46.6328 31.8122 42.8891 35.6076 41.2847L68.1104 27.5003C68.8177 27.1725 69.6113 27 70.4049 27ZM70.4049 38.5243V103.737C94.2127 92.2126 100.613 66.6969 100.768 51.3944L70.4049 38.5243Z"/>
          </svg>
        </div>
        <div class="info">
            <p class="titulo">Segurança</p>
            <p class="texto">Loja com <strong>certificado SSL</strong></p>
        </div>
    </div>
    
    <div class="itens" id="item-4">
        <div class="imagem">
          <svg width="141" height="141" viewBox="0 0 141 141" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect width="141" height="141" rx="8"/>
            <path d="M32.0413 32C25.9513 32 21 36.9513 21 43.0413V48.5619H120.372V43.0413C120.372 36.9513 115.42 32 109.33 32H32.0413ZM120.372 65.1239H21V98.2477C21 104.338 25.9513 109.289 32.0413 109.289H109.33C115.42 109.289 120.372 104.338 120.372 98.2477V65.1239ZM40.3223 87.2065H51.3636C52.8817 87.2065 54.1239 88.4486 54.1239 89.9668C54.1239 91.485 52.8817 92.7271 51.3636 92.7271H40.3223C38.8041 92.7271 37.5619 91.485 37.5619 89.9668C37.5619 88.4486 38.8041 87.2065 40.3223 87.2065ZM59.6445 89.9668C59.6445 88.4486 60.8867 87.2065 62.4048 87.2065H84.4874C86.0056 87.2065 87.2478 88.4486 87.2478 89.9668C87.2478 91.485 86.0056 92.7271 84.4874 92.7271H62.4048C60.8867 92.7271 59.6445 91.485 59.6445 89.9668Z"/>
          </svg>
        </div>
        <div class="info">
            <p class="titulo">Parcelamento</p>
            <p class="texto">Em até <strong>12x</strong> no cartão</p>
        </div>
    </div>
</div>


<style>
.informacoes-loja {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 0;
    border-bottom: 1px solid #eaeaea;
}

.informacoes-loja .itens {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.informacoes-loja svg {
    width: 40px;
}

.informacoes-loja svg rect {
  fill: #e4e4ff; /* Fundo do SVG */
}

.informacoes-loja svg path {
  fill: #0001ff; /* Cor do SVG */
}

.informacoes-loja .imagem {
    display: flex;
    align-items: center;
    flex-direction: row;
    margin-right: 16px;
}

.informacoes-loja .titulo {
    font-weight: bold;
    margin-bottom: 2px;
    font-size: 18px;
    color: #503B66;
}

.informacoes-loja .texto {
    color: #818181;
}
  
@media (max-width: 767px) {
.informacoes-loja {
    display: flex;
    flex-direction: column;
    padding: 24px 50px;
}
}
</style>