body { 
  background-color: #dae1ed; 
  font-family: sans-serif;
  padding: 50px;
 

   
  
  
} 

.main-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  
  
 
}



.section {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1000px;
  height: 800px;
  border-style: solid;
  border-color: #83878f;
  background-color: white;
  border-width: 1px;
   padding: 20px;
   

} 

.left-wrapper {
 display: flex;
 flex-direction: column;
 margin-bottom: auto;
  
}


.top-left {
 
 display: flex;
 flex-direction: column;
 width: 200px;
 height: 400px;
 border-style: solid;
 border-color: #83878f;
 background-color: white;
 border-width: 1px;
 margin-right: auto;
 margin-bottom: auto;
  
}

.top-left h4 {
 
 display: block;
 font-family: sans-serif;
 color: white;
 background-color: #9d9fa3;
 text-align: right;
 margin-bottom: auto;
 margin-top: 0;
 margin: 0;
 padding: 2px;
 padding-right: 10px;
 
 
}


.top-left a {
 
display: flex;
flex-direction: column;
padding: 10px;
padding-bottom: 0;

 
}


.middle-wrapper {
 
 display: flex;
 justify-content: center;
 align-items: center;
 padding-left: 10px;
 margin-bottom: auto;
  
  
}




.middle {
 
 display: flex;
 flex-direction: column;
 border-style: solid;
 border-color: #83878f;
 background-color: white;
 width: 800px;
 height: 800px;
 border-width: 1px;
 

 
}

.middle h4 {
  
  display: block;
  color: white;
  font-family: sans-serif;
 
   background: linear-gradient(15deg, #9d9fa3, #dfe2e8);
  text-align: center;
  margin-top: 0;
   padding: 2px;
  
  
}


.top-left a {
 color: black;
 font-family: sans-serif;
 text-decoration: none; 
  
}

.imgs-wrapper {
 display: flex;
 padding: 20px;
 padding-top: 0;
 
  
  
}

.imgs-wrapper img {
 display: flex;
 flex-direction: column;
 filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5));
 border-style: ridge;
 border-width: 5px;
 border-color: white;
 
 
 
  
  
}