sponsor-section.html

<div class="container" >

    <div class="12u(small)" style="height: auto; display: inline-block">	
        <h3>Sponsored by:</h3>
    </div>
    <div class="12u" style="height: auto; display: inline-block">
        <div class="-2u 2u -1u(small) 10u(small) sponsors-container" style="float: left">
            <a href="https://www.bruker.com/">	
                <span class="sponsor-logo"><img src="images/logos/Logos-bruker/logo_rgb_300dpi.png" width="100%"></span>
            </a>
        </div>
        <div class="-2u 2u -1u(small) 10u(small) sponsors-container" style="float: left">
            <a href="https://www.agilent.com/">	
                <span class="sponsor-logo"><img src="images/logos/agilent.png" width="100%"></span>
            </a>
        </div>
        <div class="-2u 2u -1u(small) 10u(small) sponsors-container" style="float: left">
            <a href="https://sciex.com">	
                <span class="sponsor-logo"><img src="images/logos/sciex-the-power-of-precision-seeklogo.com.svg" width="100%"></span>
            </a>
        </div>
    </div>
    
    <div class="12u(small)" style="height: auto; display: inline-block">	
        <h3>Organized by:</h3>
    </div>
    <div class="12u" style="height: auto; display: inline-block">
        <div class="-2u 2u -1u(small) 10u(small) sponsors-container" style="float: left">
            <a href="https://uniandes.edu.co/">	
                <span class="sponsor-logo"><img src="images/logos/logo-uniandes.png" width="120%"></span>
            </a>
        </div>
        <div class="-1u 2u -1u(small) 10u(small) sponsors-container" style="float: left">
            <a href="https://www.unal.edu.co">	
                <span class="sponsor-logo"><img src="images/logos/logoUNAL.png" width="70%"/></span>
            </a>	
        </div>			
        
        <div class="-1u 2u -1u(small) 10u(small) sponsors-container" style="float: left">
            <a href="https://www.univalle.edu.co/">	
                <span class="sponsor-logo"><img src="images/logos/univalle.gif" width="50%"/></span>
            </a>	
        </div>		
    </div>
    <style>
        @media (max-width: 739px) {
            .sponsors-container {
                min-height: 200px;
            }
        }
        @media (min-width: 740px) {
            .sponsors-container {
                height: 180px;
            }
        }
        .sponsors-container {
            text-align: center;  /* align the inline(-block) elements horizontally */
            font: 0/0 a;         /* remove the gap between inline(-block) elements */
            padding: 0px 0px;
        }

        .sponsors-container:before {    /* create a full-height inline block pseudo=element */
            content: ' ';
            display: inline-block;
            vertical-align: middle;  /* vertical alignment of the inline element */
            height: 100%;
        }

        .sponsor-logo {
            display: inline-block;
            vertical-align: middle;  /* vertical alignment of the inline element */
        }
    </style>
</div>