.hero-section {
min-height: 500px;
position: relative;
background: linear-gradient(rgba(42, 84, 156, 0.7), rgba(42, 84, 156, 0.5)), url('granville.jpg') center/cover no-repeat;
}

.hero-text {
font-size: 3vw;
line-height: 1.5;
text-align: center;
position: absolute;
top: 45%;
left: 20%;
transform: translate(-12.5%, -50%);
color: var(--primary);
}

@media (min-width: 768px) {
.hero-text {font-size: 1.5rem;}
.andrew1{display: flex;
justify-content:end;
align-items: center;
text-align: center;}
.andrew2{justify-content:start;}
}

.card {
flex: 20vw 0 0;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
img.avatar {
width: 80%;
height: auto;
margin: 2vw auto;
padding: 0rem;
border-radius: 50%;
}
.card > p {
font-size: 1rem;
padding: 1rem;
margin: 0;
color: #333;
/* 20px * 1.7 * 6 = 204px  + 40px = 244px */
height: 244px;
}

h3.title{padding:5px;font-size:1em;}
h4.name{padding:0;}
h5.ed{padding:0;font-style:italic;}

.andrew1{
}

.andrew2{
display: flex;
justify-content:middle;
align-items: center;
text-align: center;
}

.pic-bg{background: linear-gradient(to bottom right, #f5f0e1, #e5dbc3);
 }