section { display: flex; flex-flow: column; height: 100vh; }

#section1 .background { position: absolute; width: 100%; height: 100%; }
#section1 header { position: relative; display: flex; justify-content: end; flex-wrap: wrap; padding: 20px; }

#section1 .menu { display: flex; list-style: none; margin: 15px; padding: 0; }
#section1 .menu > li > a { text-decoration: none; color: #fff; }
#section1 .menu > li { margin: 0 15px; white-space: nowrap; }
#section1 .menu > li:last-child { margin-left: 40px; }

#section1 .col_person > .person { height: 90%; }
#section1 .col_person > .logo { display: none; position: relative; height: 20%; margin: 0 40px; }
#section1 .col_person > .logo:hover { 
  transform-origin: top center;
  animation-duration: var(--animate-duration); 
  animation-fill-mode: both; 
  animation-name: swing; }

#section1 .message {
  position: relative;
  width: 70%;
  margin: 0;
  font-size: 26px;
  color: #fff;
  text-align: center; }

/* --------------------------------------------------------------------------------------------- */
/* ################################## RESPONSIVE STYLES ######################################## */
/* --------------------------------------------------------------------------------------------- */
/* Bootstrap5 grid | xs < 576px | sm ≥ 576px | md ≥ 768px | lg ≥ 992px | xl ≥ 1200px | xxl ≥ 1400px */
/* #################### xs < 576px ##################### */
@media screen and (max-width: 575px) {
  #section1 .col_person { flex-direction: column; height: 60% !important; }
  #section1 .col_person > .person { height: 70%; }
  #section1 .col_person > .logo { height: 20%; margin: 0; margin-top: 20px; }
  #section1 .col_description { height: 40% !important; align-items: start !important; margin-top: 20px; }
  #section1 .message { width: 90%; padding: 15px; font-size: 20px; background: rgba(0,0,0,.4); border-radius: 12px; }
}
/* #################### sm ≥ 576px ##################### */
@media screen and (min-width: 576px) and (max-width: 767px) {
  #section1 .col_person { height: 60% !important; }
  #section1 .col_person > .person { height: 100%; }
  #section1 .col_person > .logo { height: 30%; }
  #section1 .col_description { height: 40% !important; align-items: start !important; margin-top: 20px; }
  #section1 .message { width: 90%; padding: 15px; font-size: 20px; background: rgba(0,0,0,.4); border-radius: 12px; }
}
/* #################### md ≥ 768px ##################### */
@media screen and (min-width: 768px) and (max-width: 991px) { 
  #section1 .col_person { flex-direction: column; }
  #section1 .col_person > .person { height: 70%; }
  #section1 .col_person > .logo { height: 15%; margin: 0; margin-top: 20px; }
  #section1 .message { font-size: 24px; }
}
/* #################### lg ≥ 992px ##################### */
@media screen and (min-width: 992px) and (max-width: 1199px) { 
  #section1 .col_person > .person { height: 60%; }
  #section1 .col_person > .logo { height: 15%; margin: 0 30px; }
}
/* #################### xl ≥ 1200px #################### */
@media screen and (min-width: 1200px) and (max-width: 1399px) { 
}
/* #################### xxl ≥ 1400px ################### */
@media screen and (min-width: 1400px) { 
}