.about-top {
  display: flex;
}

.about-top-img {
  flex: 1 0 auto;
  margin: 5px;
  width: 18%;  
}

.intro {
  font-size:larger;
  display: flex;
}

.intro div {
  flex: 1 0 auto;  
  width: 50%;
}

.about-middle {
  font-size:larger;
  display: flex;
}

.about-middle-left { 
  width: 40%;
}

.about-middle-right { 
  width: 60%; 
  text-align: right;
}

.about-middle-img {
  flex: 1 0 auto;
  margin: 5px;
  width: 30%;
}

.about-bottom {
  font-size:larger;
  display: flex;
}

.about-bottom-left { 
  width: 40%;
}

.about-bottom-right { 
  width: 60%; 
  text-align: right;
}

.about-bottom-img {
  width: 100%;
  object-fit: contain;
}

@media screen and (max-width: 900px) {
  .about-top {
    flex-wrap: wrap;
  }  
  .about-top-img {
    width: 46%;
  }
  .about-middle-img {
    width: 46%;
  }    
}

@media screen and (max-width: 600px) {
  .intro  {
    flex-wrap: wrap;
  }
  .intro div {
    width: 100%;
  }
  .about-bottom {
    flex-wrap: wrap;    
  }
  .about-bottom div {
    width: 100%;
  }  
}

@media screen and (max-width: 400px) {
  .about-top {
    flex-wrap: wrap;
  }  
  .about-top-img {
    width: 40%;
  }
  .about-middle  {
    flex-wrap: wrap;
  }
  .about-middle div {
    width: 100%;
  } 
  .about-middle-img {
    width: 100%;
  }    
}