<h2>AI Gallery</h2>
<h3>Interactive portfolio of AI Use cases</h3>
<!-- 
======================
Card with image at top
======================
-->
<div class="column">
  <div class="card">
  <div class="card-top">
    <img src="https://i.guim.co.uk/img/media/ea1cd013c6eb29a3356a015be5eeeedde3c4ad74/320_324_3045_1830/master/3045.jpg?w=1125&q=55&auto=format&usm=12&fit=max&s=8a916c5f8e2eb58a58c649e8dbc85ce1">

    <p>Next Best Action</p>
  </div>
  <div class="card-body">
    <p id="sub">Maybe a sub-heading</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dapibus quam in libero lacinia interdum. Vivamus sed sem vel dui suscipit volutpat. Maecenas ultricies nibh lacus, </p>
  </div>
    <div class="card-footer">
      <ul class="card-actions">
        <a href=""> <li>Share</li></a>
        <a href=""> <li>Read more</li></a>
        <a href=""> <li>Contact</li></a>
      </ul>
    </div>
  </div>
  <div class="card">
  <div class="card-top">
    <img src="https://i.guim.co.uk/img/media/ea1cd013c6eb29a3356a015be5eeeedde3c4ad74/320_324_3045_1830/master/3045.jpg?w=1125&q=55&auto=format&usm=12&fit=max&s=8a916c5f8e2eb58a58c649e8dbc85ce1">

    <p>Next Best Action</p>
  </div>
  <div class="card-body">
    <p id="sub">Maybe a sub-heading</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dapibus quam in libero lacinia interdum. Vivamus sed sem vel dui suscipit volutpat. Maecenas ultricies nibh lacus,</p>
  </div>
    <div class="card-footer">
      <ul class="card-actions">
        <a href=""> <li>Share</li></a>
        <a href=""> <li>Read more</li></a>
        <a href=""> <li>Contact</li></a>
      </ul>
    </div>
  </div>
</div>

<!-- 
======================
Card with image at top
======================
-->
<div class="column">
  <div class="card">
  <div class="card-top">
    <img src="http://1g1uem2nc4jy1gzhn943ro0gz50-wpengine.netdna-ssl.com/wp-content/uploads/2013/04/predictions.jpg">

    <p>Plug-and-Predict</p>
  </div>
  <div class="card-body">
    <p id="sub">Maybe a sub-heading</p>
    <p>An evolutionary algorithm-based high-throughput feature discovery pipeline for customer event prediction (Telecom and Life Science) </p>
  </div>
    <div class="card-footer">
      <ul class="card-actions">
        <a href=""> <li>Share</li></a>
        <a href=""> <li>Read more</li></a>
        <a href=""> <li>Contact</li></a>
      </ul>
    </div>
  </div>
</div>


<!-- 
=============================
column of colored music cards
=============================
-->
<div class="column">
  <div class="card teal">
    <p id="info-header"> Design Intelligence</p>
    <p id="info-body">NLP toolkit to uncover insights into clinical trials.</p>
    <p id="info-action"> <a href="">Read More</a></p>
  </div>
  <div class="card red info">

    <div class="info">
      <div class="info-text">
        <p id="info-header"> Driverless Forecasting</p>
        <p id="info-body">Forecasting Ability</p>
      </div>
      <div class="info-image">
        <img src="https://f4.bcbits.com/img/a3199424256_16.jpg">
      </div>
    </div>
  </div>
  <div class="card pink info">

    <div class="info">
      <div class="info-text">
        <p id="info-header"> Personalised Analytics </p>
        <p id="info-body">Intelligent Assistant</p>
      </div>
      <div class="info-image">
        <img src="https://f4.bcbits.com/img/a0344629844_10.jpg">
      </div>
    </div>
    
  </div>
  

</div>

body {
  font-family: 'Roboto', sans-serif;
}
.column{
  vertical-align:top;
  max-width:290px;
  display: inline-block;
  margin: .5em;
  
}

li {
  list-style: none;
}
a {
  text-decoration: none;
  transition-duration: .25s;
}


body {
  background: #e2e1e0;
  text-align: center;
}

.card {
  align:center;
  display: inline-block;
  background: #fff;
  border-radius: 2px;
  display: inline-block;
  height: auto;
  margin: .5rem;
  position: relative;
  width: 290px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, .0), 0 6px 6px rgba(0, 0, 0, 0.1);
  transition-duration: .25s;
  font-family: 'Roboto' sans-serif;
  border-radius: 2px;
  text-align:left;
}

.card:hover {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

.card-top {
 width: auto;
}

.card-top img{
max-width:100%;  
}
.card-top p{
  font-size: 1.5em;
  position: absolute;
  margin-top:-1.7em;
  margin-left:.6em;
  color:white;
  
}

.card-body p{
  position:relative;
  padding-left: 1em;
  padding-right: 1em;
  font-size: .9em;
  
}

.card-footer {
  bottom: 0;
}

.card-footer li {
  display: inline;
  padding-right: 10px;
  position: relative;
  color:#E65100;
}
.card-actions {}
#sub{
  color:grey;
}
.teal{
  background-color: #006064;
  color: white;
}
.teal a{
  color: white;
}
.pink{
  background-color:#EF9A9A;
  color:black;
}
.red{
  background-color:#880E4F;
  color:white;
}

#info-header{
  font-size:1.5em;
  padding-left:.5em;
}
#info-body{
  margin-top:-1.2em;  
  padding-left:1em;
  font-size:.9em;
  font-weight:300;
}
#info-action{
    padding-left:.9em;
}
.info {
  display:table;
}
.info-text {
  display:table-cell;
  width:60%;
  vertical-align:top;

}
.info-text p{
  width:100%;
  vertical-align:top;
}
.info-image{
  padding:.6em;
  vertical-align:bottom;

}
.info-image img{
  display:table-cell;
  max-width:100%;  
}