body{
font-family: Arial,sans-serif;
magin: 0;
padding: 0;
background-color: #f5f5f5;
}

header, nav ,main, footer{
padding: 1rem;
}


header{
background-color: #333;
color: #fff;
}

nav{
background-color: #333;
color: #fff;
}

nav ul{
list-style: none;
display: flex;
justify-content: space-between;
padding: 0;
margin: 0;
}

nav li a{
color: #fff;
text-decoration:none;
padding: 1rem;
display: block;
}

nav li a:hover{
background-color #999;
}

main{
padding: 1rem
}

article{
background-color: #fff;
padding: 1rem;
margin-bottom: 1rem;
border-radius: 5px;
box-shadow: 2px; @2px; 5px;
rgba(0,0,0,0,3);
}

article h2{
margin-top: 0;
}

footer{
background-color: #666;
color: #fff
margin-top: @1rem;
text-align: center;
}


.card-wrapper {

  display: flex;

  margin-bottom: 24px;


}

img {
width: 200px;
height: 150px;
}

.card {
  display: flex;
  background-color: #f3a68c;
  flex-direction: column;
  
}

.card-content {
  flex: 1 1 auto;
  display: flex;
  
}



.card-gap{
  width: 50px;
}

@media screen and (max-width: 480px){

header h1{
font-size: 1.5rem;
}

nav ul{
flex-direction: column;
}

nav li a{
margin-bottom: 0.5rem;
}


.card-wrapper {
  display: block;
  margin-bottom: 24px;

}

.card {
  display: block;
  background-color: #f3a68c;
  margin:auto;
}

.card-content {

  flex-direction: column;

}



.card-gap{
  height:  50px;
}

img {
max-width: 100%;
height: auto;
}

}