.test{
    place-items: center;
}

.test2{
    height: auto;
    width:auto;
    object-fit: fill;
}

.body{
    background-color:beige;
    overflow: hidden;
}

.container {  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  grid-template-rows: auto auto auto auto auto auto; 
  grid-template-areas:
    "banner banner banner banner banner banner"
    "text text text text text text"
    "club1 club1 club1 croc1 croc1 croc1"
    "club2 club2 club2 croc2 croc2 croc2"
    ". . littermate littermate . ."
    ". . littermate littermate . .";
}

.banner { grid-area: banner; 

}

.text { grid-area: text; 

}

.club1 { grid-area: club1; 

}

.club2 { grid-area: club2; 

}

.croc1 { grid-area: croc1; 

}

.croc2 { grid-area: croc2; 

}

.littermate { grid-area: littermate; }