*{
box-sizing: border-box;
margin: 0;
padding: 0;
}


body {
background-color: #2F4858;
}



.wrapper {

  max-inline-size: 1100px; 
  margin-inline: auto;
  padding: 10px;
  height: auto;
  align-items: center;
 
}




.nav-section {

background-color: #406379;
text-align: center;
height: 70px;
font-size:x-large;





}





























.content-section {

  display:grid;
  gap: 5px;
  grid-template-columns: 1fr 1fr 1fr;

  border-radius: 2%;

}


.card{

display: grid;
grid-template-columns: 5fr 3fr;
padding: 5%;

border: 1px solid rgb(104, 2, 50);
border-radius: 5%;
color: #f3e9ee;
background-color: #33617a;


}

li {

text-decoration: none;
list-style-type: none;
color: #000;

}


ul a {

color: rgb(222, 228, 228);
padding-top: 20px;

}


 @media (width < 800px) {
  
.content-section {

grid-template-columns: 1fr 1fr;


}}

  
 @media (width < 600px) {
  
.content-section {

grid-template-columns: 1fr;


}}


.smallpic {

  border-radius: 5%;
  max-width: 90%;   
  max-height: 90%;    
        
}