Bootstrap horizontal cards team section

by Grobbert

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="py-5 bg-light members">
    <div class="container">
        <div class="row justify-content-center mb-3">
            <div class="col-md-7 text-center">
                <h1 class="display-5 mb-3">Meet Our Team</h1>
                <p class="lead">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            </div>
        </div>
        <div class="row">
            <!-- column  -->
            <div class="col-lg-6">
                <div class="card shadow border-0 mb-4">
                    <!-- Row -->
                    <div class="row no-gutters">
                        <div class="col-md-5 pro-pic" style="background:url(https://www.wrappixel.com/demos/ui-kit/wrapkit/assets/images/team/t1.jpg) center center no-repeat">
                            <div class="card-img-overlay">
                                <ul class="list-inline position-relative text-center">
                                    <li class="list-inline-item"><a href="#" class="text-decoration-none d-block text-white px-1"><i class="icon-social-facebook"></i></a></li>
                                    <li class="list-inline-item"><a href="#" class="text-decoration-none d-block text-white px-1"><i class="icon-social-twitter"></i></a></li>
                                    <li class="list-inline-item"><a href="#" class="text-decoration-none d-block text-white px-1"><i...

CSS

@import url(//fonts.googleapis.com/css?family=Montserrat:300,400,500);

.members {
    font-family: "Montserrat", sans-serif;
    color: #8d97ad;
    font-weight: 300;
}

.members h1,
.members h2,
.members h3,
.members h4,
.members h5,
.members h6 {
    color: #3e4555;
}

.members .font-weight-medium {
    font-weight: 500;
}

.members .bg-light {
    background-color: #f4f8fa !important;
}

.members .subtitle {
    color: #8d97ad;
    line-height: 24px;
}

.members .pro-pic {
    min-height: 200px;
}

.members .pro-pic .card-img-overlay ul {
    top: 50%;
}

.members .pro-pic .card-img-overlay ul li a {
    -webkit-transition: 0.1s ease-in;
    -o-transition: 0.1s ease-in;
    transition: 0.1s ease-in;
}

.members .pro-pic .card-img-overlay ul li a:hover {
    -webkit-transform: translate3d(0px, -5px, 0px);
    transform: translate3d(0px, -5px, 0px);
}

.members .pro-pic:hover .card-img-overlay {
    display: block;
}

ul.social-network {
    list-style: none;
    display: inline;
    margin-left: 0 !important;
    padding: 0;
}

ul.social-network li {
    display: inline;
    margin: 0 5px;
}

.social-network a.icoFacebook:hover {
    background-color: #3B5998;
}

.social-network a.icoTwitter:hover {
    background-color: #33ccff;
}

.social-network a.icoJoomla:hover {
    background-color: #BD3518;
}

.social-network a.icoVimeo:hover {
    background-color: #0590B8;
}

.social-network a.icoLinkedin:hover {
    background-color: #007bb7;
}

.social-network a.icoRss:hover i,
.social-network a.icoFacebook:hover i,
.social-network a.icoTwitter:hover i,
.social-network a.icoGoogle:hover i,
.social-network a.icoVimeo:hover i,
.social-network a.icoLinkedin:hover i {
    color: #fff;
}

a.socialIcon:hover,
.socialHoverClass {
    color: #44BCDD;
}

.social-circle li a {
    display: inline-block;
    position: relative;
    margin: 0 auto 0 auto;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    text-align: center;
    width:...