body{
  font-family: Arial, Helvetica, sans-serif;
  padding:20px;
}

.headline{
  text-align:center;
}

.description{
  padding:10px;  
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  padding-top: 20px;
  gap: 20px;
}

.container > div { 
  max-width:40rem; 
  max-height:10rem; 
}


.container2 {
  display: grid;
  grid-template-columns: 30% 70%;
  gap: 20px;
  padding:10px;
}
.container2 > img {
  padding-top:20px;
}

@media (max-width: 800px) {
  /* CSS that should be displayed if width is equal to or less than 800px goes here */
.container2 {
  display: grid;
  grid-template-columns: 100%;
  gap: 20px;
  padding:10px;
}

.container2 > img {
  padding-top:0px;
}

}


.container2 > div { 
  max-width:40rem; 
/*  max-height:10rem; */
}

.column {
  padding: 10px;
}

img {
  width:100%;
/*  height:100%;*/
  object-fit: cover;
}