Mini Shell

<style type="text/css">
<?php echo $idcss ?>{padding: 40px 0}
<?php echo $idcss ?> h3{color: #e6af7a; font-size: 55px}
<?php echo $idcss ?> .row{display: flex; align-items: center}
<?php echo $idcss ?> h4{border-top: solid 2px #1d1d1d; border-bottom: solid 2px #1d1d1d; text-align: center; padding: 15px; letter-spacing: 15px; margin: 0}
<?php echo $idcss ?> p{font-family: regular}

@media(max-width: 767px){  
    <?php echo $idcss ?> .row{display: block;}
    <?php echo $idcss ?> .rotulo{marign: 40px 0}
    <?php echo $idcss ?> h4{margin: 0 10px; letter-spacing: 1px; font-size: 16px}
}

</style>

<div class="clear"></div>
<section id="<?php echo $idCss ?>">
    <div class="container">
        <div class="row">
            <?php 
            $query = "SELECT * FROM registros WHERE registros_idpg = $template_idpg LIMIT 8";
            $registros = mysqli_query($config, $query) or die(mysqli_error());
            while($row_registros = mysqli_fetch_assoc($registros)){ ?>
                <div class="col-md-4">
                    <h3 class="transition"><?php echo $row_registros['registros_titulo'] ?></h3>
                </div>
                <div class="col-md-3">
                    <center>
                        <img src="<?php echo RAIZ."timthumb.php?src=".RAIZ_UP.$row_registros['registros_imagem'] ?>&zc=2&w=120&h=120" class="img-fluid rotulo transition">
                    </center>
                </div>
                <div class="col-md-5">
                    <p class="transition"><?php echo $row_registros['registros_texto'] ?></p>
                </div>
            <?php } ?>
        </div>
        <div class="clear40"></div>
        <h4>BRASA NO CALENDÁRIO OFICIAL DE EVENTOS</h4>
    </div>
</section>