.card-container {display: flex; flex-wrap: wrap; justify-content: space-evenly; position: sticky;}
 .card {display: flex; flex-direction: column-reverse; background: white; margin: 16px; padding: 2vw; max-width: 100%; border: 5px solid #1f82bf; align-items: center;}
h1 {font-family: "Roboto", sans-serif;
 font-weight: 500;
 border: 4px solid black; 
 position: sticky; 
 z-index: 1;
 text-align: center; 
 padding: 1px; 
background-color:#0bcb78;
height: 335px;
top: 2px}
body {background-color: white;
  font-family: "New Amsterdam", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 36px;
   position: sticky;}
.content {padding: 1em; display: flex; flex-direction: column; align-items: center;}
.image {max-width: 500px; width: 100%; height: 100%; border: solid black 3px;}
.Mordecai {height: 100px;}
.Finn {order: -3;}
.Iceking {order: -3;}
@media (min-width: 700px) and (max-width:1200px) {
.card {
  width: 40%;
}
}
@media screen and (max-width:1200px) {
.card {
  width: 20%;
}
}