CSS - Исправлены проблемы с масштабированием макета карт

Question

У меня есть восемь карт на моей веб-странице вместе с заголовком. Мой макет полностью разбивается на увеличение и уменьшение масштаба.

Вы можете увидеть здесь: https://rimildeyjsr.github.io/st.anthony/#faculty_section

Я попытался изменить высоту карты эм единиц, чтобы скрепить изображение и текст внутри него, но он все еще полностью ломается. Как я могу решить эту проблему?

PS: Я использовал загрузчик, чтобы достичь макет сетки

HTML:

<div class="section" id="section3"> 
    <div class="container-fluid"> 
     <h2 class="section-heading">Distinguished Faculty Members</h2> 
     <div class="row"> 
      <div class="col-lg-3 col-md-3 col-sm-3 card extra-left-margin"> 
       <img src="images/mrs_m_sinha_optimised.png" alt="faculty"> 
       <h4>Mrs M Sinha</h4> 
       <h6>Faculty of Biology</h6> 
      </div> 
      <div class="col-lg-3 col-md-3 col-sm-3 card"> 
       <img src="images/mrs_francis_optimised.png" alt="faculty"> 
       <h4>Mrs M Francis</h4> 
       <h6>Faculty of Physics</h6> 
      </div> 
      <div class="col-lg-3 col-md-3 col-sm-3 card"> 
       <img src="images/mrs_khalkho_optimised.png" alt="faculty"> 
       <h4>Mrs A Khalkho</h4> 
       <h6>Faculty of Hindi</h6> 
      </div> 
      <div class="col-lg-3 col-md-3 col-sm-3 card"> 
       <img src="images/mrs_verma_optimised.png" alt="faculty"> 
       <h4>Mrs P Verma</h4> 
       <h6>Faculty of Hindi</h6> 
      </div> 

     </div> 

     <div class="row"> 
      <div class="col-lg-3 col-md-3 col-sm-3 card extra-left-margin-less-top"> 
       <img src="images/mrs_kumar_optimised.png" alt="faculty"> 
       <h4>Mrs A Kumar</h4> 
       <h6>Faculty of English</h6> 
      </div> 
      <div class="col-lg-3 col-md-3 col-sm-3 card less-top-margin"> 
       <img src="images/mrs_kenwar_optimised.png" alt="faculty"> 
       <h4>Mrs A Kenwar</h4> 
       <h6>Faculty of Geography <br> (Now Retired)</h6> 
      </div> 
      <div class="col-lg-3 col-md-3 col-sm-3 card less-top-margin"> 
       <img src="images/mrs_srivastav_optimised.png" alt="faculty"> 
       <h4>Mrs Shrivastav</h4> 
       <h6>Faculty of Hindi</h6> 
      </div> 
      <div class="col-lg-3 col-md-3 col-sm-3 card less-top-margin"> 
       <img src="images/the_principal.jpg" alt="faculty"> 
       <h4>Mrs K Franklin</h4> 
       <h6>Faculty of Everything <br> (Now Retired)</h6> 
      </div> 
     </div> 
    </div> 

CSS:

.card { 
    background: #fff; 
    border-radius: 3px; 
    display: inline-block; 
    height: 16em; 
    margin: 3% 3% 2% 3%; 
    position: relative; 
    width: 13%; 
    opacity: 0; 
    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22); 
} 

.less-top-margin { 
    margin: 1% 3% 2% 3%; 

} 

.extra-left-margin { 
    margin: 3% 3% 2% 14%; 
} 

.extra-left-margin-less-top { 
    margin: 1% 3% 2% 14%; 
} 


.section-heading { 
    text-align: center; 
    background-color: #4f2500; 
    color: white; 
    font-family: "Roboto Mono",monospace; 
    margin: 0 auto 20px auto; 
    width: 100%; 
    height: 1.5em; 
    opacity: 0; 
    position: relative; 
    font-weight: normal; 
} 

.card img { 
    -webkit-border-radius:50%; 
    -moz-border-radius: 50%; 
    -o-border-radius: 50%; 
    -ms-border-radius: 50%; 
    border-radius: 50%; 
    display: block; 
    width: 70%; 
    height: auto; 
    margin: 8% auto 25% auto; 
} 

.card h4 { 
    font-family: "Roboto Mono",sans-serif; 
    font-size: 1.15em; 
    text-align: center; 
    font-weight: 500; 
    margin: 0; 
} 

.card h6 { 
    font-family: "Roboto Mono",sans-serif; 
    text-align: center; 
    font-size: 0.68em; 
    font-weight: 500; 
    font-style: italic; 
    margin:4px 0 0 0; 
    line-height:1.5 ; 
} 

Ссылка на репозиторий: https://github.com/rimildeyjsr/st.anthony

Answer 1

изменения CSS

.card { 
    background: #fff; 
    border-radius: 3px; 
    display: inline-block; 
    /* height: 16em; */ **<---- REMOVE** 
    margin: 3% 3% 2% 3%; 
    position: relative; 
    width: 13%; 
    opacity: 0; 
    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22); 
    padding: 10px; <----- ADD 
} 

в СМИ разделе запроса

@media screen and (min-width: 1025px) 
.card img { 
    width: 75%; 
    /* margin: 8% auto 20% auto; */ **<---- REMOVE** 
} 
@media screen and (min-width: 920px) 
.card img { 
    width: 75%; 
    /* margin: 8% auto 35% auto; */ **<---- REMOVE** 
}